/* Scrolling Thumbs */

Scroller = function(){ 
    this.init();
}

Scroller.prototype = { 
  
	thumbWidth : 182,
	onscreen : 4,
	currPosition : 0,
	speed : 650,
	thumbCount : 0,
	scrollableWidth : 0,
	xPositions : new Array(),
	over : false,
  
	init: function() {
		var t = this
		 		
				
		
				
		// set some variables
		//if($('.section_thumb').length>0)
		  //t.thumbWidth = $('.section_thumb').css('width')
        t.thumbCount = $(".section_thumb").size()
		
		t.scrollableWidth = t.thumbCount * t.thumbWidth
		
		// get x positions of all the thumbs
		for(i=0;i<=(t.thumbCount-t.onscreen);i++) {
			t.xPositions[i] = (i * - t.thumbWidth) + "px";
		}
		
		// set width of visable area
		var width = t.thumbWidth * t.onscreen - 20
		$("#scrollingThumbs").css({width: width+'px'})
		
		// set scroller to the width of onscreen variable 
		$("#scroller").css({width:t.scrollableWidth  + "px"});


		// a bit of behaviour - buttons first
	    $("#scroll_left").mouseover(function() {
			t.over = true
			t.rightScroll()
	    });
	    $("#scroll_left").mouseout(function() {
			t.over = false
	    });

		
		$("#scroll_right").mouseover(function() {
			t.over = true
			t.leftScroll()
		});
		$("#scroll_right").mouseout(function() {
			t.over = false
		});
		
		// then thumbs
		$('.section_thumb a').each(function(){
		  $(this).click(function(){    
		    t.set_css($(this).attr('id'))
		    t.fetch($(this).attr('href'))
		    return false
		  })
		})
	},
	
	
	
	// right button pressed
	leftScroll: function() 
	{
		var t = this	

		if(t.currPosition < t.xPositions.length-1) 
		{
			t.currPosition ++;			
			//  do we show the left button
			if((t.thumbCount - t.currPosition + t.onscreen) > 0 )
			{
			    $("#scroll_left").animate(
				{
				opacity: 0.6
				}, 150, 'easeInSine')
			}

			// do we hide the right button?
			if(t.currPosition == t.xPositions.length -1)
			{
			    $("#scroll_right").animate(
				{
				opacity: 0
				}, 150, 'easeOutSine');
			}				
							
			$("#scroller").animate({
			    left: t.xPositions[t.currPosition]
			    }, t.speed,  'easeInOutQuint', function(){
					
				if(t.over)
			    	{
				    // wait, then roll again	
				    $("#scroller").animate(
				    { 
				        opacity: 1
				    }, 150, function(){ t.leftScroll() });
				}
			    }				
			);
		}
	},
	
	
	// left button pressed
	rightScroll: function() 
	{
		var t = this

		if(t.currPosition > 0) 
		{
			t.currPosition --
		
					// do we show the right button
				    if(t.currPosition > 0 )
						$("#scroll_right").animate({
							opacity: 0.6}, 150, 'easeInSine')	 
					// do we hide the left button?
					if(t.currPosition == 0)
						$("#scroll_left").animate({
							opacity: 0}, 150, 'easeOutSine')
		
		
			$("#scroller").animate({
				left: t.xPositions[t.currPosition]
				},	t.speed, 'easeInOutQuint', function(){
				
					
					if(t.over)
						// wait, then roll again
						$("#scroller").animate({ 
							opacity: 1
						}, 150, function(){ t.rightScroll() });
						
				}
			);
		}

	},  // end right scroll 

	// sets the CSS
	set_css: function(id)
	{ 
	    // adjust the selected state
	    $('.section_thumb').removeClass('section_selected')
	    $('#'+id).parent().addClass('section_selected')

	},
	// populates the player via AJAX by requesting a project section which is returned as rendered HTML
	fetch: function(url)
	{ 
		var t = this;
		
		$('#ajax_container').animate({ 
					opacity: 0
				}, 100 );
		$.ajax({
			type: 'GET',
			url: url,
			success: function(response){
			
				$('#ajax_container').html(response)				
				$('#ajax_container').animate({ 
					opacity: 1
				}, 300 );
			}
		})
		
		
	}


};

$(document).ready(function() {

  var scrollObject = new Scroller()

}); // end