// when the DOM is ready...
$(document).ready(function () {

	//Sexy Form Click in/out Clearing - Thank you Chris Hinkley. Delectable.

	var defaultValues = [];

	$('input.prompted, textarea.prompted').each(function( intIndex ){
		defaultValues[ $(this).attr('id') ] = $(this).val();
		$(this).addClass('promptText');
	});

	$('input.prompted, textarea.prompted').focus(function(){
		if ( $(this).hasClass('promptText') )
		{
			$(this).val('');
			$(this).removeClass('promptText');
		}
	});

	$('input.prompted, textarea.prompted').blur(function(){
		if ( $(this).val() == '' )
		{
			$(this).addClass('promptText');
			$(this).val( defaultValues[ $(this).attr('id') ] );
		}  
	});


var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
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);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .sheKnowsItsAMultiPass').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .sheKnowsItsAMultiPass').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.sheKnowsItsAMultiPass 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: '.sheKnowsItsAMultiPass a',
  
  // 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.
$('#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);


$('.oneThumb').click(function(){
	$('.hideShow').hide();
	$('.goodsOne').show();
});
$('.twoThumb').click(function(){
	$('.hideShow').hide();
	$('.goodsTwo').show();
});
$('.threeThumb').click(function(){
	$('.hideShow').hide();
	$('.goodsThree').show();
});
$('.fourThumb').click(function(){
	$('.hideShow').hide();
	$('.goodsFour').show();
});
$('.fiveThumb').click(function(){
	$('.hideShow').hide();
	$('.goodsFive').show();
});
$('.sixThumb').click(function(){
	$('.hideShow').hide();
	$('.goodsSix').show();
});
$('.sevenThumb').click(function(){
	$('.hideShow').hide();
	$('.goodsSeven').show();
});
$('.eightThumb').click(function(){
	$('.hideShow').hide();
	$('.goodsEight').show();
});


function makeScrollable(wrapper, scrollable){
	// Get jQuery elements
	var wrapper = $(wrapper), scrollable = $(scrollable);

	// Hide images until they are not loaded
	scrollable.hide();
	var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);

	// Set function that will check if all images are loaded
	var interval = setInterval(function(){
		var images = scrollable.find('img');
		var completed = 0;

		// Counts number of images that are succesfully loaded
		images.each(function(){
			if (this.complete) completed++;	
		});

		if (completed == images.length){
			clearInterval(interval);
			// Timeout added to fix problem with Chrome
			setTimeout(function(){

				loading.hide();
				// Remove scrollbars	
				wrapper.css({overflow: 'hidden'});						

				scrollable.slideDown('slow', function(){
					enable();	
				});					
			}, 200);	
		}
	}, 100);

	function enable(){			
		// Cache for performance
		var wrapperWidth = wrapper.width();
		var wrapperHeight = wrapper.height();
		// Using outer height to include padding too
		var scrollableHeight = scrollable.outerHeight();
		// Do not cache wrapperOffset, because it can change when user resizes window
		// We could use onresize event, but it's just not worth doing that 
		// var wrapperOffset = wrapper.offset();

		//When user move mouse over menu			
		wrapper.mousemove(function(e){
			var wrapperOffset = wrapper.offset();
			// Scroll menu
			var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight;
			wrapper.scrollTop(top);
		});		
	}
}

$('.goodsOne').hover(function(){
	makeScrollable("div.tylerWrap", "div.tyler");
});

$('.goodsTwo').hover(function(){
	makeScrollable("div.jonathanWrap", "div.jonathan");
});
	
$('.goodsThree').hover(function(){
	makeScrollable("div.tylerBWrap", "div.tylerB");
});

$('.goodsFour').hover(function(){
	makeScrollable("div.eddyWrap", "div.eddy");
});

$('.goodsFive').hover(function(){
	makeScrollable("div.darrenWrap", "div.darren");
});

$('.goodsSix').hover(function(){
	makeScrollable("div.jeanneWrap", "div.jeanne");
});

$('.goodsSeven').hover(function(){
	makeScrollable("div.cathyWrap", "div.cathy");
});

$('.goodsEight').hover(function(){
	makeScrollable("div.josiahWrap", "div.josiah");
});
	
});