//----------------------------------------------------------------------------------
//
//					TOOLBOX SLIDER
//
//----------------------------------------------------------------------------------
jQuery.extend({
			timer: 0 
		}); 
var timer;

jQuery(document).ready(function(){
	jQuery("#content-slider").slider({
	    animate: true,
	    change: handleSliderChange,
	    slide: handleSliderSlide 
	  });

	var displayed_tools = jQuery(".tool-overlay-item");
	
	
	function hideToolOverlays() { 
			jQuery(".tool-overlay-item").each(function(){
					jQuery(this).animate({
					marginTop: "10px",
					opacity: "hide"
				}, 500 ); 
			});
			setTimeout(zindexReset, 500);
	}

	function zindexReset() {
		jQuery("#tools_overlay").css("z-index","-100");
	}

	function clearOurTimeout() {
		clearTimeout(jQuery.timer); 
		//console.log("cleared timer " + jQuery.timer);
	}
	
	jQuery("#tools_overlay").bind("mouseenter", clearOurTimeout); 
	jQuery("#tools_overlay").bind("mouseout", clearOurTimeout); 
	
	 jQuery(".tool-item").each(function() {
		jQuery(this).bind("mouseenter", function() {
			//console.log("tool-item mouseenter " + jQuery.timer);
			clearTimeout(jQuery.timer);
			displayed_tools.css("display", "none"); 
			//jQuery("#" + jQuery(this).attr("value")).fadeIn("slow");
			jQuery("#tools_overlay").css("z-index","200");
			jQuery("#" + jQuery(this).attr("value")).animate({
				marginTop: "-200px",
				opacity: "show"
			}, 500 ); 
							
			 
			jQuery(this).find("img").attr("src", jQuery(this).attr("imgon")); 
		});
		
		jQuery(this).bind("mouseout", function() {   
			clearOurTimeout();
			jQuery.timer = setTimeout(hideToolOverlays, 2000);
			jQuery(this).find("img").attr("src", jQuery(this).attr("imgoff")); 
		});
	 });
	 
	 jQuery(".tool-overlay-item .close-tool").bind("click", hideToolOverlays); 
});

function handleSliderChange(e, ui)
{
  var maxScroll = jQuery("#content-scroll").attr("scrollWidth") -
  				jQuery("#content-scroll").width();
  jQuery("#content-scroll").animate({scrollLeft: ui.value *
     (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
  var maxScroll = jQuery("#content-scroll").attr("scrollWidth") -
  					jQuery("#content-scroll").width();
  jQuery("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
} 