//This code uses JQuery and builds from the Code slider effect defined by JQuery for Designers
var animationSpeed="fast";
//Action to run runActions when the DOM is loaded
function runActions() {
	$frame = $('#slider .scroll');
	//$frame.css('overflow', 'hidden')
	//createPage();
	//console.log("runActions");
	animCentre ("#" + $('.scrollContainer :first').attr("id"));
	// makes clicks of the thumbnail add a marker for which nav is selected
	$('.thumbnails').find('a').click(selectNav);
	//checks if the is a fragment identifier, and if ther is, runs the "trigger" function on it
	checkforHash();
	createCodaEffect();
}
function createPage() {
$.getJSON("http://www.porganized.com/projects/EllieSite/scripts/custom/elliesite.data.js",
        function(data){
          $.each(data.paintings, function(i,item){
            $(".scrollContainer")
			.append('<div class="panel" id="'+ item.name +'"><img src="'+ item.URL +'" alt="'+ item.description +'" /></div>');
			$(".thumbnails")
			.append('<a href="#'+ item.name +'"><img src="'+ item.thumbnail +'" alt="'+ item.description +'" /></a>');
          });
        });
			
	//'<div class="panel" id="'+ item.name +'"><img src="'+ item.URL +'" alt="'+ item.description +'" /></div>'
	//'<a href="#'+ item.name +'"><img src="'+ item.thumbnail +'" alt="'+ item.description +'" /></a>'
}

//Add scroll buttons
function addscrollArrows() {
	//$frame
	  //.before('<div class="scrollArrows top"><img src="http://www.porganized.com/Projects/EllieSite/images/navigation/uparrow.png" /></div>')
	  //.after('<div class="scrollArrows bottom"><img src="http://www.porganized.com/Projects/EllieSite/images/navigation/downarrow.png" /></div>')
	  
	 //Below is the code insert the Start / Stop controls
	/*$(".thumbnails")
	.before('<div class="scrollArrows start">Start</div>')
	.after('<div class="scrollArrows stop">Stop</div>');*/
		 //Below are the controls that add the opacity change with hovering 
	/*$('.scrollArrows').css("opacity", 0.1);
	$('.scroll, .scrollArrows')	
		.hover(function(){	$('.scrollArrows').stop().fadeTo("slow", 1)},
			function(){$('.scrollArrows').stop().fadeTo("slow", 0.1)})
	*/	
	$(".left").click(function(){
		$frame.trigger( 'start' );
		})	
		$(".right").click(function(){
		$frame.trigger( 'stop' );
		})	
}
// erase "selected" class for all A tags and adds it to the new one that was selected
function selectNav() {
  $(this)
    .parents('div')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
	.html($(this).html())
    .addClass('selected');
	
	animCentre (this.hash);
}
//function for arriving at the relevant thumbnail link
function trigger(data) {
  // find the A element  whose href ends with ID ($= is ends with)
  var el = $('.thumbnails').find('a[href$="' + data.id + '"]').get(0);
	// calls the select nav function from the instance defined above
  selectNav.call(el);
}
function checkforHash() {
	if (window.location.hash) {
	  trigger({ id : window.location.hash.substr(1)});
	} else {
	  $('#slider .thumbnails a:first').click();
	}
}
function createCodaEffect(){
	var $panels = $('#slider .scrollContainer > div');
	var $container = $('#slider .scrollContainer');

	// offset is used to move to *exactly* the right place, since I'm using padding on my example, I need to subtract the amount of padding to the offset.  Try removing this to get a good idea of the effect
	var offset = parseInt((false ? 
	  $container.css('paddingTop') : 
	  $container.css('paddingLeft')) 
	  || 0) * -1;


	var scrollOptions = {
	  target: $frame, // the element that has the overflow can be a selector which will be relative to the target
	  items: $panels,
	  navigation: '.thumbnails a',
	  prev: 'div.top', 
	  next: 'div.bottom',
	  axis: 'y',
	  onBefore: resizePainting,
	  onAfter: trigger, // our final callback
	  offset: offset,
	  duration: "slow",
	  interval: 4000,
	  stop:false
	};

	// apply serialScroll
	$('#slider').serialScroll(scrollOptions);
	// apply localScroll
	$.localScroll(scrollOptions);
	// move the slider in to hash position
	$.localScroll.hash(scrollOptions);
	$frame.trigger( 'stop' );
}
function resizePainting(data) {
 if (this.hash) {
 	//console.log("resizePainting, " + this.hash);
	animCentre(this.hash);
	}
}
function trigger2(data) {
	//console.log("trigger2");
	animCentre("#" + data.id);
}

function animCentre (image) {
	/*
		Resize the frame to the size of the image provided and scroll the image.
	*/
	var imgObj = $(image+ " img");
	var containerHeight = $(".container").height();
	var scrollDist = Math.floor((containerHeight-imgObj.height())/2);
	
	//console.log("animCentre");
	$frame.animate({height: imgObj.height(), width: imgObj.width()},
					{ queue: false, duration: animationSpeed });
	
	//console.log("ItemHeight: "+imgObj.height() + "  scrollDist: "+scrollDist+ "  containerHeight: "+containerHeight);
	$("#slider")
			.animate(
				{top: scrollDist},
				{ queue: false, duration: animationSpeed }
				);
				
}