window.onload = start;

function start () {
	Gallery.init();
}

var Images = {
	textHolders: new Array(),
	images:		new Array(),
	length:		0,
	addImage:	function (image, holder) {
		this.images[this.length] = image;
		this.textHolders[this.length] = holder;
		this.length++;
	}
}

var Gallery = {
	imageHolderId:	'picContainer',
	nextButtonId:	'arrowRight',
	prevButtonId:	'arrowLeft',
	duration:		'20',
	steps:			'7',
	color1:			'#FFFFFF',
	color2:			'#626262',
	imageHolder:	null,
	nextButton:		null,
	prevButton:		null,
	images:			new Array(),
	textHolders:	new Array(),
	loadedCount:	0,
	currentImage:	-1,
	width:			690,
	moving:			false,
	init:			function () {
		Gallery.imageHolder = document.getElementById(Gallery.imageHolderId);
		Gallery.nextButton = document.getElementById(Gallery.nextButtonId);
		Gallery.prevButton = document.getElementById(Gallery.prevButtonId);
		if (Images.length == 0
			|| !Gallery.imageHolder
			|| !Gallery.nextButton
			|| !Gallery.prevButton) {
			return null;
		}
		Gallery.showLoading();
		Gallery.initButtons();

		for (var i = 0; i < Images.length; i++) {
			var img = document.createElement('img');
			img.setAttribute('alt', '');
			img.onload = function () {
				Gallery.imageLoaded();
			}
			/*
			Gallery.addEvent(
				img,
				'load',
				function () {
					Gallery.imageLoaded();
				}
			);
			*/
			Gallery.images[i] = img;
			Gallery.textHolders[i] = document.getElementById(Images.textHolders[i]);
			Gallery.textHolders[i].style.display = 'none';
		}
		Gallery.loadNextImage();
	},
	initButtons:		function() {
		Gallery.nextButton.setAttribute('href', 'javascript:Gallery.nextImage();');
		Gallery.prevButton.setAttribute('href', 'javascript:Gallery.prevImage();');
		/*
		Gallery.addEvent(
			Gallery.nextButton,
			'click',
			function () {
				Gallery.nextImage(false);
				return false;
			}
		);
		Gallery.addEvent(
			Gallery.prevButton,
			'click',
			function () {
				Gallery.prevImage(false);
				return false;
			}
		);
		*/
	},
	setButtons:		function() {
		if (Gallery.currentImage < Gallery.images.length - 1) {
			Gallery.nextButton.style.display = 'block';
		}
		else {
			Gallery.nextButton.style.display = 'none';
		}
		if (Gallery.currentImage > 0) {
			Gallery.prevButton.style.display = 'block';
		}
		else {
			Gallery.prevButton.style.display = 'none';
		}
	},
	loadNextImage:	function () {
		Gallery.images[Gallery.loadedCount].setAttribute('src', Images.images[this.loadedCount]);
	},
	imageLoaded:	function () {
		var img = Gallery.images[Gallery.loadedCount];
		var div = document.createElement('div');
		div.style.backgroundImage = 'url('+ img.src +')';
		//div.appendChild(img);
		Gallery.images[Gallery.loadedCount] = div;

		Gallery.imageHolder.appendChild(div);
		var w = Gallery.imageHolder.offsetWidth + Gallery.width;
		Gallery.imageHolder.style.width = w + 'px';

		Gallery.loadedCount++;
		if (Gallery.loadedCount == 1) {
			Gallery.hideLoading();
			Gallery.currentImage = 0;
			Gallery.showImage(0);
		}
		if (Gallery.loadedCount < Gallery.images.length) {
			Gallery.loadNextImage();
		}
	},
	nextImage:		function () {
		if (Gallery.moving) {
			return;
		}
		// check if the next image has loaded
		if (Gallery.currentImage + 1 > Gallery.loadedCount) {
			setTimeout('Gallery.nextImage()', 300);
			return;
		}
		Gallery.showImage(Gallery.currentImage + 1);
	},
	prevImage:		function (noSlide) {
		if (Gallery.moving) {
			return;
		}
		// check if the prev image has loaded
		var noSlide = (noSlide) ? true : false;
		if (Gallery.currentImage + 1 > Gallery.loadedCount) {
			setTimeout('Gallery.prevImage(' + noSlide + ')', 300);
			return;
		}
		var dir = 1;
		if (noSlide) {
			dir = 0;
		}
		Gallery.showImage(Gallery.currentImage - 1, dir);
	},
	showImage:		function (imgNum) {
		if (imgNum > Gallery.currentImage) {
			// move left
			var px = 0;
			for (var i = Gallery.currentImage; i < imgNum; i++) {
				px += Gallery.width;
			}
			var topx = parseInt(Gallery.imageHolder.style.left);
			topx = isNaN(topx) ? 0 : topx;
			topx -= px;
			Gallery.slide(topx);
			Gallery.fade(Gallery.currentImage, imgNum);
		}
		else if (imgNum < Gallery.currentImage) {
			// move right
			var px = 0;
			for (var i = imgNum; i < Gallery.currentImage; i++) {
				px += Gallery.width;
			}
			var topx = parseInt(Gallery.imageHolder.style.left);
			topx += px;
			Gallery.slide(topx);
			Gallery.fade(Gallery.currentImage, imgNum);
		}
		else {
			// not moving
			Gallery.textHolders[imgNum].style.color = Gallery.color2;
			Gallery.textHolders[imgNum].style.display = 'block';
		}
		Gallery.currentImage = imgNum;
		Gallery.setButtons();
	},
	fade:			function (num1, num2) {
		var duration = (Gallery.duration * Gallery.steps) * 6;
		var fps = 30;
		var from = Gallery.color2;
		var to = Gallery.color1;

		var frames = Math.round(fps * (duration / 1000));
		var interval = duration / frames;
		var delay = interval;
		var frame = 0;

		if (from.length < 7) from += from.substr(1,3);
		if (to.length < 7) to += to.substr(1,3);

		var rf = parseInt(from.substr(1,2),16);
		var gf = parseInt(from.substr(3,2),16);
		var bf = parseInt(from.substr(5,2),16);
		var rt = parseInt(to.substr(1,2),16);
		var gt = parseInt(to.substr(3,2),16);
		var bt = parseInt(to.substr(5,2),16);

		var r,g,b,h;
		while (frame < frames)
		{
			r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
			g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
			b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
			h = Gallery.makeHex(r,g,b);

			setTimeout('Gallery.setColor(' + num1 + ',\'' + h + '\')', delay);
			frame++;
			delay = interval * frame; 
		}
		setTimeout('Gallery.setColor(' + num1 + ',\'' + to + '\')', delay);
		setTimeout('Gallery.setColor(' + num2 + ',\'' + to + '\')', delay);

		Gallery.textHolders[num2].parentNode.scrollTop = 0;
		Gallery.textHolders[num2].parentNode.scrollLeft = 0;
		Gallery.textHolders[num2].style.display = 'block';
		Gallery.textHolders[num1].style.display = 'none';

		var from = Gallery.color1;
		var to = Gallery.color2;
		var frame = 0;

		if (from.length < 7) from += from.substr(1,3);
		if (to.length < 7) to += to.substr(1,3);

		var rf = parseInt(from.substr(1,2),16);
		var gf = parseInt(from.substr(3,2),16);
		var bf = parseInt(from.substr(5,2),16);
		var rt = parseInt(to.substr(1,2),16);
		var gt = parseInt(to.substr(3,2),16);
		var bt = parseInt(to.substr(5,2),16);

		var r,g,b,h;
		while (frame < frames)
		{
			r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
			g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
			b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
			h = Gallery.makeHex(r,g,b);
		
			setTimeout('Gallery.setColor(' + num2 + ',\'' + h + '\')', delay);
			frame++;
			delay = interval * frame; 
		}
		setTimeout('Gallery.setColor(' + num2 + ',\'' + to + '\')', delay);
	},
	makeHex:		function (r,g,b) {
		r = r.toString(16); if (r.length == 1) r = '0' + r;
		g = g.toString(16); if (g.length == 1) g = '0' + g;
		b = b.toString(16); if (b.length == 1) b = '0' + b;
		return '#' + r + g + b;
	},
	setColor:		function (num, color) {
		Gallery.textHolders[num].style.color = color;
	},
	slide:			function (target) {
		Gallery.moving = true;
		var current = parseInt(Gallery.imageHolder.style.left);
		current = isNaN(current) ? 0 : current;
		if (target < current) {
			var increment = Math.round((target - current - Gallery.steps) / Gallery.steps);
			if (increment == 0) {
				increment = -1;
			}
			var location = current + increment;
		}
		else if (target > current) {
			var increment = Math.round((target - current) / Gallery.steps);
			if (increment == 0) {
				increment = 1;
			}
			var location = current + increment;
		}
		else if (target == current) {
			Gallery.moving = false;
			return;
		}
		Gallery.imageHolder.style.left = location + 'px';
		setTimeout('Gallery.slide(' + target + ')', Gallery.duration);
	},
	addEvent:		function (obj, type, fn) {  // the add event function
		if (obj.addEventListener) {
			obj.addEventListener(type, fn, false);
		}
		else if (obj.attachEvent) {
			obj['e' + type + fn] = fn;
			obj[type + fn] = function() {
				obj['e' + type + fn]( window.event );
			};
			obj.attachEvent('on' + type, obj[type + fn]);
		}
	},
	showLoading:	function () {
		if (!Gallery.loader) {
			Gallery.loader = document.createElement('div');
			Gallery.loader.setAttribute('id', 'loading');
			Gallery.loader.style.position    = 'absolute';
			Gallery.loader.style.top         = '50%';
			Gallery.loader.style.left        = '50%';
			Gallery.loader.style.width       = '30em';
			Gallery.loader.style.lineHeight  = '5em';
			Gallery.loader.style.margin      = '-2.5em 0 0 0em';
			Gallery.loader.style.textAlign   = 'center';
			Gallery.loader.style.fontWeight  = 'bold';
			//Gallery.loader.style.fontSize    = '10px';
			Gallery.loader.style.color       = '#626262';
			Gallery.loader.appendChild(document.createTextNode('Loading, please wait \u2026'));
			Gallery.imageHolder.appendChild(Gallery.loader);
		}
	},
	hideLoading:	function () {
		if (Gallery.loader) {
			Gallery.imageHolder.removeChild(Gallery.loader);
		}
		Gallery.loader = null;
	}
}