// JavaScript Document



var Scroller = new Class({

	scrollingElement: null,

	scrollRange:null,

	scrollTimer:null,

	Extends:Slider,

	Implements:Options,

	options: {

		scrollTicks:100,

		scrollSpeed:10,

		scrollOffset:0

	},

	getWidth: function(element) {

		var allLis = element.getElements('li');

		var totalWidth = 0;

		for(n=0;n<allLis.length;n++) {

			totalWidth += allLis[n].getCoordinates().width + 10;

		}

		return totalWidth;

	},

	initialize: function(scrollBody, scrollHandle, scrollElement, scrollViewport, options) {

		this.setOptions(options);

		this.parent(scrollBody, scrollHandle, {wheel:true, steps:this.options.scrollTicks});

		this.addEvent('change', this.scrollElement);

		this.scrollElement = scrollElement;

		this.scrollRange = this.getWidth(this.scrollElement) - scrollViewport.getCoordinates().width - this.options.scrollOffset;
		
		this.set(50);

	},

	scrollElement: function(step) {

		this.scrollElement.setStyle('marginLeft', 0 - (this.scrollRange * (step / this.options.steps) ));

	},

	buttonScroll: function(movingRight) {

		if(movingRight) {

			this.set(this.step+1);

		} else {

			this.set(this.step-1);

		}

	},

	startButtonScroll: function(movingRight) {

		this.scrollTimer = this.buttonScroll.periodical(this.options.scrollSpeed, this, movingRight);

	},

	stopButtonScroll: function() {

		$clear(this.scrollTimer);

	}

});





var Expander = new Class({

	showcase: null,

	expanded: false,

	Implements: Options,

	Extends:Fx.Tween,

	options: {

		targetHeight:150

	},

	initialize: function(element, options) {

		this.showcase = element;

		this.setOptions(options);

		this.parent(element, {

			property: 'height',

			duration: 500,

			transition: Fx.Transitions.Quad.easeOut

		});

	},

	expand: function() {

		this.start(this.options.targetHeight);

		this.expanded=true;

	},

	contract: function() {

		this.start(0);

		this.expanded=false;

	}

});



var Tabs = new Class({

	currentTab:null,

	tabsContainer:null,

	Implements: [Options,Events],

	options: {

		elementsToClear:Array(),

		selectedClass:'selected',

		unselectedClass:'unselected',

		idPrefix:'tab',

		onStart:$empty,

		onEnd:$empty

	},

	initialize:function(tabsContainer, options) {

		this.setOptions(options);

		this.tabsContainer = tabsContainer;

		this.tabsContainer.getElements('.'+this.options.selectedClass).addEvent('click', this.changeTabLoader.bindWithEvent(this));

		this.tabsContainer.getElements('.'+this.options.unselectedClass).addEvent('click', this.changeTabLoader.bindWithEvent(this));

	},

	changeTabLoader:function(event) {

		this.changeTab(parseInt(event.target.parentNode.id.substr(this.options.idPrefix.length)));

	},

	changeTab:function(tabID) {

		if(this.currentTab!=tabID && $defined($(this.options.idPrefix+tabID))) {

			this.fireEvent('start');

			for(var i=0;i<this.options.elementsToClear.length;i++) {

				this.options.elementsToClear[i].innerHTML = '';

			}

			if($defined(this.currentTab)) {

				$(this.options.idPrefix+this.currentTab).set('class', this.options.unselectedClass);

			}

			$(this.options.idPrefix+tabID).set('class', this.options.selectedClass);

			this.currentTab = tabID;

			this.fireEvent('end');

		}

	}

});



var ImageRequest = new Class({

	imageContainer: null,

	description: null,

	ajaxLoader: null,

	showcase: null,

	Extends:Request,

	initialize: function(imageID, showcase, imageContainer, description) {

		this.imageContainer = imageContainer;

		this.description = description;

		this.showcase = showcase;

		this.ajaxLoader = new Element('img', {

			src:'images/ajaxLoader.gif',

			id:'ajaxLoader',

			style: {

				'position':'absolute',

				'left':'50%',

				'top':'50%',

				'marginLeft':'-16px',

				'marginTop':'-16px'

			}

		});

		this.imageContainer.innerHTML = "";

		this.description.innerHTML = "";

		if($defined($('ajaxLoader'))) {

			$('ajaxLoader').dispose();

		}

		this.ajaxLoader.inject(showcase);

		this.parent({

			method:'get',

			url:'getImage.php',

			data: {

				'command':'image',

				'id':imageID

			},

			onSuccess: function(responseText, responseXML) {

				this.ajaxLoader.dispose();

				var theImage = new Image();

				theImage.src = responseXML.getElementsByTagName('image').item(0).getElementsByTagName('src').item(0).firstChild.nodeValue;

				this.switchImage(responseXML.getElementsByTagName('image').item(0).getElementsByTagName('src').item(0).firstChild.nodeValue, responseXML.getElementsByTagName('image').item(0).getElementsByTagName('desc').item(0).firstChild.nodeValue);

			}

		});

	},

	switchImage: function(imgSrc, imgDesc) {

		this.imageContainer.innerHTML = '';

		new Element('img', {

			src:'images/'+imgSrc

		}).inject(this.imageContainer);

		this.description.innerHTML = imgDesc;

	}

});



var ThumbRequest = new Class({

	Extends:Request,

	initialize:function(galleryID, imageList, showcase, showcaseElement, imageContainerElement, descriptionElement, successFunction) {

		this.parent({

			method:'get',

			url:'getImage.php',

			data: {

				'command':'thumbs',

				'id':galleryID

			},

			onSuccess: function(responseText, responseXML) {

				var images = new Array();

				var imageIDs = new Array();

				var thumbs = responseXML.getElementsByTagName('thumbs').item(0).getElementsByTagName('thumb');

				for(var i = 0;i<thumbs.length;i++) {

					images[i] = 'images/'+thumbs[i].getElementsByTagName('src').item(0).firstChild.nodeValue;

					imageIDs[i] = thumbs[i].getElementsByTagName('id').item(0).firstChild.nodeValue;

				}

				var loader = new Asset.images(images, {

					onComplete: function() {

						for(var i=0;i<images.length;i++) {

							var newLi = new Element('li', {

								id:'thumb'+imageIDs[i]

							});

							newLi.inject(imageList);

							var newImage = new Element('img', {

								src:images[i]

							});

							newImage.inject(newLi);

							newLi.addEvent('click', function() {

								imageRequest = new ImageRequest(parseInt(this.id.substr(5)), showcaseElement, imageContainerElement, descriptionElement);

								if(!showcase.expanded) {

									showcase.expand();

								}

								setTimeout('imageRequest.send()', showcase.options.duration);

							});

						}

						scroller = new Scroller($('scrollBody'), $('scrollHandle'), $('imageList'), $('images'), {scrollTicks:100, scrollSpeed:1, scrollOffset:0});

					}

				});

			}

		});

	}

});



var imageRequest;

var tabs;

var scroller;



window.addEvent('domready', function() {

	$('scrollLeft').addEvent('mousedown', function() {

		scroller.startButtonScroll(false);

	});

	$('scrollLeft').addEvent('mouseup', function() {

		scroller.stopButtonScroll();

	});

	$('scrollRight').addEvent('mousedown', function() {

		scroller.startButtonScroll(true);

	});

	$('scrollRight').addEvent('mouseup', function() {

		scroller.stopButtonScroll();

	});

});