/* 
	NOTE:
	This file must be included AFTER jquery and it's relevant extensions (jquery.dimensions.js, ui.mouse.js & ui.slider.js etc.)
*/

function SetupMainMenu() {
	$('#nav ul').css( { display:"none" } ); // Opera Fix
	
	// jQuery's hover() function executes it's mouseout function immediately (it won't delay via setTimeout). This is a problem as the user may not have enough time to reach a submenu with his/her mouse
	// before it disappears. We need to keep the submenus visible for a while after mouseout. I'm using jQuery plugin "hoverIntent" to add this delay. First set up it's parameters
	var hoverIntentParameters = {    
		// sensitivity threshold (must be 1 or higher)    
		sensitivity: 3, 
		// milliseconds for onMouseOver polling interval
		interval: 100,  
		// onMouseOver callback function (REQUIRED)    
		over: function() {
			// Hide all submenus (any submenu kept open by the delay)
//$("ul", "#nav").each(function() {
//   $(this).hide(0);
//});
//$('#nav ul').hide();			
			$(this).find('ul:first').css({ 
				visibility:"visible",
				display:"none"
			}).show(1);
		}, 
		// milliseconds delay before onMouseOut    
		timeout: 1000,   
		// onMouseOut callback function (REQUIRED)    
		out: function() {
			$(this).find('ul:first').css({ visibility:"hidden" });
		}  
	};
	
	// Call hoverIntent
	$('#nav li').hoverIntent(hoverIntentParameters); 
}

function HideSlider()
{
	$('.slider').hide();
	$('.slider .handle').hide();
	$('#slider-left-arrow').hide();
	$('#slider-right-arrow').hide();
}

function SetupSlider() {
	var content = $('.image-content');
	var sliderWidth = $('.slider').width();
	var sliderHandle = $('.slider .handle');
	var sliderHandleWidth = sliderHandle.width();
	var maxSliderRight = sliderWidth - sliderHandleWidth; // the max the slider handle is allowed to move to the right in the slider track (pixels)
	var contentWidth = content.innerWidth();
//	var imageContent = $('.image-content img');
//	var contentWidth = (imageContent) ? imageContent.width() : 0;
	var viewPortWidth = $('.slider-wrapper').outerWidth();
	var maxLeft = contentWidth - viewPortWidth;			  // the max the content image is allowed to move left (pixels)
	var scrollSteps = 3;
	var scrollAmount = Math.ceil(maxLeft / scrollSteps);  // the number of pixels to move the image/content when user clicks the arrows (pixels)
	var onArrowClickAnimateTime = 2000;				  // milliseconds to animate the movement on click of an arrow
	var onSliderTrackClickAnimateTime = 2000;			  // milliseconds to animate the movement on click of the slider track
	var easingType = 'swing'; // can be 'linear' or 'swing'
	var clearPreviousAnimations = true;
	
	// If no content (image) or the image is narrow than the ViewPort window hide the slider
	//if ((contentWidth == 0) | (contentWidth < viewPortWidth))
	//	HideSlider();
	// Otherwise set up the slider event handlers
	//else
	//{
		$('.slider-wrapper').each(function () {
			var slider = $('.slider', this).slider({ 
				handle: '.handle',
				minValue: 0, 
				maxValue: maxLeft, 
				slide: function (ev, ui) {
					content.css('left', '-' + ui.value + 'px');
				}, 
				stop: function (ev, ui) {
					content.animate({ 'left' : '-' + ui.value + 'px' }, onSliderTrackClickAnimateTime, easingType);
				}
			});
		});
		  
		$("#slider-right-arrow").click( function() {
			var left = Math.abs(parseInt(content.css('left'), 10)); // the CSS 'left' value (pixels) of the absolutely positioned image
			// Only scroll if there is room to scroll left, and the image isn't currently being animated (finish running animations before scrolling again)
			if ((left < maxLeft) && !content.is(':animated'))
			{
				// We may not be able to scroll the full amount. 
				scrollContentBy = (scrollAmount > (maxLeft - left)) ? (maxLeft - left) : scrollAmount;
				moveSliderHandleBy = parseInt((scrollContentBy/maxLeft) * maxSliderRight);
				sliderHandle.animate({ 'left' : '+=' + moveSliderHandleBy + 'px' }, onArrowClickAnimateTime, easingType);
				content.animate( { 'left' : '-=' + scrollContentBy + 'px' }, onArrowClickAnimateTime, easingType);
			}
		});
		
		$("#slider-left-arrow").click( function() {
			var left = Math.abs(parseInt(content.css('left'), 10));
			// Only scroll the image left if it isn't already left-aligned, and the image isn't currently being animated (finish running animations before scrolling again)
			if ((left > 0) && !content.is(':animated'))
			{
				// We may not be able to scroll the full amount. 
				scrollContentBy = (scrollAmount > left) ? left : scrollAmount;
				moveSliderHandleBy = parseInt((scrollContentBy/maxLeft) * maxSliderRight);
				sliderHandle.animate({ 'left' : '-=' + moveSliderHandleBy + 'px' }, onArrowClickAnimateTime, easingType);
				content.animate( { 'left' : '+=' + scrollContentBy + 'px' }, onArrowClickAnimateTime, easingType);
			}
		});
	//}
}

/*
$(document).ready(function(){
	SetupMainMenu();
});
*/