// IMAGE ROLLOVER ===============================================================================
$(document).ready(function() {
	var arrImages = $('.column>div');
	var rolloverContainer = $('#rollover_container');
	var rolloverImageArea = $('#rollover_container .image_area');
	var favIcon = $('#rollover_container .fav');
	var unfavIcon = $('#rollover_container .unfav');
	var artistNameField = $('#rollover_container a.artist_name');
	var titleField = $('#rollover_container a.title');
	var currImage = null;
	var currID = null
	var timer = null;

	// Image Mouse Enter
		// -----------------------------------------------------------------------
		arrImages.mouseenter(function() {

			// prevent rollover container from fading in if it's already setup
				// for the image
				if (currID != this.id) {

					// reset the old image's zindex if it has been set higher
					if (currImage) {
						rolloverContainer.css('display', 'none');
						currImage.css('z-index', 0);
						currID = null;
					}

					currImage = $(this);

					// get image data
					currID = this.id
					var prizeIcon = $('#'+currID +' .prize');
					var imgName = currImage.attr('imageName');
					var artistID = currImage.attr('artistID');
					var imageURL = currImage.attr('imageURL');
					var artistName = currImage.attr('artistName');
					var pizzy = currImage.attr('pizzy');
					
					if(pizzy){
						prizeIcon.css('display', 'block');
					}else{
						prizeIcon.css('display', 'none');
					}
					// get image and dimensions
					var imagePos = currImage.position();
					var imgHeight = currImage.find('img').innerHeight();
					var imgWidth = currImage.find('img').innerWidth();

					// show the proper fav icon and hook up the events
					if (!pageData['favesList'][currID]) {
						favIcon.css('display', 'block');
						unfavIcon.css('display', 'none');
					} else {
						favIcon.css('display', 'none');
						unfavIcon.css('display', 'block');
					}

					// remove old events from the fav buttons
					favIcon.unbind('click');
					unfavIcon.unbind('click');

					// add new events to the fav buttons
					favIcon.bind('click', function() {
						favToggle(currID);
					});
					unfavIcon.bind('click', function() {
						favToggle(currID);
					});

					// update title and name links
					artistNameField.text(artistName);
					titleField.text(imgName);
					artistNameField.attr('href', '/' + artistID);
					titleField.attr('href', '/gallery/' + imageURL);

					// set a timer so the fade-in effect doesn't happen
					// immediately which creates a flashing effect when quickly
					// rolling over images
					timer = setTimeout(function() {
						// resize image area to match image size
							rolloverImageArea.css('height', imgHeight).css(
									'width', imgWidth);

							// set the image we're rolling over to be higher
							// zindex than the container
							currImage.css('z-index', 200);

							// position rollover container and fade in
							rolloverContainer.css('left',
									imagePos.left - 20 + 'px').css('top',
									imagePos.top - 20 + 'px').css('opacity', 0)
									.css('display', 'block').clearQueue()
									.animate( {
										'opacity' : 1
									}, 250);
						}, 100);
				}
			});

		// Image Mouse Leave
		// ---------------------------------------------------------------------
		// cancel the fade in timer if we leave the image
		arrImages.mouseleave(function() {
			clearTimeout(timer);
		});

		// Columb Wrapper Mouse Leave
		// ------------------------------------------------------------
		// hide the rollover when we leave the column area
		$('.column_wrapper').mouseleave(function() {
			clearTimeout(timer);
			rolloverContainer.css('display', 'none');
			currImage.css('z-index', 0);
			currID = null;
		});
	});