jQuery(function($){

	$(window).bind("load", function() { 
 
 /*-----------------------------------------------------------------------------------*/
/*	=Storing some variables, because we use them more often
/*-----------------------------------------------------------------------------------*/

 	var $scrollPane = $( '#scroller' );
	var $scroller   = $( "#scroller div.scroll_container" );
	var $slider     = $( "#slider" );
	var $items		= $( '#scroller div.item' ).length;	// store the number of items in scroller
	var $thumbs 	= $( '#scroller_thumbnails' );

/*-----------------------------------------------------------------------------------*/
/*	=Setup the Scroller on index page
/*-----------------------------------------------------------------------------------*/

	if ( $scrollPane.size() > 0 ){		
	
		$scroller.css({ opacity : 0, visibility: 'visible', marginLeft: 0 });
			
			var $new_width = 0;
			
			$('#scroller div.item').each(function(){ 
												  
				var $_img = $(this).find('.item-overflow img');
												  
				$(this).find('.item-caption').css({ opacity : 0 });
				
				$(this).width( $_img.width() );
				
				$new_width = $new_width + $(this).outerWidth(true); // get the new container width
				
			}).hover( // add the hover effect to the images to show the magnifier and do the animation
				
				function(){					
					$(this).find('img').stop().animate({ opacity : 0.5 });
					$(this).find('img').stop().animate({ opacity : 1, top : -10 });
					$(this).find('.item-caption').stop().animate({ opacity : 0.9 });
				},
				
				function(){ 
					$(this).find('img').stop().animate({ opacity : 1 });
					
					if( !$(this).hasClass( 'ui-tabs-hide' ) ){
						$(this).find('img').stop().animate({ opacity : 1, top: 0 });
					}else{
						$(this).find('img').stop().animate({ opacity : 0.45, top: 0 });
					}
					
					$(this).find('.item-caption').stop().animate({ opacity : 0 });
				}
			);
			
			
			/// THUMBS
			
			var $new_width_thumbs = 0;
			
			$('#scroller_thumbnails ul li').each(function(){ 
												  
				var $_imgThumbs = $(this).find('img');
				
				$(this).width( $_imgThumbs.width() );
				
				$new_width_thumbs = $new_width_thumbs + $(this).outerWidth(true); // get the new container width
				
				
			})
			//console.log($new_width_thumbs)
			
			$thumbs.width( $new_width_thumbs );
			
			/// END
			
			
			// Set the new width of the scroller
			$scroller.width( $new_width );
			
			$scroller.parent().animate({ height: $('#scroller div.item').outerHeight(true) }, 500, function(){

				$scrollPane.css({ backgroundImage : 'none' });
			
				$scroller.animate({ opacity: 1 }, 750, function(){ // just a bit animation for look and feel 
				});
			})	
			
			var $initValue 	= $( "#scroller div.item" ).size() / 2 ;
			//var $firstElem  = $( "#scroller div.item" ).eq( $initValue ); // get the middle element
			var $firstElem  = $( "#scroller div.item" ).eq( $initValue );
			
			$i = $initValue;
			
			$margin = 0;
			
			while($i >= 0){
				var $cur_item = $( '#scroller div.item' ).eq($i);
				$margin =  $margin + $cur_item.outerWidth(true);
				$i--;
			}			
			//console.log($margin)
			$scroller.css({ marginLeft: -$margin  + $('#scroller').width() / 2 + $( '#scroller div.item' ).eq( $initValue ).outerWidth( true ) / 2 });
			
			
	}


/*-----------------------------------------------------------------------------------*/
/*	=Setup the Thumbnails as Tabs 
/*-----------------------------------------------------------------------------------*/

	var $tabs = $scroller.tabs({
							   
		select: function( event, ui ) {			
			
			$slider.slider( "value", ui.index );
			
			$i = ui.index;
			
			$margin = 0;
			
			while($i >= 0){
				var $cur_item = $( '#scroller div.item' ).eq($i);
				$margin =  $margin + $cur_item.outerWidth(true);
				$i--;
			}
							
			$scroller.stop().animate({ 
				marginLeft: -$margin  + $('#scroller').width() / 2 + $( '#scroller div.item' ).eq( ui.index ).outerWidth( true ) / 2 
				}, {
					duration: 1000,
					specialEasing: { 
						marginLeft: "easeInOutCirc" 
					},
					complete: function() {
						$('div.item:not(.ui-tabs-hide)',$scroller).find('img').animate({ opacity: 1 });
						$('div.ui-tabs-hide',$scroller).find('img').animate({ opacity: 0.45 });
					}
				}
			);
			
			// THUMBS
			
			$i = ui.index;
			
			var $initValueThumbs 	= $( "#scroller_thumbnails ul li" ).size() / 2 ;
			//var $firstElem  = $( "#scroller div.item" ).eq( $initValue ); // get the middle element
			var $firstElemThumbs  = $( "#scroller_thumbnails ul li" ).eq( $initValueThumbs );
			
			//$iThumbs = $initValueThumbs;
			
			$marginThumbs = 0;
			
			while($i >= 0){
				var $cur_itemThumbs = $( '#thumbs ul li' ).eq($i);
				$marginThumbs =  $marginThumbs + $cur_itemThumbs.outerWidth(true);
				$i--;
			}
			
			$j=$initValueThumbs;
			$marginThumbsinit = 0;
			
			while($j >= 0){
				var $cur_itemThumbsi = $( '#thumbs ul li' ).eq($j);
				$marginThumbsinit =  $marginThumbsinit + $cur_itemThumbsi.outerWidth(true);
				$j--;
			}			
			$thumbs.css({ marginLeft: -$marginThumbsinit  + $("#thumbs").width() / 2 + $( '#scroller_thumbnails ul li' ).eq( $initValueThumbs ).outerWidth( true ) / 2 });	
			
			
			
			$thumbs.stop().animate({ 
				marginLeft: -$marginThumbs  + $("#thumbs").width() / 2 + $( '#scroller_thumbnails ul li' ).eq( ui.index ).outerWidth( true ) / 2 
				}, {
					duration: 1000,
					specialEasing: { 
						marginLeft: "easeInOutCirc" 
					}
				}
			);
			
			
			
			
			
			
			/// END THUMBS ////
			
		},
		
		show : function( event, ui ) {
			$('li',$thumbs).removeClass( 'current' );
			if ($thumbs.find(" a[rel='"+ (ui.index + 1) +"'] ").parent().addClass( 'current' )){	
			//$thumbs.css({ marginLeft: '20px;'})
			}
			//$($thumbs).css({ marginLeft: $margin})
		}
		
	});
	
	// Setup some tabs options
	$tabs.tabs( "option", "selected", $( "#scroller div.item" ).size() / 2 );

/*-----------------------------------------------------------------------------------*/
/*	=Adding some tab functionality and styling to the thumbnails
/*-----------------------------------------------------------------------------------*/

	$('li a',$thumbs).click(function() { // bind click event to link
									
	// some class management
		$tabs.tabs('select', $(this).attr( 'rel' ) ); // switch to choosen tab tab		
		return false;		
	});	

/*-----------------------------------------------------------------------------------*/
/*	=Setup and size the slider and its handles
/*-----------------------------------------------------------------------------------*/

	//build slider
	var $scrollbar = $slider.slider({
		value: $( "#scroller div.item" ).size() / 2 - 1,
		animate: true,
		min: 0,
		max: $scroller.tabs( "length" ) - 1,
			slide: function( event, ui ) {
				$tabs.tabs( "select", ui.value );
			}
	});
		
	//append icon to handle
	var handleHelper = $scrollbar.find( ".ui-slider-handle" ).wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
		
	// Hide Elements for init and resize
	$thumbs.css({ opacity : 0, visibility: 'visible' });
	$slider.css({ opacity : 0, visibility: 'visible' });
	
	//size scrollbar and handle proportionally to scroll distance
	function sizeScrollbar() {
		
		// Size the thumbnail bar
		$w_thumb = 0;
		$thumbs.find('li').each(function(){
			$w_thumb = $w_thumb + $(this).outerWidth(true);
			//$w_thumb = 500;
		})
		
		// show the thumbnails
		//$thumbs.width( $w_thumb ).css({ margin: '0 auto'} ).animate({ opacity : 1 });
		$thumbs.css({ marginLeft: '0 auto'} ).animate({ opacity : 1 });
		
		// size the slider 
		//$slider.width( $thumbs.outerWidth() ).css({ margin: '0 auto'} ).animate({ opacity : 1 });
		//$slider.css({ margin: '0 auto'} ).animate({ opacity : 1 });
		
		// size the handle bar
		handleHelper.width( "" ).width( $scrollbar.outerWidth() - ( $(".ui-slider-handle").outerWidth() * 2 - 12 ) );		
			
	}

	$('#scroller').load( sizeScrollbar() );	
	

/*-----------------------------------------------------------------------------------*/
/*	=Prev and Next Links for Thumbnail Navigation
/*-----------------------------------------------------------------------------------*/

	$( 'a.scroll-buttons' ).click(function(event){		
		
		var $selected = $tabs.tabs('option', 'selected'); // get the current selected tab

		if( $(this).hasClass('next') && $selected <= $('li',$thumbs).length ) { // next action
			$tabs.tabs( "select", $selected + 1 );
		}

		if( $(this).hasClass('prev') && $selected >= 0 ) { // prev action
			$tabs.tabs( "select", $selected - 1 );
		}
		
		event.preventDefault();

	});

		
	});

});