function initScrollPanes() {
		
	jQuery('#contentArea').jScrollPane({
        scrollbarWidth: 12,
        showArrows: false,
        reinitialiseOnImageLoad: false,
        dragMinHeight: 50,
        dragMaxHeight: 50,
		scrollbarMargin: 0,
		animateTo: false
    });
    jQuery('#subNav').jScrollPane({
        scrollbarWidth: 12,
        showArrows: false,
        reinitialiseOnImageLoad: false,
        dragMinHeight: 50,
        dragMaxHeight: 50,
		scrollbarMargin: 0
    }); 
}
	
function loadScripts(){
	jQuery.getScript('/media/js/scrollpane/jScrollPane-1.2.3.min.js');
	jQuery.getScript('/media/js/jquery/jquery.corners.js', function(){
		jQuery('.jScrollPaneDrag').corner('round 3px');
	});
}

function autoScroll(){
	//alert(jQuery('.scrollContent .jScrollPaneTrack').length)
	if(jQuery('.scrollContent .jScrollPaneTrack').length > 0) {
		jQuery('#contentArea')[0].scrollTo(0);
	}
	jQuery('#contentArea').fadeIn(1000, function() {});
}

function showImage(images) {
		jQuery('#contentArea').fadeOut(500, function() {
			jQuery('#contentArea').html('');
		
			jQuery.each(images, function(i,image){					
				if(image.picture.url != '') {
					jQuery('#contentArea').append('<a href="' + image.picture.url + '"><img style="float:left;" alt="' + image.picture.alt + '" src="' + image.picture.image + '" /></a>');				
				}else {
					jQuery('#contentArea').append('<img style="float:left;" alt="' + image.picture.alt + '" src="' + image.picture.image + '" />');
				}											
			});		
			setTimeout(initScrollPanes, 220);
			setTimeout(loadScripts, 230);			
			setTimeout(autoScroll, 250);		
									
		});						
	}

jQuery(document).ready(function(){		
	/*
	if (jQuery.browser.safari || jQuery.browser.msie || jQuery.browser.opera) {
		setTimeout(initScrollPanes, 120);
		setTimeout(loadScripts, 130);
	}else {
		initScrollPanes();
		loadScripts();
	}
	*/
	initScrollPanes();
	loadScripts();
	
	jQuery('.jScrollPaneDrag').corner('round 3px');
	
	jQuery("#nav li").hover(
		function () {
		jQuery(this).find("#navLarge").css('background-image','url(/media/css/images/navHover.png)');
		jQuery(this).find("#navLargeDark").css('background-image','url(/media/css/images/navHoverDark.png)');
		jQuery(this).find("#navSmall").css('background-image','url(/media/css/images/navHover.png)');
		jQuery(this).find("#navSmallDark").css('background-image','url(/media/css/images/navHoverDark.png)');
		}, 
		function () {
		jQuery(this).find("#navLarge").css('background-image','url(/media/css/images/navGrey1px.png)');
		jQuery(this).find("#navLargeDark").css('background-image','url(/media/css/images/navDarkGrey1px.png)');
		jQuery(this).find("#navSmall").css('background-image','url(/media/css/images/navGrey1px.png)');
		jQuery(this).find("#navSmallDark").css('background-image','url(/media/css/images/navDarkGrey1px.png)');
		}
	);	
			
	$('.image-ajax').click(function(){
		
		jQuery('.subMenuActive').fadeTo(1000, 1.0);
		
		jQuery('img').removeClass('subMenuActive');
		
		jQuery(this).children('img').addClass('subMenuActive');
		
		jQuery('.subMenuActive').fadeTo(1000, 0.3);
			
		var url = "/get/design/images/ajax/",
			data = { name: 'image-id', value: $(this).attr('rel') }
			
		jQuery.ajax({
			type: 'POST',
			url: url,
			data: data,
			cache: true,
			dataType: 'json',
			async: true,
			success: function(images){
						showImage(images)
					 }
		});		
	});	
	
});