//
// Gallery stuff!
//

	$(window).load(function (e) {
													
		///clear timer
		clearInterval(intervalID);
		var ss="playing";
		
		//$("#playpause").css("");
		/// add to lightbox
		$("#add").click(function(){
			 $("#result").load("/add_to_lightbox.php",	{ image: GALLERY.img.src });
			 $("#result").fadeTo ("slow", .8);
			 if(ss=="playing"){
				 $("#playpause").click ();
				 //clearInterval(intervalID);
			 }
			// 
		});
	////////////

		//
		// un comment to Re-render on resize if dynamic scaling used
		/*
			$ (window).resize (function (e) {
				GALLERY.loadNext ();
			});

	
		/// get a list of images for the slideshow version-
		/// VIA PHP IN gallery.php ////

		*/
		

		//alert("="+ssImages[0]+ssW[0]+ssH[0]);
		var currentImageNr=0;
		$("#playpause").css("background", "url(/image/pause.gif) no-repeat");
		//toggle play/pause on click
				$("#playpause").toggle(function() {
						
							$("#playpause").css("background", "url(/image/play.gif) no-repeat");
						ss="paused";	
						clearInterval(intervalID);
						}, function() {		
						clearInterval(intervalID);
							$("#playpause").css("background", "url(/image/pause.gif) no-repeat");
						ss="playing";	
							currentImageNr >= $("#imagestrip img").length - 1 ?  currentImageNr=0 : currentImageNr++;
							GALLERY.loadMe ($(this), ssImages[currentImageNr], ssW[currentImageNr], ssH[currentImageNr]);
						//$ ("#imagestrip img").eq (currentImageNr).click ();/// instant hit
						intervalID=setInterval(function(){
							currentImageNr >= $("#imagestrip img").length - 1 ?  currentImageNr=0 : currentImageNr++;
							GALLERY.loadMe ($(this), ssImages[currentImageNr], ssW[currentImageNr], ssH[currentImageNr]);
							//$ ("#imagestrip img").eq (currentImageNr).click ();
						}, 5000);
					});
		
		

		var intervalID=setInterval(function(){							
				
    		currentImageNr >= $("#imagestrip img").length - 1 ?  currentImageNr=0 : currentImageNr++;
				//$ ("#imagestrip img").eq (currentImageNr).click ();
				GALLERY.loadMe ($(this), ssImages[currentImageNr], ssW[currentImageNr], ssH[currentImageNr]);
				//
				
				
  		}, 5000);
		
		$("#imagestrip img").click(function(){
			 if(ss=="playing"){
				 $("#playpause").click ();
				 //clearInterval(intervalID);
			 }
			// 
		});
				
		// Show the toolbar when we hover over the image
		/*
			$ ("#image").hover (
				// Fade in
				function (e) {
					$("#playpause").fadeTo ("slow", .8);
				},
				// Fade out - and the info box too
				function (e) {
					$("#playpause").fadeTo ("slow", 0);
				}
			);
			*/
			$ ("#focus_inner").hover (
				// Fade in
				function (e) {
					$("#toolbar").fadeTo ("slow", 1);				
				},
				// Fade out - and the info box too
				function (e) {
					$ ("#toolbar").fadeTo ("slow", 0);
				}
			);
			$ ("#toolbar").hover (
				// Fade in
				function (e) {
					$("#toolbar").css ("opacity", 1);				
				},
				// Fade out - and the info box too
				function (e) {
					$ ("#result").fadeTo ("slow", 0);
				}
			);

		//
		// Imagestrip scroll buttons
		//
			var scrollMax = $ ("#imagestrip").width () - $ ("#images").width ();
			var scrollCur = 0;
			var scrollDif = $ ("#images").width () - 50;
			// Do we even need scrolling?
			if (scrollMax > 0) {
				//
				// "Activate" the buttons visually
				//
					$ ("#prev, #next").css ("cursor", "pointer");
					$ ("#next").fadeTo ("slow", 1);
				//
				// Click events
				//
					$ ("#prev, #next").click (function (e) {
						// Which direction?
						var dir = $ (this).attr ("id") == "prev" ? -1 : 1;
						// Add it
						scrollCur += (scrollDif * dir);
						// Check the bounds
						if (scrollCur >= scrollMax) {
							scrollCur = scrollMax;
							$ ("#next").fadeTo ("slow", 0.3);
							$ ("#next").css ("cursor", "default");
						} else {
							$ ("#next").fadeTo ("slow", 1);
							$ ("#next").css ("cursor", "pointer");
						}
						if (scrollCur <= 0) {
							scrollCur = 0;
							$ ("#prev").fadeTo ("slow", 0.3);
							$ ("#prev").css ("cursor", "default");
						} else {
							$ ("#prev").fadeTo ("slow", 1);
							$ ("#prev").css ("cursor", "pointer");
						}
						// Apply it
						$ ("#imagestrip").animate ({ "marginLeft": -scrollCur }, "slow");
					});
			}

		//
		// Add .hover classes to the thumbnails
		//
			/*
			$ ("#imagestrip img").hover (
				function (e) {
					// Fade out
					$ (this).fadeTo ("slow", 0.5);
				},
				function (e) {
					// Fade in
					$ (this).fadeTo ("slow", 1);
				}
			);
			*/

		//
		// Finally, activate the thing by clicking the first thumbnail
		//
			//$ ("#imagestrip img").eq (0).click ();
			GALLERY.loadMe ($(this), ssImages[0], ssW[0], ssH[0]);
	});

//
// These functions manipulate the viewing area
//
	GALLERY = {};
	GALLERY.img = {};
	GALLERY.cache = [];
	GALLERY.loadNext = function () {
		// Fade the image
		$ ("#image").fadeTo ("slow", 0, function (e) {
			// Fit the new image to the bounds (arbitrary 2 is for the border)
			// CK MOD removed the 2 - no border
			var w    = GALLERY.img.w;
			var h    = GALLERY.img.h;
			var wMax = $ ("#focus").width ();
			var hMax = $ ("#focus").height ();
			// Width first
			if (w > wMax) {
				h = h * (wMax / w);
				w = wMax;
			}
			// Then height
			if (h > hMax) {
				w = w * (hMax /h);
				h = hMax;
			}
			// Calculate the new bits for the focus (arbitrary 1 is for the border) ### -1 removed by CK, no border now ###
			var marginLeft = Math.round (w / 2);
			var marginTop  = Math.round (h / 2)+10; // mod by CK to sort top margin issue
			// Animate to the right size - ### is no longer used? ####
			/**/
			$ ("#focus_inner").animate (
				{
					"width":      w,
					"height":     h,
					"marginLeft": -marginLeft,
					"marginTop":  -marginTop
				}, "slow",
				function (e) {
			
					// Add the image
					$ ("#image").html ("");
					var img = $ ("<img />", { "src": GALLERY.img.src, "alt": "portfolio" });
					$ ("#image").append (img);
					// Is this image in the cache?
					if ($.inArray (GALLERY.img.src, GALLERY.cache) != -1) {
						// Fade in ASAP
						$ ("#image").fadeTo ("slow", 1);
					} else {
						// Fade in when we've loaded
						img.load (function (e) {
							$ ("#image").fadeTo ("slow", 1);
						});
						GALLERY.cache.push (GALLERY.img.src);
					}
				}
			);
		});
	};
	

	
	GALLERY.loadMe = function (el, src, w, h) {
		// Remove any hover classes
		$ ("#imagestrip img").removeClass ("hover");
		$ (el).addClass ("hover");
		// Set the variables
		GALLERY.img = {
			"src": src,
			"w":   w,
			"h":   h
		};

		// Now get loading!
		GALLERY.loadNext ();
	};