// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
$jq.easing.easeOutQuart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

dojo.addOnLoad(function(){
	if(dojo.byId("slideImages")){
		var elCount = dojo.query("#slideImages li img").length;
		var elWidth = elCount * 310;
		dojo.query("#slideImages ul").style("width", elWidth+"px");
		dojo.query('#slideImages li').forEach(function(el, i){
			var v = i + 1;
			dojo.connect(el, "onmouseover", function(){
				dojo.query('#hidden-boxes .n'+v).style("display", "block");
			});
			dojo.connect(el, "onmouseout", function(){
				dojo.query('#hidden-boxes .n'+v).style("display", "none");
			});
		});
		dojo.query("#hidden-boxes .hidden-box").forEach(function(el, i){
			var element = el;
			dojo.connect(el, "onmouseover", function(){
				element.style.display = "block";
			});
			dojo.connect(el, "onmouseout", function(){
				element.style.display = "none";
			});
		});
		if(elCount > 3){
			$jq(function( $ ){
				$('#slideImages').serialScroll({
					items:'li',
					prev:'#leftArrow', 
					next:'#rightArrow',
					offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
					start:0, //as we are centering it, start at the 2nd
					duration:450,
					force:true,
					stop:true,
					lock:true,
					cycle:false, //don't pull back once you reach the end
					easing:'easeOutQuart', //use this easing equation for a funny effect
					jump: false, //click on the images to scroll to them
					onAfter:function( elem ) {
						if(elem.id == 'firstElement'){
							$("#leftArrow").addClass('inactive');
							$("#rightArrow").removeClass('inactive');
						}else if(elem.id == 'lastElement' || elem.id == 'preLastElement' || elem.id == 'preElement'){
							$("#rightArrow").addClass('inactive');
							$("#leftArrow").removeClass('inactive');
						}else{
							$("#leftArrow").removeClass('inactive');
							$("#rightArrow").removeClass('inactive');
						}
					}
				});
			});
		}
	}
});

