/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Copyright 2009 Spiegel Design Group, Inc. All Rights Reserved.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
$(document).ready(function(){
						   
	var myImgView = 8;
	var myWidth = 88;
	var myPad = 13;
	var myMargin = 0;
	var myWindow = (myWidth + myPad) * myImgView;
	var numImgs = 24; //get number of images
	var myWidth = myWidth + myPad; //calc width of images
	var myWidth = (myWidth * myImgView); //multiply the width by the number viewable to set page size
	var myStopPos = 3;
	var myStartPos = 1;

	var i = Math.round(10000*Math.random());
						   
	$('.viewerBtn').click(function(){
		var thisId = $(this).attr('id');
		var image = thisId.split("_");
		$('#mainImage').html('<div id=\"loader\"></div>');
		
		//determine how far over from center to position the left edge of the modal window
		if( typeof( window.innerWidth ) == 'number' ) {
			windowWidth = window.innerWidth;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			windowWidth = document.documentElement.clientWidth;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			windowWidth = document.body.clientWidth;
		}
		var myLeft = (windowWidth - 990) / 2;
		if (myLeft < 0) myLeft = 0;
	
		//load the modal window with data
		$.get("/global/xml/getXMLData.php?a="+i, {id: image}, function(data) { 
			//var myData = data.split("%%%");
			$('div#mainImage').html(data);
			//$('.visual').html('<img src=\"'+myData[1]+'\" alt=\"'+myData[2]+'\" />');
		});
		
		
		//setup the modal scroll bar
		myStartPos = Math.floor(((image[1] / 24) * 3) + 1); 

		$('#next').removeClass('hidden');
		
		myMargin = (myStartPos-1) * myWindow * -1;
		
		myTempMargin = myMargin+"px";
		$('#list').animate({
			opacity: 1,
			marginLeft: myTempMargin,
			borderWidth: "0px"
		}, 1);
		
		setBullets(myStartPos);

		if (myStartPos != 1) $('#back').removeClass('hidden');	
		if (myStartPos == 3) $('#next').addClass('hidden');
		
		$('.popBtn').removeClass('active');
		$('#modal_'+image[1]).addClass('active');

		//$('img[@src$=.png]').ifixpng();

		
		//bring in the modal windows
		$("#modal").css("left", myLeft).show();  

	});
	
	
	$('.popBtn').click(function(){
		var thisId = $(this).attr('id');
		var image = thisId.split("_");
		$('#mainImage').html('<div id=\"loader\"></div>');
		
		//kill previously active thumbnail and activate new one
		$('.popBtn').removeClass('active');
		$('#' + thisId).addClass('active');
			
		$.get("/global/xml/getXMLData.php?a="+i, {id: image}, function(data) { 
			//var myData = data.split("%%%");
			$('div#mainImage').html(data);

			//$('.visual').html('<img class=\"hidden\" src=\"'+myData[1]+'\" onload=\"$(this).removeClass(\'hidden\');\" alt=\"'+myData[2]+'\" />');
			
		});
	});
		
	$("#closeMe").click(function() {  
		$("#modal").hide(); 
	}); 

	$('#next').click(function(){
		myMargin = myMargin - myWidth;
		myTempMargin = myMargin+"px";
		$('#list').animate({
			opacity: 1,
			marginLeft: myTempMargin,
			borderWidth: "0px"
		}, 500);

		myStartPos = myStartPos + 1;
		setBullets(myStartPos);

		if (myStartPos != 1) $('#back').removeClass('hidden');	
		if (myStartPos == 3) $(this).addClass('hidden');

		//$('img[@src$=.png]').ifixpng();
	});
	
	$('#back').click(function(){
		if (myStartPos == 1){
			$(this).addClass('hidden');
		} else {
			$(this).removeClass('hidden');
			myMargin = myMargin + myWidth;
			$('#list').animate({
				marginLeft: myMargin+"px"
			}, 500);

			myStartPos = myStartPos - 1;
			setBullets(myStartPos);

			if (myStartPos == 1) $(this).addClass('hidden');
			if (myStartPos != 3) $('#next').removeClass('hidden');	
		}
		//$('img[@src$=.png]').ifixpng();
	});
	
	function setBullets(myPage){
		$('.galleryTop').html('<img class=\"bullet\" id=\"bullet_1\" src=\"/global/img/modal/bullet_white.png\" alt=\"\" /><img class=\"bullet\" id=\"bullet_2\" src=\"/global/img/modal/bullet_white.png\" alt=\"\" /><img class=\"bullet\" id=\"bullet_3\" src=\"/global/img/modal/bullet_white.png\" alt=\"\" />');
		
		var myId = '#bullet_'+myPage;
		$('img.bullet').attr('src', '/global/img/modal/bullet_white.png');
		$(myId).attr('src', '/global/img/modal/bullet_black.png');
		//$('img[@src$=.png]').ifixpng();
	}	
	
/*
	//Added 3/12/09: preload images- couldn't get it to work. Will try again later
	jQuery.preloadImages = function() {
	  for(var i = 0; i < arguments.length; i++) {
		jQuery("<img/>").attr("src", arguments[i]);
	  }
	}
*/	
});