/*******************************************************************************

FILE: mud_Scripts.js
REQUIRES: prototype.js, mud_FadeGallery.js
AUTHOR: Takashi Okamoto mud(tm) - http://www.mudcorp.com/
VERSION: 2.0 - converted to use prototype.js
DATE: 01/05/2006

--------------------------------------------------------------------------------

This file is part of MudFadeGallery.

	MudFadeGallery is free for anyone to use, but this header MUST be
	included, and may not be modified.

*******************************************************************************/

////////////////////////////////////////////////////////////////////////////////
// GLOBAL VARS

// var imgsGallery = new Array();
// var imgs;

///////////////////////////////////////////////////////////////////////////////
// MOUSE EVENTS

// function setOnMouseClick() {
// 	var elements = document.getElementsByTagName("a");
// 	for (var i = 0; i < elements.length; i++) {
// 		switch(elements[i].className) {
// 			case "next":
// 				elements[i].onclick = function() {
// 					 imgs.nextImg();
// 					 return false;
// 				}
// 				break;
// 			case "prev":
// 				elements[i].onclick = function() {
// 					 imgs.prevImg();
// 					 return false;
// 				}
// 				break;
// 			case "s0":
// 				elements[i].onclick = function() {
// 					 imgs.showImg(0);
// 					 return false;
// 				}
// 				break;
// 			case "s1":
// 				elements[i].onclick = function() {
// 					 imgs.showImg(1);
// 					 return false;
// 				}
// 				break;
// 			case "s2":
// 				elements[i].onclick = function() {
// 					 imgs.showImg(2);
// 					 return false;
// 				}
// 				break;
// 			case "s3":
// 				elements[i].onclick = function() {
// 					 imgs.showImg(3);
// 					 return false;
// 				}
// 				break;
// 		}
// 	}
// }

////////////////////////////////////////////////////////////////////////////////
// INIT

// function init() {
// 	setOnMouseClick();
// 	// images gallery
// 	// load images note: imgsGallery[].image isn't an array of images, just strings to hold location
// 	imgsGallery[0] = new Object();
// 	imgsGallery[0].image = "images/image_0.jpg";
// 	imgsGallery[0].title = "Title for first Image";
// 	imgsGallery[0].caption = "This is the first image...";
// 	
// 	imgsGallery[1] = new Object();
// 	imgsGallery[1].image = "images/image_1.gif";
// 	imgsGallery[1].title = "Title for second Image";
// 	imgsGallery[1].caption = "This is the second image...";
// 	
// 	imgsGallery[2] = new Object();
// 	imgsGallery[2].image = "images/image_2.gif";
// 	imgsGallery[2].title = "Title for third Image";
// 	imgsGallery[2].caption = "This is the third image...";
// 	
// 	imgsGallery[3] = new Object();
// 	imgsGallery[3].image = "images/image_3.png";
// 	imgsGallery[3].title = "Title for fourth image";
// 	imgsGallery[3].caption = "This is the fourth image...";
// 	
// 	imgs = new MudFadeGallery('imgs', 'imgDisplay', imgsGallery);
// 	
// 	// set the initial captions
// 	var title = (imgsGallery[0].title) ? imgsGallery[0].title : "No Title";
// 	var caption = (imgsGallery[0].caption) ? imgsGallery[0].caption : "No caption";
// 	$("imgDisplay_title").innerHTML = title;
// 	$("imgDisplay_caption").innerHTML = caption;
// 	$("imgDisplay_number").innerHTML = "1 of " + imgsGallery.length + " projects";
// }

////////////////////////////////////////////////////////////////////////////////
// EVENTS
//Event.observe(window, 'load', init, false);

function $c(msg) {
	if(typeof console != 'undefined') console.log(msg);
	else alert(msg);
}

var MudFadeGallery = Class.create({
	/* ------------- CALLBACKS ------------- */
	/* ------------- EDITABLE -------------- */
	
	// runs right before fade begins
	onFadeStart: function() {
		//var title = "...";
		//var caption = "";
		//$(this.id+"_title").innerHTML = title;
		//$(this.id+"_caption").innerHTML = caption;
		//$(this.id+"_number").innerHTML = (this.imgCurrent+1) + " of " + this.imgTotal + " projects";
	},
	
	// runs right after fade completes
	onFadeEnd: function() {
		// var title = (this.imgsArray[this.imgCurrent].title) ? this.imgsArray[this.imgCurrent].title : "No Title";
		// var caption = (this.imgsArray[this.imgCurrent].caption) ? this.imgsArray[this.imgCurrent].caption : "No caption";
		// $(this.id+"_title").innerHTML = title;
		// $(this.id+"_caption").innerHTML = caption;
	},
	
	/* ------------- DON'T EDIT PAST HERE ------------- */
	initialize: function(thisObj, id, imgsArray, options) {
		this.id = id;
		this.thisObj = thisObj;
		this.imgsArray = imgsArray;
		this.imgTotal = imgsArray.length;
		this.opacity = 10;
		this.fadeFrame = 0;
		this.timerID = null;
		this.apTimerID = null;
		this.imgsLoaded = new Array(this.imgTotal);
		this.options = options;
		
		//checking options
		this.imgCurrent = (this.options.startNum) ? this.options.startNum : 0;
		if (this.options.preload) {
			window.setTimeout(this.thisObj+'.preloadImgs()', 50);
		}
		if (this.options.autoplay > 0) {
			var delay = this.options.autoplay * 1000 + 1000; // the additional 1000 compensates for the fade in time of the next image.
			this.apTimerID = window.setTimeout(this.thisObj + '.autoplayImgs(' + delay + ')', delay);
		}
	},
	
	changeImg: function(imgNum) {
		if (!this.imgsLoaded[imgNum]) {
			this.loadImgNumber(imgNum);
		}
		$(this.id).src = this.imgsLoaded[imgNum].src;
	},
	
	nextImg: function() {
		this.imgCurrent++;
		if (this.imgCurrent == this.imgTotal) {
			this.imgCurrent = 0;
		}
		this.doFade();
	},
	
	prevImg: function() {
		this.imgCurrent--;
		if (this.imgCurrent == -1) {
			this.imgCurrent = this.imgTotal - 1;
		}
		this.doFade();
	},
	
	showImg: function(imgNum) {
		if (this.imgCurrent != imgNum) {
			if (this.imgCurrent == -1) {
				this.imgCurrent = this.imgTotal - 1;
			}
			else if (this.imgCurrent > this.imgTotal-1) {
				this.imgCurrent = 0;
			}
			else this.imgCurrent = imgNum;
			this.doFade();
		}
	},
	
	doFade: function() {
		this.onFadeStart();
		Element.hide(this.id);
		// firefox seems to change the image too early
		// so we'll just insert a slight delay
		window.setTimeout(this.thisObj+'.changeImg('+this.imgCurrent+')', 50);
		if (!(/MSIE/.test(navigator.userAgent) && /Mac/.test(navigator.userAgent)))
			this.startFade();
		else {
			Element.show(this.id);
			this.onFadeEnd();
		}
	},
	
	startFade: function() {
		if (this.timerID) {
			window.clearTimeout(this.timerID);
			this.timerID = null;
		}
		// place delay before fade
		this.timerID = window.setTimeout(this.thisObj + ".fade()", 250);
	},
	
	preloadImgs: function() {
		for (var i = 0; i < this.imgTotal; i++) {
			this.loadImgNumber(i);
		}
	},
	
	loadImgNumber: function(imgNumber) {
		// check if already loaded
		if (!this.imgsLoaded[imgNumber]) {
			this.imgsLoaded[imgNumber] = new Image();
			this.imgsLoaded[imgNumber].src = this.imgsArray[imgNumber].image;
		}
	},
	
	autoplayImgs: function(delay) {
		if (this.apTimerID) {
			window.clearTimeout(this.apTimerID);
			this.apTimerID = null;
		}
		this.nextImg();
		this.apTimerID = window.setTimeout(this.thisObj + ".autoplayImgs(" + delay + ")", delay);
	},
	
	apStart: function(delay) {
		if (!delay || delay < 1) delay = 1;
		delay = delay * 1000 + 1000;
		this.autoplayImgs(delay);
	},
	
	apStop: function(delay) {
		if (this.apTimerID) {
			window.clearTimeout(this.apTimerID);
			this.apTimerID = null;
		}
	},
	
	fade: function() {
		if (this.timerID) {
			window.clearTimeout(this.timerID);
			this.timerID = null;
		}
		this.calcOpacity(this.fadeFrame);
		this.setOpacity(this.opacity);
		this.fadeFrame++;
		if ($(this.id).style.display == "none") Element.show(this.id);
		if (this.fadeFrame < MudFadeGallery.FADE_UP.length) {
			this.timerID = window.setTimeout(this.thisObj + ".fade()", 20);
		}
		else {
			this.fadeFrame = 0;
			this.onFadeEnd();
		}
	},
	
	calcOpacity: function(frameNumber) {
		this.opacity = MudFadeGallery.FADE_UP[frameNumber];
	},
	
	setOpacity: function(opacity) {
		var obj = $(this.id).style;
		// Fix for math error in some browsers
		opacity = (opacity == 100) ? 99.999 : opacity;
		// IE/Windows
		obj.filter = "alpha(opacity:"+opacity+")";
		// Safari < 1.2, Konqueror
		obj.KHTMLOpacity = opacity/100;	
		// Older Mozilla and Firefox
		obj.MozOpacity = opacity/100;
		// Safari 1.2, newer Firefox and Mozilla, CSS3
		obj.opacity = opacity/100;
	}	
});

MudFadeGallery.FADE_UP = new Array(0, 6, 11, 17, 23, 30, 38, 47, 56, 66, 75, 84, 92, 100);

var gallery;
var GalleryPage = Behavior.create({
	initialize: function() {
		this.imageObjects = new Array();
		this._addBehaviors();
		gallery =  new MudFadeGallery('gallery', 'slideshow-image', this.imageObjects, { startNum: 0, preload: true, autoplay: 0 });
	},
	_addBehaviors: function() {
		Event.addBehavior({ 'a.image-link': NumberImageLink(this) });	
		Event.addBehavior({ '#slideshow-image': PictureAdvance(this) });	
	}
});

var PictureAdvance = Behavior.create({
	onclick: function(e) {
		gallery.nextImg();
		var numberTargets = $$('.number-image-link');
		var currentOn = $$('.number-on')[0];
		var nextTarget = $$('.number-on')[0].next();
		$$('.number-image-link').each(function(i) { i.removeClassName('number-on'); });
		if(currentOn == numberTargets.last()) { nextTarget = numberTargets.first(); }
		nextTarget.addClassName('number-on');
	}
});

var NumberImageLink = Behavior.create({
	initialize: function(galleryPage) {
		if(this.element.hasClassName('number-image-link')) {
			this.galleryPage = galleryPage;
			var info = this.element.rel.split(':');
			this.index = info[0];
			this.imageObject = new Object();
		
			this.imageObject.image = this.element.href;
			this.imageObject.width = info[1];
			this.imageObject.height = info[2];
			this.imageObject.title = info[3];
			this.imageObject.caption = info[3];
		
			this.galleryPage.imageObjects.push(this.imageObject);
		}
	},
	onclick: function(e) {
		var target = $(e.target);
		
		var currentOn = $$('.number-on')[0];
		var nextTarget = $$('.number-on')[0].next();
		var prevTarget = $$('.number-on')[0].previous();
		var numberTargets = $$('.number-image-link');
		
		if(target.hasClassName('number-image-link') || target.hasClassName('next-image-link') || target.hasClassName('prev-image-link')) {
			$$('.number-image-link').each(function(i) { i.removeClassName('number-on'); });
		}
		 
		if(target.hasClassName('number-image-link')) {
			gallery.showImg(this.index);
			target.addClassName('number-on');
		}
				
		if(target.hasClassName('next-image-link')) {
			gallery.nextImg();
			if(currentOn == numberTargets.last()) { nextTarget = numberTargets.first(); }
			nextTarget.addClassName('number-on');
		}
		if(target.hasClassName('prev-image-link')) {
			gallery.prevImg()
			if(currentOn == numberTargets.first()) { prevTarget = numberTargets.last(); }
			prevTarget.addClassName('number-on');
		}
		
		

		return false;
	}
});

Event.addBehavior({
	'body.project':GalleryPage
});