jQuery(document).ready(function() {

	// define some "globals"
	var CELLS = 16;
	var CELL_WIDTH = 240;
	var CELL_HEIGHT = 80;
	var FLIP_CLOSE_SPEED = 140;
	var FLIP_OPEN_SPEED = 210;
	var SLIDESHOW_SPEED_LEFT_TO_RIGHT = 150;
	var SLIDESHOW_SPEED_MAX_RANDOM = 2000;
	var SLIDESHOW_INTERVAL = 6000;
	var SLIDESHOW_COUNTER = 0;
	var IMAGES_PATH = "fileadmin/user_upload/flipheader/";
	// Index(es) of cells  that contain the logo. 
	//Those Index(es) will not be affected by mousehover, slideshow or any other interaction oder animation
	var logoIndexes = [ 8, 9, 12, 13 ];	

	//Index that is selected by MouseEnter or MouseClick
	var SELECTED_INDEX = 0;	

	
	var mouseEnterHandler = function(ev) {
		SELECTED_INDEX = jQuery(this).index();
		changeImages(jQuery(this).index(), "referenceImage");
			
		var jQuerytarget = jQuery(ev.target);
		if (!jQuerytarget.hasClass('colorGridCell') )
			jQuerytarget = jQuerytarget.parent();
		if(jQuery.inArray(jQuery(this).index(), logoIndexes) == -1) {
			jQuerytarget.quickFlipper();

			// flip back
			jQuery(this).delay(FLIP_CLOSE_SPEED+FLIP_OPEN_SPEED+400).queue(function () {
				jQuerytarget.quickFlipper();
				jQuery(this).dequeue();
			})
		}
	};	

	/****************************************************
	  addColorGrid ()
	****************************************************/
	function addColorGrid () {

		var index = 0;

		while (index<=(CELLS-1)) {
			var colorGridCell = '<div class="colorGridCell colorGridCell_'+index+'"><div class="frontimage"></div><div class="backimage"></div></div>';		
			jQuery(".colorGrid").append(colorGridCell);
			setCellImages(index);
			index++;
		}
		
		jQuery(".colorGridCell").bind('mouseenter', mouseEnterHandler);
		
	}
	
	/****************************************************
	  setCellImages (index)
	****************************************************/	
	function setCellImages (index) {

		var j  = (index/4).toString()
		var test = j.substring(0,1);

		jQuery(".colorGridCell_"+index+" .frontimage").css("background-image", "url('"+IMAGES_PATH+"/slideshow_"+SLIDESHOW_COUNTER+".jpg')");
		jQuery(".colorGridCell_"+index+" .frontimage").css("background-position", "-"+(index%4)*CELL_WIDTH+"px -"+test*CELL_HEIGHT+"px");

		jQuery(".colorGridCell_"+index+" .backimage").css("background-image", "url('"+IMAGES_PATH+"/slideshow_"+(SLIDESHOW_COUNTER+1)+".jpg')");
		jQuery(".colorGridCell_"+index+" .backimage").css("background-position", "-"+(index%4)*CELL_WIDTH+"px -"+test*CELL_HEIGHT+"px");

	}

	/****************************************************
	  changeImages (index, type)
	****************************************************/	
	function changeImages (index, type) {

		var side = "back";
		if (jQuery(".colorGridCell_"+index+" .backimage").css("display") == "block") {
			side = "front";
		}

		if(type == "slideshow") {
			jQuery(".colorGridCell_"+index+" ."+side+"image").css("background-image", "url('"+IMAGES_PATH+"/slideshow_"+(SLIDESHOW_COUNTER+1)+".jpg')");
		}
		else if (type == "referenceImage") {
			jQuery(".colorGridCell_"+index+" ."+side+"image").css("background-image", "url('"+IMAGES_PATH+"/slideshow_"+SELECTED_INDEX+".jpg')");
		}

	}		

	/****************************************************
	  flipImage(index)
	****************************************************/
	function flipImage(index) {

		if(jQuery.inArray(index, logoIndexes) == -1) {
			// Images appear in reading direction
//			jQuery(this).oneTime(index*SLIDESHOW_SPEED_LEFT_TO_RIGHT, function() {
			// Images appear randomly
			jQuery(this).oneTime(Math.floor(Math.random()*SLIDESHOW_SPEED_MAX_RANDOM), function() {
				jQuery(".colorGridCell_"+index).quickFlipper();
			});	
		}
	}
	
	addColorGrid();
	startSlideshow();

	
	/****************************************************
	  startSlideshow()
	****************************************************/
	function startSlideshow() {
		jQuery('.container').everyTime(SLIDESHOW_INTERVAL, 'slideshow', function() {
			jQuery('.colorGridCell').unbind('click', mouseClickHandler);
			jQuery('.colorGridCell').unbind('mouseenter', mouseEnterHandler);
			
			jQuery('.colorGridCell').each(function(index) {
				changeImages(index, "slideshow");
				flipImage(index);
			});	

			SLIDESHOW_COUNTER++;
			// Check for Logo
			if(jQuery.inArray(SLIDESHOW_COUNTER, logoIndexes) != -1) {
				SLIDESHOW_COUNTER++;
//alert(SLIDESHOW_COUNTER+" / "+jQuery.inArray(SLIDESHOW_COUNTER, logoIndexes));
			}			
			
			if (SLIDESHOW_COUNTER == CELLS-1) {SLIDESHOW_COUNTER = -1;}
			
			jQuery(this).delay(SLIDESHOW_SPEED_MAX_RANDOM+100).queue(function () {
				jQuery('.colorGridCell').bind('click', mouseClickHandler);
				jQuery('.colorGridCell').bind('mouseenter', mouseEnterHandler);
				jQuery(this).dequeue();
			})
		});
	}

	// Stop Slideshow
	jQuery('.container').mouseover(function() {
		jQuery('.container').stopTime('slideshow');
	});

	// Start Slideshow
	jQuery('.container').mouseout(function() {
		startSlideshow();
	});
	
	// for performance first init the quickFlip
	jQuery('.colorGridCell').quickFlip({
			closeSpeed : FLIP_CLOSE_SPEED,
			openSpeed : FLIP_OPEN_SPEED,
			vertical : true,
			easing : "swing",
			ctaSelector : 0,
			refresh : true
	});
	
	
	/****************************************************
	  MouseHandler - Click
	****************************************************/	
	var mouseClickHandler = function(ev) {
		jQuery('.colorGridCell').unbind('click', mouseClickHandler);
		jQuery('.colorGridCell').unbind('mouseenter', mouseEnterHandler);

		//jQuery(ev.target).effect("highlight", {}, 1000);

		jQuery(ev.target).fadeTo(FLIP_OPEN_SPEED, 0.2).fadeTo(FLIP_OPEN_SPEED, 1);
		
		SELECTED_INDEX = jQuery(this).index();
		jQuery(this).delay(50).queue(function () {
			// Check for Logo
			if(jQuery.inArray(jQuery(this).index(), logoIndexes) == -1) {
				jQuery('.colorGridCell').each(function(index) {
					changeImages(index, "referenceImage");
					flipImage(index);
				});
			}
			jQuery(this).dequeue();
		})
		
		jQuery(this).delay(SLIDESHOW_SPEED_MAX_RANDOM+100).queue(function () {
			jQuery('.colorGridCell').bind('click', mouseClickHandler);
			jQuery('.colorGridCell').bind('mouseenter', mouseEnterHandler);
			jQuery(this).dequeue();
		})
		
	};

	jQuery('.colorGridCell').bind('click', mouseClickHandler);

});