$('#modelPicker .model_select1').addClass('active');
	
$(document).ready(function(){
	
	$('a.model_select').click(function() {

		$('#modelPicker .model_select').parent().removeClass('active');
		$('#modelPicker .model_select' + $(this).attr('modelkey')).parent().addClass('active');
		$('.models_info').css('display', 'none');
		$('#models-' + $(this).attr('modelkey')).css('display', 'block');
		
		makeScrollable("#modelsContainer-" + $(this).attr('modelkey'), "#models-" + $(this).attr('modelkey'));

		return false;
	});

	makeScrollable("#modelsContainer-0", "#models-0");
	
	function makeScrollable(wrapper, scrollable) {

		var wrapper = $(wrapper), scrollable = $(scrollable);
		wrapper.scrollLeft(0);

		scrollable.hide();
		var loading = $("<div class='loading'><img src=\"/upload/Image/ajax-loader.gif\"></div>").appendTo(wrapper);

		var interval = setInterval(function(){
			
		  var images = scrollable.find("img");
		  var completed = 0;

		  images.each(function(){
		    if (this.complete) completed++;   
		  });
		
		  if (completed == images.length){
		    clearInterval(interval);

		    setTimeout(function(){
		
		      loading.hide();

		      wrapper.css({overflow: "hidden"});

				scrollable.show();
		        enable(); 
           
		    }, 1000); 
		  }
		}, 100);


		function enable(){
			
			var inactiveMargin = 300;   
			var divWidth = wrapper.width();
			
			var lastLi = scrollable.find('li:last-child');
			var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth();
			var ulW = ulWidth;
			var ulWidth = ulWidth + 2*inactiveMargin;	
			
			wrapper.mousemove(function(e){

				var left = (e.pageX - wrapper.offset().left) * (ulWidth - divWidth) / divWidth - inactiveMargin;

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

			    if (left > (ulW - divWidth)){
			      left = (ulW - divWidth);
			    }
			    
				wrapper.scrollLeft(left);
			});			
	
		}
	}
});