// JQuery "Slider" Portfolio Methods.

function btnCloseHandler(e) {
	var target = $(this).parent().parent();
	var openSize = target.data("p").openSize;
	var closedSize = target.data("p").closedSize;
	
	target.stop().animate({width:closedSize},750,"easeOutExpo"); // closing item

	// contract ul.slider to remove the extra space that was previously created for the opened item
	//var sliderWidth = $(".slider").width() - openSize + closedSize;
	//$(".slider").animate({width:sliderWidth},750,"easeOutExpo");
	
	target.find(".openContent").fadeOut(250,function() {
		target.find(".closedContent").fadeIn(250); // show this closed content.		
	}); // hide this open content.

	target.removeClass("open");
	target.addClass("closed");
	
	e.preventDefault();
 }

function openHandler(e) {
	// loop through "open" objects.
	$(".slider .open").each(function(){
		$(this).find(".btnClose").click();
	});
	
	var target = $(this).parent().parent();
	var openSize = target.data("p").openSize;
	var closedSize = target.data("p").closedSize;
	
	// expand ul.slider to make room for this open item
	//var newSliderWidth = $(".slider").width() + (openSize - closedSize);
	//$(".slider").width(newSliderWidth);
	
	// when a new item is opened, position it accordingly
	var ww = document.body.clientWidth; // window width
	var extraMargin = $("ul.slider").data("sliderData").extraMargin;
	
	// find available space to the left
	var leftSpace = 0;
	$.each($(target).prevAll(), function() {
		leftSpace += $(this).data("p").closedSize
		leftSpace += parseInt($(this).css('margin-right').replace('px', '')); // include margin
	});
	
	if(leftSpace) {
		if(ww < openSize) {
			$(".sliderOuter").stop().animate({scrollLeft:leftSpace},750,"easeOutExpo");
		} else if(ww <  (openSize + extraMargin)) {
			$(".sliderOuter").stop().animate({scrollLeft: (leftSpace - ( (ww - openSize) / 2) )},750,"easeOutExpo");
		} else {
			$(".sliderOuter").stop().animate({scrollLeft:leftSpace - extraMargin},750,"easeOutExpo");
		}
	} else { // this is the first slide, position the slider to the start 
		$(".sliderOuter").stop().animate({scrollLeft: 0}, 750, "easeOutExpo");
	}
					
	target.stop().animate({width:openSize},750,"easeOutExpo"); // open me.
	//target.parent().css('width', function() {
	//	return $(this).width()+(openSize-closedSize); // immediately larger.
   	//});
	target.find(".closedContent").fadeOut(250,function() {
		target.find(".openContent").fadeIn(250); // hide this closed content.		
	}); // show this open content.

	target.removeClass("closed");
	target.addClass("open");
	
	e.preventDefault(); 
}

function transitionImgs(o,offset) {
	// o = viewer.
	// hide current image.
	$(".i"+$('.pages',o).data("p").currImg,o).fadeOut();
	// go to "NEXT" image.
	$('.pages',o).data("p").currImg = $('.pages',o).data("p").currImg+offset;
	// show current image.
	$(".i"+$('.pages',o).data("p").currImg,o).fadeIn();
	// update count.
	$(".currPage",o).html($('.pages',o).data("p").currImg);
	
	if ($('.pages',o).data("p").currImg == 1) { // if now at first image, hide previous button. 
		$('.pages .prev .on',o).hide();
		$('.pages .prev .off',o).show(); 
   	} else {
		$('.pages .prev .on',o).show();
		$('.pages .prev .off',o).hide();	
	}
	
	if ($('.pages',o).data("p").currImg == $('.pages',o).data("p").maxImg) { // if now at last image, hide next button.
		$('.pages .next .on',o).hide();
		$('.pages .next .off',o).show();
	} else {
		$('.pages .next .on',o).show();
		$('.pages .next .off',o).hide();
	};
};

function prevImg(e) { 
	if ($(this).parent().parent().data("p").currImg>1) {
    	transitionImgs($(this).parent().parent().parent(),-1); // target "viewer"
	}
	e.preventDefault();
}

function nextImg(e) {
	// if not at max, increment pages.
	if ($(this).parent().parent().data("p").currImg<$(this).parent().parent().data("p").maxImg) {
		transitionImgs($(this).parent().parent().parent(),1); // target "viewer"
	}
	e.preventDefault();
}

function init(o) {
	$(".btnOpen",o).click(openHandler);
	$(".btnClose",o).click(btnCloseHandler);
    
	if (o.data("p").maxImg>1) { 
		$(".pages",o).data("p",{currImg:1,maxImg:o.data("p").maxImg});
		
		$(".pages .prev",o).click(prevImg);
		$(".pages .next",o).click(nextImg);
		
		$(".stage",o).click(function(e) {
			$(this).parent().find(".pages .next").click();
			e.preventDefault();
		});
	} else {
		$(".pages",o).hide();
	}
	
	o.width(o.data("p").closedSize);
	
	return o.data("p").closedSize;	
}

$(document).ready(function(){
	
	// setup 'post' image loading (when a panel is opened, the images will load and fade in)
	$('.slider > li').each(function(i) {
		var sliderID = $(this).attr('id');
		
		$('ul.slider > li#' + sliderID + ' > .openContent img').each(function(i) {

			$(this).asynchImageLoader({ selector:'li#' + (sliderID) + ' .btnOpen > a', 
						                event: 'click', 
						                effect: 'fadeIn', 
						                speed : 500 });
		});
		
	});
	
	// add overscroll
	$("div.sliderOuter").overscroll({cancelOn:"div.btnClose, a", direction:"horizontal", wheelDirection:"none"});

	$("ul.slider").data("sliderData",{extraMargin:75});

	// INIT EACH SLIDER ELEMENT. (div.openContent width + 80);
	var initSize = 0;
	$("#slider1").data("p",{closedSize:220,openSize:760,maxImg:1});
	initSize += init($("#slider1"));				
	$("#slider2").data("p",{closedSize:160,openSize:760,maxImg:1});
	initSize += init($("#slider2"));
	$("#slider3").data("p",{closedSize:135,openSize:760,maxImg:1});
	initSize += init($("#slider3"));
	$("#slider4").data("p",{closedSize:175,openSize:760});
	initSize += init($("#slider4"));
	$("#slider5").data("p",{closedSize:160,openSize:760,maxImg:1});
	initSize += init($("#slider5"));
	$("#slider6").data("p",{closedSize:222,openSize:720});
	initSize += init($("#slider6"));
	$("#slider7").data("p",{closedSize:160,openSize:760});
	initSize += init($("#slider7"));
	$("#slider8").data("p",{closedSize:220,openSize:760,maxImg:1});
	initSize += init($("#slider8"));
	
	$("#slider9").data("p",{closedSize:220,openSize:760,maxImg:1});
	initSize += init($("#slider9"));
	
	// set the slider width
	initSize += ($('ul.slider > li').length * 10); //include the 10px margin-right for each li
	$(".slider").css("width",initSize + 1200); // the 1200 is the cushion room to the right

});