// Gallery Javascript
// Sven Latham Latham IT Ltd.
// December 2009


// Call the gallery.start() function

var rotateGallery = function() { 
	this.imageQueue = new Array();
}
// Vars
rotateGallery.prototype.displayImage = null;
rotateGallery.prototype.framer = null;
rotateGallery.prototype.loaderImage = null;
rotateGallery.prototype.displayTitle = null;
rotateGallery.prototype.displayDescription = null;
rotateGallery.prototype.interval = 5000;	 // Interval in ms between images
rotateGallery.prototype.intervalObject = null;	// Will hold the window interval object

rotateGallery.prototype.transitionState = 0;	// 0 = stationary; 1 = transitioning
rotateGallery.prototype.transitionProgress = 0;	// 0-100

rotateGallery.prototype.transitionStep = 5;	// progress step
rotateGallery.prototype.transitionSpeed = 40;	// time between fade intervals in ms

rotateGallery.prototype.transitionIntervalObject = null;
rotateGallery.prototype.imageQueue = null;

rotateGallery.prototype.container = null; 	// Node that contains the images (usually a DIV)


rotateGallery.prototype.initialise = function() {
	// Empty the container
	allItems = this.container.childNodes;
	for (var i=0;i<allItems.length; i++) {
		this.container.removeChild(allItems[i]);
	}
	

		// Create a second image object for the transitions
	this.framer = document.createElement("iframe");
	this.framer.setAttribute("frameborder",0);
	this.framer.setAttribute("scrolling","no");
	this.framer.frameBorder = 0;
	this.framer.style.border = 0;
	this.framer.style.overflow = "hidden";
	this.framer.style.width = this.container.clientWidth+"px";
	this.framer.style.height = this.container.clientHeight+"px";
	this.container.appendChild(this.framer);
	doc = this.framer.contentDocument;
	if (doc == undefined || doc == null)
      doc = this.framer.contentWindow.document;
  doc.open();
  doc.write('');
  doc.close();
  
  // Create a loader image
	this.loaderImage = doc.createElement("img");
	doc.body.appendChild(this.loaderImage);
	doc.body.style.marginLeft = 0;
	doc.body.style.marginTop = 0;
	doc.body.style.marginRight = 0;
	doc.body.style.marginBottom = 0;
	//doc.body.appendChild(doc.createTextNode("Hello"));
	doc.body.style.backgroundImage = "url("+this.imageQueue[1].src+")";
	this.loaderImage.src = this.imageQueue[0].src;
	
	// Create a caption text box 
	
	this.displayDescription = doc.createElement("div");
	this.displayDescription.style.position = "absolute";
	this.displayDescription.style.left = "0px";
	this.displayDescription.style.top = "379px";
	this.setOpacity(this.displayDescription, 0);
	this.displayDescription.style.color="#ffffff";
	this.displayDescription.style.fontFamily="verdana, sans-serif";
	this.displayDescription.style.fontSize="8pt";
	this.displayDescription.style.fontWeight="bold";
	this.displayDescription.style.backgroundColor = "#000000";
	this.displayDescription.style.paddingLeft = 4;
	this.displayDescription.style.paddingTop = 4;
	this.displayDescription.style.paddingRight = 4;
	this.displayDescription.style.paddingBottom = 4;
	this.displayDescription.style.zIndex= 120;
	this.displayDescription.style.display = "none";
	doc.body.appendChild(this.displayDescription);	
	
		// Mouseover detector
	this.mousecap = doc.createElement("div");
	this.mousecap.style.position = "absolute";
	this.mousecap.style.left = "0px";
	this.mousecap.style.top = "0px";
	this.mousecap.style.width = "900px";
	this.mousecap.style.height= "400px";
	this.mousecap.style.zIndex = 105;
	
	doc.body.appendChild(this.mousecap);
	var closureRef = this;

	
	attachEvent(doc.body, "mouseover", function(e) {
		closureRef.showThumbs();
	});
	attachEvent(doc.body, "mouseout", function(e) {
		if (!e) var e = window.event;
		var tg = (window.event) ? e.srcElement : e.target;
		var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
		if (!reltg) {
			closureRef.hideThumbs();
		}
	});
	
	
	
	// Create a thumbbox
	this.thumbbox = doc.createElement("div");
	this.thumbbox.style.position = "absolute";
	this.thumbbox.style.left = "0px";
	this.thumbbox.style.top = "450px";
	this.thumbbox.style.width = "900px";
	this.thumbbox.style.height= "130px";
	this.thumbbox.style.backgroundImage = "url(/app-gallery/assets/graded.png)";
	this.thumbbox.style.zIndex = 105;
	this.thumbbox.style.paddingTop = "20px";
	this.thumbbox.style.textAlign = "center";
	this.mousecap.appendChild(this.thumbbox);
	
	// Create thumbnails for each image in our list
	this.thumbitems = {};
	for(var i in this.imageQueue) {
		thisImage = this.imageQueue[i];
		tmpBox = null;
		var tmpBox = doc.createElement("img");
		tmpBox.src = thisImage.thumb;
		tmpBox.rel = thisImage.src;
		tmpBox.style.width = "80px";
		tmpBox.style.height = "50px";
		tmpBox.style.margin = "10px";
		tmpBox.style.borderColor = "#ffffff";
		tmpBox.style.borderStyle = "solid";
		tmpBox.style.borderWidth = "5px";
		tmpBox.style.cursor = "hand";

		
		extern = this;
		attachEvent(tmpBox, "click", function(e) {
			if (!e) var e = window.event;
			var tg = e.srcElement ? e.srcElement : e.target;
			extern.forceImageBySrc(tg.rel);
		});
		
		this.thumbbox.appendChild(tmpBox);
		
	}
	this.beginTransition();
}

rotateGallery.prototype.setOpacity = function (obj, opc) {
	// opc is 0-100
	obj.style.filter = "alpha(opacity="+opc+")";
	obj.style.opacity = opc/100;
}

rotateGallery.prototype.start = function() {
	if (!this.framer) this.initialise();
	if (this.intervalObject) return false;
	var closureRef = this;
	this.intervalObject = window.setTimeout(
		function() { closureRef.beginTransition(); }, this.interval
	);
	//
}


rotateGallery.prototype.thumbStatus = 0;	// 0 = hidden, 1 = revealing, 2=full, 3 = fading
rotateGallery.prototype.thumbProgress = 0;	// 0-100 for effects
rotateGallery.prototype.thumbStep = 15;	// steps

rotateGallery.prototype.showThumbs = function() {
	this.stop();
	if (this.thumbStatus == 0) {
		this.thumbProgress = 0;
		this.thumbStatus = 1;
		this.thumbTick();
	}
}

rotateGallery.prototype.hideThumbs = function() {
	this.start();
	if (this.thumbStatus == 2 || this.thumbStatus == 1) {
		this.thumbStatus = 3;
		this.thumbTick();
	}
}

rotateGallery.prototype.thumbTick = function() {
	if (this.thumbStatus == 0) {
		return;
	}
	if (this.thumbStatus == 2) {
		return;
	}
	if (this.thumbStatus == 1) {
		this.thumbProgress += this.thumbStep;
		if (this.thumbProgress >= 100) {
			this.thumbProgress = 100; this.thumbStatus = 2;
		}
	}
	if (this.thumbStatus == 3) {
		this.thumbProgress -= this.thumbStep;
		if (this.thumbProgress <= 0) {
			this.thumbProgress = 0; this.thumbStatus = 0;
		}
	}
	this.thumbRender();
	if (this.thumbStatus == 0 || this.thumbStatus == 2) return;
	var galleryRef = this;
	window.setTimeout(
		function() { galleryRef.thumbTick(); }, 50
	);
}

rotateGallery.prototype.thumbRender = function() {
	this.thumbbox.style.top = 400-(this.thumbProgress * 1.2) + "px";
}

rotateGallery.prototype.stop = function() {
	window.clearTimeout(this.intervalObject);
	this.intervalObject = null;
	this.transitionProgress = 100;

	this.repaint();
	
	// Stop any transitions
	if (this.transitionIntervalObject) {
		window.clearTimeout(this.transitionIntervalObject);
		this.transitionIntervalObject = null;
	}
}

rotateGallery.prototype.forceImage = function(activeImage) {
	doc = this.framer.contentWindow.document;
	doc.body.style.backgroundImage = "url("+activeImage['src']+")";
	this.loaderImage.src = activeImage['src'];
	this.displayDescription.newText = activeImage['text'];
	this.stop();
	this.transitionProgress = 100;
	this.repaint();
}

rotateGallery.prototype.switchImage = function(activeImage) {



	doc = this.framer.contentWindow.document;

	doc.body.style.backgroundImage = "url("+this.loaderImage.src+")";
	this.loaderImage.src = activeImage['src'];
	this.displayDescription.newText = activeImage['text'];

	this.transitionProgress = 0;
	this.repaint();
}

rotateGallery.prototype.beginTransition = function() {
	var transRef = this;
	window.clearInterval(this.intervalObject);
	activeImage = this.getNextImage();
	this.switchImage(activeImage);	
	this.transitionIntervalObject = window.setInterval(function() { transRef.transition(); }, this.transitionSpeed);
}

rotateGallery.prototype.repaint = function() {
	this.setOpacity(this.loaderImage, this.transitionProgress);
	if (this.transitionProgress > 50) {
		this.displayDescription.style.display = "block";
		this.displayDescription.innerHTML = this.displayDescription.newText;
		this.setOpacity(this.displayDescription, (2*(this.transitionProgress-50)));
	} else {
		this.setOpacity(this.displayDescription, (100-2*this.transitionProgress));
	}
}

rotateGallery.prototype.transition = function() {
	var ready = 0;
	if (this.loaderImage.readyState) {
		// Internet Explorer model
		if (this.loaderImage.readyState == "complete") ready = 1;
	} else {
		if (this.loaderImage.complete) ready = 1;
	}
	if (ready) {
		this.transitionProgress += this.transitionStep;
		this.repaint();
		if (this.transitionProgress > 100) {
			doc = this.framer.contentWindow.document;
			doc.body.style.backgroundImage = "url("+this.loaderImage.src+")";
			this.stopTransition();
		}
	}
}


rotateGallery.prototype.stopTransition = function() {
	window.clearInterval(this.transitionIntervalObject);
	var closureRef = this;
	this.intervalObject = window.setTimeout( function() { closureRef.beginTransition(); }, this.interval);
}

rotateGallery.prototype.getPosition = function(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent);
		return [curleft,curtop];
	}
}


rotateGallery.prototype.forceImageBySrc = function(src) {
	for (var i=0; i<this.imageQueue.length; i++) {
		newImage = this.getNextImage();
		if (newImage.src == src) {
			this.forceImage(newImage); return true;
		}	
	}	
	return;

}

rotateGallery.prototype.attachThumb = function(obj) {
	// Attach a thumbnail to our gallery
	// When a user mouses over the thumbnail, it will override the viewing image
	
	// NB if thumbs folder is present - this will strip it!
	
	obj.gallery = this;
	mouseoverevent = function(e) {
		if (e == null) {
			src = window.event.srcElement;
		} else {
			src = (e.srcElement ? e.srcElement : e.target);
		}		
		
		newImage = null;
		for (var i=0; i<src.gallery.imageQueue.length; i++) {
			newImage = src.gallery.getNextImage();
			srcA = src.src;
			srcA = srcA.replace(/thumbs\//,'');
			srcB = this.rel;
			if (srcB) srcB = srcB.replace(/thumbs\//,'');
			srcDest = newImage['src'];
			srcDest = srcDest.replace(/thumbs\//,'');
			

			if (srcA && srcA.indexOf(srcDest) > -1) {
				src.gallery.forceImage(newImage); return true;
			}
			if (srcB && srcB.indexOf(srcDest) > -1) {
				src.gallery.forceImage(newImage); return true;
			}			
		}
	}
	attachEvent(obj, "mouseover", mouseoverevent);
	mouseoutevent = function(e) {
		if (e == null) {
			src = window.event.srcElement;
		} else {
			src = (e.srcElement ? e.srcElement : e.target);
		}
		src.gallery.start();
	}
	attachEvent(obj, "mouseout", mouseoutevent);
}


function attachEvent(obj,event,callback){
	if (obj.addEventListener){
		obj.addEventListener(event,callback,false);
	} else if (obj.attachEvent) {
		obj.attachEvent("on"+event,callback);
	}
}

rotateGallery.prototype.addImage = function(src, text, thumb) {
	this.imageQueue.push( {'src':src, 'text':text, 'thumb':thumb} );
}

rotateGallery.prototype.getNextImage = function() {
	nextImage = this.imageQueue.shift();
	this.imageQueue.push(nextImage);
	return nextImage;
}

// Callbacks
if (callbackRegister) {
	if (callbackRegister['app-gallery']) { cb = callbackRegister['app-gallery']; cb(); }
}