// ideas for this taken from two tutorials at: 
// http://www.jqueryfordesigners.com/slider-gallery/
// http://www.jqueryfordesigners.com/coda-slider-effect/

	window.onload = function (){
	
	        var container = $('div.sliderGallery');
            var ulSlide = $('ul.navigation');
            
            var itemsWidth = ulSlide.innerWidth() - container.outerWidth();  // the full ul width minus the visible width
          	
          	if(itemsWidth<0){
          		itemsWidth= 100;
          	}
          	
          	var sliderOptions = {
            	min: 0,
                max: itemsWidth,
                handle: '.slider-handle',
            	
            	
            	stop: function (e, ui) {
                    // moves the ul that contains the images left the distance of the slider - so insync
                       	
                   	ulSlide.animate({'left' : ui.value * -1}, 800);
                  
                  	var id = Math.floor(ui.value/110) +1 ;
               		
        	        // SLIDE THE HIGHLIGHT SECTION TO APPROPRIATE HASH ID
        	        $('ul.navigation a[href=#n'+id+']').click();
               		 
               },
                
                slide: function (e, ui) {
                                      
                   
                    ulSlide.css('left', ui.value * -1);
                 
                    
                }    
            
            
            };
          	
          	
         	$('.slider-bar', container).slider(sliderOptions);
               
		 
 		 function adjustSlider(el){
 		  		// this will need adjustment several images are added or deleted
 		  		
 		  		el= el.substr(1);
 		  		var value = $('.slider-bar').slider('option', 'value');					
				var new_value;
				
				switch(el){
					case  '1' :
						new_value=0;
					break;
					
					case  '2' :
					case  '3' :
					case  '4' :
					case  '5' :
					case  '6' :
					case  '7' :
						new_value= 20 + (110 * (el-1) );
							
					break;
					
				default :
				
						new_value= 30 + (110 * (el-1) );
								
					break;
					
					
					
				}
				
				// move the slider handle
				$('.slider-bar').slider('option', 'value', new_value);
				
				// move the images to align with handle
				$(ulSlide).animate({'left' : new_value * -1}, 500);
	  		  		
 		  }
			 		  
 		  
 		  
 		  // HIGHLIGHT SECTION BELOW SLIDER
 		  
 		  	
 		  	// collect the objects
 		  	var $panels = $('#highlight-slider .scrollContainer > div');
   			var $container = $('#highlight-slider .scrollContainer');	
			var $scroll = $('#highlight-slider .scroll').css('overflow', 'hidden');	 //remove the default scrollbars that will appear for users with js enabled

			// apply our left + right buttons, for js enabled only 
			$scroll
				.before('<img class="scrollButtons left" src="css/theme/images/left_arrow.png" alt="" />')
				.after('<img class="scrollButtons right" src="css/theme/images/right_arrow.png" alt=""  />');


 			var horizontal = true;
   			// float the panels left if we're going horizontal
    		if (horizontal) {
        		
        		$panels.css({
            		'float' : 'left',
            		'position' : 'relative' // IE fix to ensure overflow is hidden
        		});
       		// calculate a new width for the container (so it holds all panels)       	
        		$container.css('width', $panels[0].offsetWidth * $panels.length);
   			
   			}

		
			// handle nav selection
			function selectNav() {
				$(this)
					.parents('ul:first')
						.find('a')
							.removeClass('selected')
						.end() // resets back to the ul:first
					.end() // resets back to the this
					.addClass('selected');  // add the selected class to this
			
		}		
   			
   			$('#highlight-slider .navigation').find('a').click(selectNav);

			
			function getId(el){
				
				el= el.substr(1);
				
				//console.log('getId : ' + el);
			
			}
			
			
			// go find the navigation link that has this target and select the nav
			function trigger(data) {
				
	
			   var el = $('#highlight-slider .navigation').find('a[href$="' + data.id + '"]').get(0);  
			   
				 
			  // selectNav.call(el); this was original -but why use call?
			    selectNav(el);
				
				getId(data.id);
			
			
				adjustSlider(data.id);
				
		   
			}

    if (window.location.hash) {
 
 	   trigger({ id : window.location.hash.substr(1) });
 	 
    } else {
        $('ul.navigation a:first').click();
  		
  		
  }

    // 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((horizontal ? 
        $container.css('paddingTop') : 
        $container.css('paddingLeft')) 
        || 0) * -1;


    var scrollOptions = {
        target: $scroll, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels,

        navigation: '.navigation a',

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'img.left', 
        next: 'img.right',

        // allow the scroll effect to run both directions
        axis: 'xy',

        onAfter: trigger, // our final callback

        offset: offset,

        // duration of the sliding effect
        duration: 500,

        // easing - can be used with the easing plugin: 
        // http://gsgd.co.uk/sandbox/jquery/easing/
        easing: 'swing'
    };

    
    // apply serialScroll to the slider - we chose this plugin because it 
    // supports// the indexed next and previous scroll along with hooking 
    // in to our navigation.
  
  	$('#highlight-slider').serialScroll(scrollOptions);

    
    // now apply localScroll to hook any other arbitrary links to trigger 
    // the effect
    
    $.localScroll(scrollOptions);

    
    // finally, if the URL has a hash, move the slider in to position, 
    // setting the duration to 1 because I don't want it to scroll in the
    // very first page load.  We don't always need this, but it ensures
    // the positioning is absolutely spot on when the pages loads.
    
    scrollOptions.duration = 1;
    
    
    $.localScroll.hash(scrollOptions);
	

 	
};