jQuery(document).ready(function(){
	
	var hash = jQuery(location).attr("hash");
	var newid = hash.substr(1, hash.length-1);
	if(jQuery(location).attr("hash")){
		// Load the Hash Record
		jQuery("#image").html('<img src="'+newid+'" />');
		var description1 = jQuery("a[href="+newid+"]").parents(".product").find("dd").text();
		jQuery("#description").text(description1);
		
	}else{
		// show first product
		showFirstProduct();
		
	}
	
	// Add Click Event
	jQuery(".product a").click(function(){

		var pic = jQuery(this).attr('href');
		var description = jQuery(this).parents(".product").find("dd").text();
		
		jQuery("#image").html('<img src="'+pic+'" />');
		jQuery("#description").text(description);	
	
		jQuery(location).attr("hash", pic);
		
		return false; 
	});
	
	function showFirstProduct(){
		var pic = jQuery(".product:first a").attr('href');
		var description = jQuery(".product:first").find("dd").text();
		
		jQuery("#image").html('<img src="'+pic+'" />');
		jQuery("#description").text(description);
	}
	
});


window.onDomReady(function() {
	
	// Initialize
	jQuery(".product dd").hide();
	jQuery("#scrollbar").css({'display':'block'});
	jQuery("#content").css({'overflow':'hidden'});
	
	
	calcContentWidth();
	
	if(calcContentWidth()){
		makeScrollbar( $('content'), $('scrollbar'), $('handle') );
		
	};
	
	
});


function calcContentWidth() {
	var width = 0;
	var products = $$('#contentelements div.product');
	
	if ( products.length > 0 ) {
		for(var i = 0; i < products.length; i++) {
			width = width + products[i].getSize().size.x;
		}
		$('contentelements').style.width = width + 20 + 'px';
	}
	
	if ( width <= $('content').getSize().size.x ) {
		$('scrollbar').style.visibility = 'hidden';
		return false;
	}
	return true;
}
		
function makeScrollbar(content, scrollbar, handle) {
	var slider = new Slider(scrollbar, handle, {
		steps: content.getSize().scrollSize.x - content.getSize().size.x,
		mode: 'horizontal',
		onChange: function(step) {
			// Scrolls the content element in x direction.
			content.scrollTo(step, 0);
		}
	}).set(0);
	
	// Scroll the content element when the mousewheel is used within the
	// content or the scrollbar element.
	$$(content, scrollbar).addEvent('mousewheel', function(e) {
		e = new Event(e).stop();
		var step = slider.step - e.wheel * 30;
		slider.set(step);
	});
	
	// Stops the handle dragging process when the mouse leaves the document body.
	$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}