/**
 * cardDecks plugin
 * 
 * @requires Jquery
 * @example
 * 
 * var iterator = '#cardDecks #column-0 .products .item'; // 2 items to be iterated over
 * var triggers = ['#cardDecks #column-0 .list-title2 a']; // triggers to call cards slide animation
 * new $.cardDecks.init(titlesForCardDeckJS, iterator, triggers);
 *
 */

;(function($) {

	$.cardDecks = {}; 
	$.extend( $.cardDecks, {

		inAnimation:false,
		animationSpeed:600,
		animationEasing:'easeInOutQuad',
		xOffset:5,
		yOffset:28,
		z:0,
		
		init:function( itemsSelector, triggerElements ) {
			
			$.cardDecks.inAnimation = true; //flag for testing if we are in a animation
			
			$.cardDecks.z = 0; //for setting the initial z-index's
			var carddecksOrder = null;
			if( window.cookie != undefined ) {
				if (cookie.get('carddecksOrder')) {
					carddecksOrder = $.evalJSON(cookie.get('carddecksOrder'));
				}
			}
			
			var zindex, top, left;
			var currentSize = $(itemsSelector).size();
			$(itemsSelector).each(function(i) { //set the initial z-index's
				
				$.cardDecks.z++; //at the end we have the highest z-index value stored in the z variable

				zindex = $.cardDecks.z;
				top = ($.cardDecks.yOffset * i) + 'px';
				left = ($.cardDecks.xOffset * i) + 'px';
				
				if( carddecksOrder ) {
					for ( var k = 0; k < carddecksOrder.length; k++) {
						if ( carddecksOrder[k]['title'] == $(this).attr('title') ) {
							zindex = carddecksOrder[k]['zindex'];
							top = carddecksOrder[k]['top'];
							left = carddecksOrder[k]['left'];
						}
					}
				}
			
				$(this).css('z-index', zindex);
				$(this).attr('id', 'item-' + i);
				
				// snap into position and display
				$(this).css({ 'top' : top , 'left': left});
				$(this).css('display', 'block');
				
			});
			
			$.cardDecks.setHeaderState(itemsSelector);
			$.cardDecks.inAnimation = false;
			
			for ( var i = 0; i < triggerElements.length; i++) {
				
				var data = {itemsSelector:itemsSelector, triggerElements:triggerElements};
				$(triggerElements[i]).data('cardDecks', data);
				
				$(triggerElements[i]).bind('click', function() {
					$.cardDecks.swap( $(this) ); //swap first image to last position
					return false;
				});
				
			}
			
		},
		
		setHeaderState:function(itemsSelector) {
			
			var show;
			var size = $(itemsSelector).size();
			$(itemsSelector).each(function(i) {
				if(Number($(this).css('z-index')) == size) {
					show = false;
				} else {
					show = true;
				}
				if (show) {
					$(this).find('div.list-title2 a.headerAnchor').removeClass('active').addClass('notActive');
				} else {
					$(this).find('div.list-title2 a.headerAnchor').removeClass('notActive').addClass('active');
				}
				$(this).find('div.list-title2 a.gl_pageArrowLink').css('display', show ? 'block' : 'none');
				
			});	
			
		},
		
		setState: function() {
			// set a cookie for the order of the components
			if (window.cookie != undefined) {
				var sortIds = [];
				$('#cardDecks .item').each(function(){
					var obj = {	'title' : $(this).attr('title'),
								'zindex': $(this).css('z-index'), 
								'top'   : $(this).css('top'), 
								'left'  : $(this).css('left')};
					sortIds.push(obj);
				});
				cookie.set('carddecksOrder', $.toJSON(sortIds));
				
			}
		},
		
		swap:function(item) {
		
			var cardDecksData = item.data('cardDecks');
			var currentItemToBeSwapped = item.parents('.item:first');
			var zIndex = currentItemToBeSwapped.css('z-index');
			var zDepth = $(cardDecksData.itemsSelector).size();
			
			// ignore click as it is already on top
			if(zIndex == zDepth) {return;}
			
			if ($.cardDecks.inAnimation) { return };
			$.cardDecks.inAnimation = true;
			
			var zId = currentItemToBeSwapped.attr('id');
			
			// animate the first element to the top
			var newY = currentItemToBeSwapped.height() + (zDepth-1) * $.cardDecks.yOffset;
			var newX = (zDepth-1) * $.cardDecks.xOffset;
			
			currentItemToBeSwapped.animate({ 'top' :  newY + 'px', 'left': newX + 'px' }, 
												$.cardDecks.animationSpeed, 
												$.cardDecks.animationEasing, 
												function() {
													
													$(this).css('z-index', 1000);
													// animate the other cards
													$(cardDecksData.itemsSelector).each(function(i){
														if ($(this).attr('id') == zId) {
															
															currentItemToBeSwapped.animate({ 'top' : (zDepth-1) * $.cardDecks.yOffset + 'px' }, 
																	$.cardDecks.animationSpeed, 
																	$.cardDecks.animationEasing, 
																		function(){
																			$(this).css('z-index', zDepth);
																			$.cardDecks.setHeaderState(cardDecksData.itemsSelector);																			
																			$.cardDecks.inAnimation = false;
																			setTimeout(function(){
																				$.cardDecks.setState();
																			},100);
																			
																		});
														} else if($(this).css('z-index') > zIndex) {
															
															var newIndex = parseInt($(this).css('z-index')) - 1;
															
															$(this).css('z-index', newIndex);
															$(this).animate({ 'top' : (newIndex-1) * $.cardDecks.yOffset + 'px', 'left' : (newIndex-1) * $.cardDecks.xOffset + 'px' }, 
																	$.cardDecks.animationSpeed, 
																	$.cardDecks.animationEasing);
														}
													});
												});
			
		}
		
	});

})( jQuery );