//////////////////////////////////////////////////	// keep preloading array
	$(window).bind('load', function(){
	var preload = [
	'signage/signage/images/22/lg.jpg',
	'signage/signage/images/21/lg.jpg',
	'signage/signage/images/20/lg.jpg',
	'signage/signage/images/19/lg.jpg',
	'signage/signage/images/18/lg.jpg',
	'signage/signage/images/17/lg.jpg',
	'signage/signage/images/16/lg.jpg',
	'signage/signage/images/15/lg.jpg',
	'signage/signage/images/14/lg.jpg',
	'signage/signage/images/13/lg.jpg',
	'signage/signage/images/12/lg.jpg',
	'signage/signage/images/11/lg.jpg',
	'signage/signage/images/10/lg.jpg',
	'signage/signage/images/9/lg.jpg',
	'signage/signage/images/8/lg.jpg',
	'signage/signage/images/7/lg.jpg',
	'signage/signage/images/6/lg.jpg',
	'signage/signage/images/5/lg.jpg',
	'signage/signage/images/4/lg.jpg',
	'signage/signage/images/3/lg.jpg',
	'signage/signage/images/2/lg.jpg',
	'signage/signage/images/1/lg.jpg',
	];
	
	$(document.createElement('img')).bind('load', function(){
	if(preload[0]) this.src = preload.shift();
	}).trigger('load');
	});
	
	////////////////////////////////////////////////////////
	
    $(document).ready(function() {
		$('.facades').attr('src', 'global_images/transparency.jpg');
		var total = 23;
		var current_img = 0;
		
		var hash = window.location.hash.substr(1);
		var selected_img = hash;
		$('.img'+hash).addClass('selected');
		page_content(hash);
		
		//for ( i=0; i<20; i++ ){
		//	$('.img'+i).attr('src', 'signage/signage/images/' + i + '/sm.jpg');
		//}  
			
		$('.img1').click( function() {
		selected_img = 1; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img2').click( function() {
		selected_img = 2; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img3').click( function() {
		selected_img = 3; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img4').click( function() {
		selected_img = 4; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});

		$('.img5').click( function() {
		selected_img = 5; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});	

		$('.img6').click( function() {
		selected_img = 6; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img7').click( function() {
		selected_img = 7; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img8').click( function() {
		selected_img = 8; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img9').click( function() {
		selected_img = 9; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img10').click( function() {
		selected_img = 10; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img11').click( function() {
		selected_img = 11; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img12').click( function() {
		selected_img = 12; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img13').click( function() {
		selected_img = 13; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img14').click( function() {
		selected_img = 14; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img15').click( function() {
		selected_img = 15; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img16').click( function() {
		selected_img = 16; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img17').click( function() {
		selected_img = 17; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img18').click( function() {
		selected_img = 18; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img19').click( function() {
		selected_img = 19; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});
		
		$('.img20').click( function() {
		selected_img = 20; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});   
		
		$('.img21').click( function() {
		selected_img = 21; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});   
		
		$('.img22').click( function() {
		selected_img = 22; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});   
		
		$('.img23').click( function() {
		selected_img = 23; // position
		window.location.hash = selected_img;
		$(this).selected_ts();
		page_content(hash);
		});   
		
		/////////////////////////////////////////////////////////////////////////// loop .attr for thumbnails
		for ( k=0; k<24; k++ ){
			$('.img'+k).attr('src', 'signage/signage/images/' + k + '/sm.jpg');
		}  
		
		/////////////////////////////////////////////////////////////////////////// load content
		function page_content(hash) {
			var hash = window.location.hash.substr(1);
			
			if (current_img != selected_img) {	
				$('#content_lg img:first').fadeOut(200, function() {
					//alert(hash);
					$('#content_lg img:first').attr('src', 'signage/signage/images/' + hash + '/lg.jpg').load(function() { 
						$('#content_lg img:first').hide().fadeIn(500);
					});
				});
				current_img = selected_img;
			}
			
			$('#caption').load('signage/signage/images/' + hash + '/tag.html');
			$('a.highslide').attr('href', 'signage/signage/images/' + hash + '/profile.jpg');
			$("a.recipe").attr('href', 'signage/signage/images/' + hash + '/recipe.pdf');		
		}
		
		/////////////////////////////////////////////////// make thumbnail selected
		$.fn.selected_ts = function() { 					
			$('.selected').removeClass('selected');
			$(this).addClass('selected');
			$('a.highslide').show();
			$("a.recipe").attr('target', '_blank');
		};

		///////////////////////////////////////// scrollup when more than 20 images
		var foo = true;
		$('#addset').click(function() {
			if (foo == true) {
				$('#pane-target').stop().scrollTo( 430, 800 ); foo = false;
			}else{
				$('#pane-target').stop().scrollTo( 860, 800 ); foo = true; $('#addset').hide();
			}
		});
		
		////////////////////////////////////////// scrollup when less than 20 images
		// $('#addset').click(function() {
		// $('#pane-target').stop().scrollTo( 430, 800 ); //position,speed
		// $("#addset").hide();
		// });
		
		/////////////////////////////////////////////////////////////////////////// scrolldown
		$('#preset').click(function() {
		$('#pane-target').stop().scrollTo( 0, 800 );
		$("#addset").show();
		});
		
		///////////////////////////////////// make sure to auto-scroll when more than 20 images
		$('#content_lg img:first').load(function() { 
			if (selected_img < 10) { $('#pane-target').scrollTo( 860, 800 ); foo = true; $('#addset').hide(); } 
			else if (selected_img > 13 ) { $('#pane-target').scrollTo( 0, 800 ); foo = true; }
			else { foo = false; $('#pane-target').scrollTo( 430, 800 ); } 
		});
		
		/////////////////////////////////////////////////////////////////////////// make sure to auto-scroll when less than 20 images
		// $('#content_lg img:first').load(function() { 
		// if (selected_img <= Number(total)-10) { $("#addset").click(); } 
		// else { $("#preset").click(); }
		// });
		
		/////////////////////////////////////////////////////////////////////////// compensate li margin top
		$("#pane-target ul.float-left li:first").css("margin-top", "0px");
		$("#pane-target ul.float-right li:first").css("margin-top", "0px");
		
		/////////////////////////////////////////////////////////////////////////// move forward ( next )		
		$(".backimg").click(function() {
		
			var hash = window.location.hash.substr(1); 	
			var back = Number(hash)+1;
			var backimg = $('.img' + back);
			
			if (Number(hash) == total) {
				$('.img1').click();
			} else {
				backimg.click();
			}
			
		});
		
		/////////////////////////////////////////////////////////////////////////// move backwards ( back )
		$(".nextimg").click(function() {
			var hash = window.location.hash.substr(1);
			var next = Number(hash)-1;
			var nextimg = $('.img'+next);
			
			if (next == 0) {
				$('.img'+total).click();
			} else {
				nextimg.click();
			}
		});
		
		
		$('.img23').click();
	
	/////////////////////////////////////////////////////////////////////////// end doc ready
    });