$(document).ready(function() {
	//Load Tooltip
	tooltip();
	
	//Load Scroll Menu
	makeScrollable("div.shoe_wrapper", "div.shoes");
	
	//Dropmenu IE Fix
	$('li.item').hover(
		function() { $('ul', this).css('display', 'block'); },
		function() { $('ul', this).css('display', 'none');
	});
 	
	//Shoebox
	document["shoepic"].src = "style/img/fw09_01.jpg";
	document.getElementById("shoebox").name = document["shoepic"].src;
	
  	$('div.shoes:eq(0) > img').click(function() {
 		var $lefty = $('div.bigpics');
 		var $shoeswap = this.src;
 		var $shoebox = document.getElementById("shoebox");
 		$shoeswap = $shoeswap.replace('_thumb.jpg', '.jpg');
 		if ($shoebox.name != $shoeswap) {
 			$lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, {duration: 'slow', complete: function() {document["shoepic"].src = $shoeswap;}});
 			$lefty.animate({left: 0}, {duration: 'slow'});
 		}
 	
    	$shoebox.name = $shoeswap;
  	});
});

//Slider
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"><img src="style/img/ajax-loader.gif" /></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();
        });
      }, 1000);
    }
  }, 100);
  
  function enable(){
  	// height of area at the top at bottom, that don't respond to mousemove
  	var inactiveMargin = 100;
  	// Cache for performance
  	var wrapperWidth = wrapper.width();
  	var wrapperHeight = wrapper.height();
  	// Using outer height to include padding too
  	var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
  	// 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  - inactiveMargin;

    	if (top < 0){
      		top = 0;
    	}

    	wrapper.scrollTop(top);
  	});
  }
}

//Tooltip
this.tooltip = function(){
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("img.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("img.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};