/**
 * Scrolling product display
 * @author TJ Eastmond <tj.eastmond@gmail.com>
 * @copyright Red Design Group
 */

var RedScroll = function(content) {

	if (!content) throw('You must set the RedScroll content!');

	var assets = content;

	var options = {
		'viewerWidth' : 520,
		'viewerHeight' : 277,
		'numberOfSets' : 0,
		'containerDiv' : 'div#scroll_container',
		'panesDiv' : 'div#panes',
		'left' : 'div#left',
		'right' : 'div#right',
		'title' : '.paneList h3',
		'details' : 'div#scroll_details',
		'thumbs' : 'div#scroll_thumbs',
		'detailsNav' : 'a#show_details',
		'thumbsNav' : 'a#show_images',
		'detailsHeight' : 116,
		'thumbsList' : 'div.scroll_thumbs_list',
		'detailsList' : 'ul.scroll_details_list',
		'shelf' : 'div#shelf',
		'shelfClose' : 'span.shelf_close',
		'shelfTitle' : 'span.shelf_title',
		'paneMoveDuration' : 800,
		'shelfMoveDuration' : 500
	};
	
	if (arguments[1]) $.extend(options, arguments[1] || {});
	
	var currentSet = 0;
	var shelfOpened = 0;
	animationReady = true;
	
	function readyAnimation() {
		animationReady = true;
	}	
	
	function movePane(to) {
		$(options.panesDiv).animate({ "left" : to }, { queue : false, duration : options.paneMoveDuration, easing : "expoEaseInOut", complete : readyAnimation});
	}
	
	function move(direction) {
		animationReady = false;
		setLeaving = currentSet;
		closeShelf();
		if (direction == 'left') {
			decreaseSet();
			movePane('+=' + options.viewerWidth);
		} else {
			increaseSet();
			movePane('-=' + options.viewerWidth);
		}
		displayArrows();
		timer = setTimeout(function() {
			clearTimeout(timer);
			hide(setLeaving);
			ready(currentSet);
			resetStartImage(setLeaving);
		}, options.paneMoveDuration);
		
	}

	function moveLeft() { if(animationReady) {move('left'); } }
	function moveRight() { if(animationReady) {move('right');} }
	
	function moveShelf(element, direction) {
		$(element).animate(
			{ top : direction + options.detailsHeight },
			{ queue : false, duration : options.shelfMoveDuration, easing : 'expoEaseInOut' }
		);
	}
	
	function openShelf() { if (!shelfOpened) moveShelf(options.shelf, '-='); shelfOpened = 1; }
	function closeShelf(func) { if (shelfOpened) moveShelf(options.shelf, '+=', func); shelfOpened = 0; return this; }

	function displayArrows() {
		if (currentSet != 1) {
			$(options.left).show();
		} else {
			$(options.left).hide();
		}
		
		if (currentSet < options.numberOfSets) {
			$(options.right).show();
		} else {
			$(options.right).hide();
		}
	}
	
	function hideArrows() { $(options.left).hide(); $(options.right).hide(); }
	
	function hideTitle() { $(options.title).hide(); }
	
	function displayTitle() { $(options.title).show(); }
	
	function increaseSet() {
		img = currentSet + 1;
		currentSet = (img > options.numberOfSets)? options.numberOfSets : img;
	}
	
	function decreaseSet() {
		img = currentSet - 1;
		currentSet = (img < 1)? 1 : img;
	}
	
	function showDetails() {
		showShelf('details');
		openShelf();
	}
	
	function showThumbs() {
		showShelf('thumbs');
		openShelf();
	}
	
	function displayDetail() {
		
		show =  - 1;
		cur = detailsDisplayed - 1;
		$(details[cur]).hide();
		$(details[show]).show();
		detailsDisplayed = currentSet;
	}
	
	function showShelf(show) {
		if (show == 'details') {
			$(options.thumbs).hide();
			$(options.details).show();
			$(options.shelfTitle).html('More Details');
		} else {
			$(options.details).hide();
			$(options.thumbs).show();
			$(options.shelfTitle).html('Additional Images');
		}
	}
	
	function attachEvents() {
		//$(options.containerDiv).mouseover(function() { displayArrows(); });
		//$(options.containerDiv).mouseout(function() { hideArrows(); });
		$(options.left).click(function() { moveLeft(); });
		$(options.right).click(function() { moveRight(); });
		$(options.detailsNav).click(function() { showDetails(); return false; });
		$(options.thumbsNav).click(function() { showThumbs(); return false; });
		$(options.shelfClose).click(function() { closeShelf(); });
	}
	
	function attachThumbEvents() {
		thumbs = $(options.thumbsList).find('li');
		thumbs.each(function(i, element) {
			$(element).click(function() {
				var names = getAltDetails(this.id);
				//closeShelf();
				swapImage(names.img);
				$($(this).parent().children()).removeClass("active");
				//alert($(this).parent().children()[0]);
				$(this).toggleClass("active");
			});
		});
	}
	
	function swapImage(img) {
		$('img#set_image_' + currentSet).attr('src', img);
	}
	
	function getAltDetails(alt) {
		parts = alt.split("_");
		set = 'set_' + parts[1];
		img = assets[set].alts[parts[2]][0];
		
		return {
			set : set,
			alt : parts[2],
			img : img,
			setImage : 'set_image_' + parts[1]
		};
	}
	
	function resetStartImage() {
		set = arguments[0] || currentSet;
			$('#alts_' + set + " li").each(function() {
				$(this).removeClass("active");
			});
		$('#alts_' + set + " li:first-child ").addClass("active");
		$('img#set_image_' + set).attr('src', assets['set_' + set].start_image);
	}
	
	function buildApp() {
		var setIdNumber = 0;
		$(".paneList").empty();
		$(".scroll_details_list").empty();
		$(".scroll_thumbs_list").empty();
		
		$.each(assets, function(i,item){
			var setId = i;
			setIdNumber = setId.split("_");
			setIdNumber = setIdNumber[1];
			var title = assets[i].title;
			var details = assets[i].details;
			var start_image = assets[i].start_image;
			
			// Build Main Panel Set
			var li = $(document.createElement('li'));
			li.attr("id", setId);
			
			var bannerImg = $(document.createElement('img'));
			bannerImg.attr("id", "set_image_" + setIdNumber);
			bannerImg.attr("alt", title);
			bannerImg.attr("src", start_image);
			
			var setTitle = $(document.createElement('h3'));
			var setTitleSpan = $(document.createElement('span'));
			setTitleSpan.html(title);
			setTitleSpan.appendTo(setTitle);
			
			bannerImg.appendTo(li);
			setTitle.appendTo(li);
			li.appendTo(".paneList");
        
			// Build Detail Panel List
			var detailLI = $(document.createElement('li'));
			detailLI.attr("id", "details_" + setIdNumber);
			detailLI.attr("style", "display: none;");
			detailLI.html(details);
			
			detailLI.appendTo(".scroll_details_list");
			
			// Build Thumbs List
			var thumbs = $(document.createElement('ul'));
			thumbs.attr("id", "alts_" + setIdNumber);
			thumbs.attr("style", "display: none;");
			
			// Thumb One
			var image_one_thumb = assets[i].alts[1][1];
			var image_one_detail = assets[i].alts[1][0];
			
			var thumbsLI = $(document.createElement('li'));
			thumbsLI.attr("id", "alts_" + setIdNumber + "_1");
			thumbsLI.addClass("active");
			var thumbIMG = $(document.createElement('img'));
			thumbIMG.attr("src", image_one_thumb);
			thumbIMG.attr("alt", setTitle);
			thumbIMG.appendTo(thumbsLI);
			thumbsLI.appendTo(thumbs);
			
			// Thumb Two
			if (assets[i].alts[2]) { 
				var image_two_thumb = assets[i].alts[2][1];
				var image_two_detail = assets[i].alts[2][0];
				var thumbsLI = $(document.createElement('li'));
				thumbsLI.attr("id", "alts_" + setIdNumber + "_2");
				var thumbIMG = $(document.createElement('img'));
				thumbIMG.attr("src", image_two_thumb);
				thumbIMG.attr("alt", setTitle);
				thumbIMG.appendTo(thumbsLI);
				thumbsLI.appendTo(thumbs);
			}
			
			// Thumb Three
			if (assets[i].alts[3]) { 
				var image_three_thumb = assets[i].alts[3][1];
				var image_three_detail = assets[i].alts[3][0];
				var thumbsLI = $(document.createElement('li'));
				thumbsLI.attr("id", "alts_" + setIdNumber + "_3");
				var thumbIMG = $(document.createElement('img'));
				thumbIMG.attr("src", image_three_thumb);
				thumbIMG.attr("alt", setTitle);
				thumbIMG.appendTo(thumbsLI);
				thumbsLI.appendTo(thumbs);
			}
			
			// Thumb Four
			if (assets[i].alts[4]) { 
				var image_four_thumb = assets[i].alts[4][1];
				var image_four_detail = assets[i].alts[4][0];
				var thumbsLI = $(document.createElement('li'));
				thumbsLI.attr("id", "alts_" + setIdNumber + "_4");
				var thumbIMG = $(document.createElement('img'));
				thumbIMG.attr("src", image_four_thumb);
				thumbIMG.attr("alt", setTitle);
				thumbIMG.appendTo(thumbsLI);
				thumbsLI.appendTo(thumbs);
			}
			thumbs.appendTo(".scroll_thumbs_list");
			
		});
		
		options.numberOfSets = setIdNumber;
		
		currentSet = 1;
		ready(currentSet);
		attachEvents();
		attachThumbEvents();
		readyJump();
		displayArrows();
	}
	
	function readyJump() {
		$("#treatmentSelect").change(
				function() {
					closeShelf();
					tmpCurrentSet = "set_" + currentSet;
					tmpDestination = $(this).val();
					
					destIdNumber = tmpDestination.split("_");
					destIdNumber = parseInt(destIdNumber[1]);
					tmpCurrentSetNumber = parseInt(currentSet);
					parseInt(destIdNumber);
					
					
					setLeaving = currentSet;
					
					if(animationReady) {
						$("alts_" + tmpCurrentSetNumber).hide();
						
						if (tmpCurrentSetNumber > destIdNumber) {
							var pixelsToMove = (tmpCurrentSetNumber - destIdNumber) * options.viewerWidth;
							decreaseSet();
							movePane('+=' + pixelsToMove);
						} else if (destIdNumber > tmpCurrentSetNumber) {
							var pixelsToMove = (destIdNumber - tmpCurrentSetNumber) * options.viewerWidth;
							increaseSet();
							movePane('-=' + pixelsToMove);
						}	
						currentSet = destIdNumber;
						displayArrows();
						hide(setLeaving);
						ready(currentSet);
						resetStartImage(setLeaving);
					}
				});
	}
	
	function readyDetails() { $('li#details_' + arguments[0] || currentSet).show(); }
	function readyThumbs() { $('ul#alts_' + arguments[0] || currentSet).show(); }
	function hideDetails() {	$('li#details_' + arguments[0] || currentSet).hide(); }
	function hideThumbs() { $('ul#alts_' + arguments[0] || currentSet).hide(); }
	function ready() {readyDetails(arguments[0]); readyThumbs(arguments[0]); }
	function hide() { hideDetails(arguments[0]); hideThumbs(arguments[0]); }
	
	this.init = function() {
		// build the markup
		buildApp();
	};
	return this;
};