/**
 * @author Filip Michalowski / Fi Stockholm
 */
Namespace.create("ng.modules.editorialPod");

ng.modules.editorialPod.EditorialPod = function () {

	//private variables:
	var moduleContainer;
	var moduleData;
	var mediaListHolder;
	var visibleItems = 5;
	var itemWidth = 112;
	var rotationInterval;
	var numItems;
	var currentItemIndex;
	var imageCopy;
	
	var ROTATION_DELAY = 5000;

	//private methods:
	
	var draw = function() {		
		
		// hide horizontal scrollbar
		moduleContainer.find("div.mediaListHolderWrapper").css({overflowX:"hidden", height: "72px"});
		
		// set the width of list holder
		mediaListHolder = moduleContainer.find("div.mediaListHolder");
		numItems = mediaListHolder.find("ul li").children().length;
		var listWidth = numItems * itemWidth;
		mediaListHolder.css("width", listWidth + "px");
		
		// set the horizontal position of list holder
		//if (numItems <= visibleItems) {
		//	var listHorizontalPosition = Math.max(0, Math.round((moduleContainer.find("div.mediaListHolderWrapper").width() - listWidth) * 0.5));
		//	mediaListHolder.css("left", listHorizontalPosition + "px");
		//}
				
		//set mouse events listeners for thumbs
		mediaListHolder.find("a").click(function(index){
			selectItem(mediaListHolder.find("a").index(this));
			resetRotationInterval();
			return false;
		});		
		
		// create a holder for a copy of the image (used for animation)
		imageCopy = moduleContainer.find(".expandedContainer .image").clone().removeClass("image").addClass("imagecopy");
		moduleContainer.find(".expandedContainer .image").before( imageCopy );
		
		//initialize navigation
		initNavigation();
		
		//select first item		
		selectItem(0);
		
		//start rotation
		startRotationInterval();
				
	};
	
	/**
	 * Initializes the navigation scroll bar and buttons
	 */
	var initNavigation = function() {
				
		numItems = mediaListHolder.find("ul li").children().length;		
		
		if (numItems > visibleItems) {
			
			$("#editorialPod .navigation").css({ display:"block" });
			
			var listWidth = numItems * itemWidth;		
			var left = 0;
			var maxLeft = 0;
			var minLeft = - listWidth + visibleItems * itemWidth;			
			var scrubber = moduleContainer.find("div.scrubber");
			var scrubberWidth = scrubber.width();
			var thumb = moduleContainer.find("div.thumb");
			var thumbWidth = thumb.width();
			var prevButton = moduleContainer.find("a.imageprev");
			var nextButton = moduleContainer.find("a.imagenext");
			var linkContainer = moduleContainer.find("a.linkContainer");
			
			prevButton.fadeTo(50, 0.5).css("cursor", "default").attr("title","");
		
			// set listeners for prev and next buttons
			nextButton.click(function(){				
				left -= itemWidth;
				left = Math.ceil( left / itemWidth) * itemWidth;
				if (left <= minLeft) {
					left = minLeft;					
				}				
				
				animateMediaList( left );
				return false;
			});
			
			prevButton.click(function(){
				left += itemWidth;
				left = Math.floor( left / itemWidth) * itemWidth;
				if (left >= maxLeft) {
					left = maxLeft;
				}
				
				animateMediaList( left );
				return false;
			});
			
			// add onmousedown support for IE6
			if( jQuery.browser.msie && (jQuery.browser.version <= 7) ) {
				prevButton.mousedown(function(){
					$(this).addClass("imageprevdown");
				});
				prevButton.mouseup(function(){
					$(this).removeClass("imageprevdown");
				});
				prevButton.mouseout(function(){
					$(this).removeClass("imageprevdown");
				});
			}			
			
			thumb.mouseover(function(){
				$(this).addClass("thumbOver");
				stopRotationInterval();
			});
			
			thumb.mouseout(function(){
				$(this).removeClass("thumbOver thumbDown");
				startRotationInterval();
			});
			
			thumb.mousedown(function(){
				$(this).addClass("thumbDown");
			});
			
			thumb.mouseup(function(){
				$(this).removeClass("thumbDown");
			});
			
			thumb.draggable({
				axis: "x",
				containment: "parent",
				drag: function(event,ui) {
					left = -( ui.position.left / (scrubberWidth-thumbWidth) ) * (listWidth - ( itemWidth * visibleItems ) );
					mediaListHolder.css("left", left);
					
					if (left <= minLeft) {
						nextButton.fadeTo(50, 0.5).css("cursor", "default").attr("title","");
					} else {
						nextButton.fadeTo(50, 1).css("cursor", "pointer").attr("title","Next");
					}	
					if (left >= maxLeft) {	
						prevButton.fadeTo(50, 0.5).css("cursor", "default").attr("title","");
					} else {
						prevButton.fadeTo(50, 1).css("cursor", "pointer").attr("title","Previous");
					}										
				}
			});
			
			scrubber.mousedown(function(event) {
				var posX = event.pageX - $(this).offset().left;				
				left = -( posX / (scrubberWidth) ) * (listWidth - ( itemWidth * visibleItems ) );
				left = Math.round( left / itemWidth) * itemWidth;
				if (left <= minLeft) {
					left = minLeft;
				}	
				if (left >= maxLeft) {
					left = maxLeft;	
				}
				
				animateMediaList( left );
				return false;
			});		
			
			// stop rotating items when user mouse over the image
			linkContainer.mouseover(function() {
				stopRotationInterval();
			});
			linkContainer.mouseout(function() {
				startRotationInterval();
			});
						
		}
	};
	
	/**
	 * 
	 * @param {Object} position
	 */
	var animateMediaList = function( position ) {
		var listWidth = numItems * itemWidth;		
		var maxLeft = 0;
		var minLeft = - listWidth + visibleItems * itemWidth;	
		var scrubber = moduleContainer.find("div.scrubber");
		var scrubberWidth = scrubber.width();
		var thumb = moduleContainer.find("div.thumb");
		var thumbWidth = thumb.width();
		var thumbLeft = (-position/(itemWidth * (numItems-visibleItems))) * (scrubberWidth-thumbWidth);
		var prevButton = moduleContainer.find("a.imageprev");
		var nextButton = moduleContainer.find("a.imagenext");
			
		mediaListHolder.animate({left: position + "px"}, 250, "swing");
		thumb.animate({left: thumbLeft + "px"}, 250, "swing", onAnimateThumbComplete);
		
		if (position === minLeft) {
			nextButton.fadeTo(50, 0.5).css("cursor", "default").attr("title","");
		} else {
			nextButton.fadeTo(50, 1).css("cursor", "pointer").attr("title","Next");
		}
		
		if (position === maxLeft) {
			prevButton.fadeTo(50, 0.5).css("cursor", "default").attr("title","");
		} else {
			prevButton.fadeTo(50, 1).css("cursor", "pointer").attr("title","Previous");	
		}
				
		stopRotationInterval();
	};
	
	var onAnimateThumbComplete = function() {
		startRotationInterval();
	};
	
	/**
	 * 
	 * @param {Object} index
	 */
	var selectItem = function(index) {
		
		currentItemIndex = index;
		
		moduleContainer.find("a.selected").removeClass("selected");
		moduleContainer.find("ul").children().eq(index).find("a").addClass("selected");
		
		var itemData = moduleData.images[index];
		
		imageCopy.attr("src", moduleContainer.find(".expandedContainer .image").attr("src"));
		imageCopy.show();
		
		moduleContainer.find(".expandedContainer .image").attr({src: itemData.imgurl, alt: itemData.title});
		moduleContainer.find(".expandedContainer .title").html(itemData.title);
		moduleContainer.find(".expandedContainer .description").html(itemData.description);
		moduleContainer.find(".expandedContainer a.linkContainer").text(itemData.action_text).attr("title", itemData.action_text).attr("href", itemData.link);
		moduleContainer.find(".expandedContainer .linkInline a").text(itemData.action_text).attr("title", itemData.action_text).attr("href", itemData.link);
		moduleContainer.find(".expandedContainer .tag").html(itemData.tag).css("className","tag " + itemData.tag);
		
		moduleContainer.find(".expandedContainer").children().not(".overlay, .linkContainer, .imagecopy").hide().fadeIn(300, onItemFadedIn);	
				
	};
	
	/**
	 * 
	 */
	var onItemFadedIn = function() {
		imageCopy.hide();
	};
	
	/**
	 * 
	 */
	var startRotationInterval = function() {
		if (rotationInterval === undefined) {
			rotationInterval = setInterval(function(){
				onRotationInterval();
			}, ROTATION_DELAY);
		}		
	};
	
	/**
	 * 
	 */
	var stopRotationInterval = function() {
		clearInterval( rotationInterval );
		rotationInterval = undefined;		
	};
	
	/**
	 * 
	 */
	var resetRotationInterval = function() {
		stopRotationInterval();
		startRotationInterval();
	};
	
	/**
	 * 
	 */
	var onRotationInterval = function() {
		var nextItemIndex = currentItemIndex + 1;
		
		if ( nextItemIndex === numItems ) {
			nextItemIndex = 0;
		}
		
		selectItem( nextItemIndex );
		
		var mediaListPos = mediaListHolder.css("left").substring( 0, mediaListHolder.css("left").length-2 );
		var nextItemPos = nextItemIndex * itemWidth;
				
		if ( nextItemPos + itemWidth >= -mediaListPos + visibleItems*itemWidth ) {
			if (nextItemIndex != numItems - 1) {
				animateMediaList(-(nextItemIndex - visibleItems + 2) * itemWidth);
			}
			else {
				//animateMediaList(-(numItems - visibleItems) * itemWidth);
			}
		} else if ( nextItemPos < -mediaListPos ) {
			animateMediaList(-(nextItemIndex) * itemWidth);			
		} else if ( nextItemIndex === 0 && numItems > visibleItems ) {
			animateMediaList(0);	
		}
		
	};

	//the returned object here will become ng.modules.editorialPod.EditorialPod:
	return  {
		
		// public
		
		init: function (container, data) {
			moduleContainer = container;
			moduleData = data;
			
			draw();
		}

	};
}(); // the parens here cause the anonymous function to execute and return


/**
 * Markup templates for the editorialPod
 */
ng.modules.editorialPod.EditorialPodTemplates = 
{
		
};