CollectionInterface = Class.create();
CollectionInterface.prototype = 
{
	initialize: function(images, path, category, smallSize, largeSize, offset, currentImage, duration)
	{
		this.currentImageIndex = (currentImage-1 >= images.length) ? 0 : (currentImage-1 < 0) ? 0 : currentImage-1;
		this.offset     = offset || 81;
		this.duration   = duration || 700;
		this.images     = images;
		this.path       = path;
		this.category   = category;
		this.smallSize  = smallSize;
		this.largeSize  = largeSize;
		this.iterations = 1;
		
		
		this.arrowNext     = $("arrowNext");
		this.arrowPrevious = $("arrowPrevious");
		this.currentPage   = $("currentPage");
		this.totalPages    = $("totalPages");
		this.link          = $("linkToThisPage").getElementsByTagName("a")[0];
		this.content       = $("content");
		this.mainImageContainer = $("mainImg");
		
		this.mainImageContainer.current = true;
		
		this._drawImageNav();
		this._initializeMainImage();
		this._getDescription();
		
		this._setCurrentPage();
		this.totalPages.innerHTML  = this.images.length;
	},
	
	_nextObserver: null,
	_previousObserver: null,
	
	_setCurrentPage: function()
	{
		var index = this.currentImageIndex;
		if ((index+1) > this.images.length)
		{
			index = 1;
		}
		else
		{
			index = this.currentImageIndex+1;
		}
		
		this.currentPage.innerHTML = index + "&nbsp;";
	},
	
	_fadeInSelected: function()
	{
		Effect.fade(this.imgNavSliderSelected, 
		{ 
			duration: this.duration/2, 
			acceleration: 1, 
			from: 0, 
			to: 1 
		});
	},
	
	next: function(e)
	{
		Event.stop(e);
		Element.setStyle(this.imgNavSlider.PreviousButtonWrapper, { display: "none" });
		Element.setStyle(this.imgNavSlider.NextButtonWrapper, { display: "none" });
		
		Effect.fade(this.imgNavSlider.Current, 
		{ 
			duration: this.duration/2, 
			from: 1, 
			to: .5 
		});
		Effect.fade(this.imgNavSlider.Next, 
		{ 
			duration: this.duration/2, 
			from: .5, 
			to: 1
		});
		
		Effect.fade(this.imgNavSliderSelected, 
		{ 
			duration: this.duration/2, 
			acceleration: 1, 
			from: 1, 
			to: 0, 
			callback: this._fadeInSelected.bind(this) 
		});
		
		Effect.slide(this.imgNavSliderWrapper, 
		{ 
			duration: this.duration, 
			acceleration: 1,
			from: [parseInt(Element.getStyle(this.imgNavSliderWrapper, "left")), 0],
			to:   [parseInt(Element.getStyle(this.imgNavSliderWrapper, "left"))-this.offset, 0],
			callback: this._endNext.bind(this)
		});
	},
	
	previous: function(e)
	{
		Event.stop(e);
		Element.setStyle(this.imgNavSlider.PreviousButtonWrapper, { display: "none" });
		Element.setStyle(this.imgNavSlider.NextButtonWrapper, { display: "none" });
		
		Effect.fade(this.imgNavSlider.Current, 
		{ 
			duration: this.duration/2, 
			from: 1, 
			to: .5 
		});
		Effect.fade(this.imgNavSlider.Previous, 
		{ 
			duration: this.duration/2, 
			from: .5, 
			to: 1
		});
		
		Effect.fade(this.imgNavSliderSelected, 
		{ 
			duration: this.duration/2, 
			acceleration: 1, 
			from: 1, 
			to: 0, 
			callback: this._fadeInSelected.bind(this) 
		});
		
		Effect.slide(this.imgNavSliderWrapper, 
		{ 
			duration: this.duration, 
			acceleration: 1,
			from: [parseInt(Element.getStyle(this.imgNavSliderWrapper, "left")), 0],
			to:   [parseInt(Element.getStyle(this.imgNavSliderWrapper, "left"))+this.offset, 0],
			callback: this._endPrevious.bind(this)
		});
	},
	
	_endNext: function()
	{				
		var previous     = this.imgNavSlider.Previous;
		var current      = this.imgNavSlider.Current;
		var next         = this.imgNavSlider.Next;
		var rightOutside = this.imgNavSlider.RightOutside;
		
		this.currentImageIndex = (this.currentImageIndex+1 < this.images.length) ? this.currentImageIndex+1 : 0;
		this.iterations += 1;
		
		this.imgNavSliderWrapper.removeChild(this.imgNavSlider.LeftOutside);
		
		this.imgNavSlider.LeftOutside = previous;
		this.imgNavSlider.Previous    = current;
		this.imgNavSlider.Current     = next;
		this.imgNavSlider.Next        = rightOutside;
		this.imgNavSlider.RightOutside = document.createElement("img");
		
		this.imgNavSlider.RightOutside.setAttribute("src", this.path + this.smallSize + (this.currentImageIndex + 2 < this.images.length ? this.images[this.currentImageIndex+2] : this.images[(this.currentImageIndex+2) - this.images.length]) + ".jpg");
	
		Element.setStyle(this.imgNavSlider.RightOutside, 
		{ 
			left: (this.offset * (3+this.iterations)) + "px",
			opacity: .5
		});
		
		this.imgNavSliderWrapper.appendChild(this.imgNavSlider.RightOutside);
		
		this._getDescription();
		this._setCurrentPage();
		this._loadNewMainImage();
		
		Element.setStyle(this.imgNavSlider.PreviousButtonWrapper, { display: "block" });
		Element.setStyle(this.imgNavSlider.NextButtonWrapper, { display: "block" });
	},
	
	_endPrevious: function()
	{
		var leftOutside  = this.imgNavSlider.LeftOutside;
		var previous     = this.imgNavSlider.Previous;
		var current      = this.imgNavSlider.Current;
		var next         = this.imgNavSlider.Next;
		
		this.currentImageIndex = (this.currentImageIndex-1 >= 0) ? this.currentImageIndex-1 : ((this.currentImageIndex-1) + this.images.length);
		
		this.iterations -= 1;
		
		this.imgNavSliderWrapper.removeChild(this.imgNavSlider.RightOutside);
		
		this.imgNavSlider.LeftOutside  = document.createElement("img");
		this.imgNavSlider.Previous     = leftOutside;
		this.imgNavSlider.Current      = previous;
		this.imgNavSlider.Next         = current;
		this.imgNavSlider.RightOutside = next;
		
		this.imgNavSlider.LeftOutside.setAttribute("src", this.path + this.smallSize + (this.currentImageIndex - 2 >= 0 ? this.images[this.currentImageIndex-2] : this.images[(this.currentImageIndex-2) + this.images.length]) + ".jpg");
		
		Element.setStyle(this.imgNavSlider.LeftOutside, 
		{ 
			left: (this.offset * (this.iterations-1)) + "px", 
			opacity: .5
		});
		
		this.imgNavSliderWrapper.appendChild(this.imgNavSlider.LeftOutside);
		
		this._getDescription();
		this._setCurrentPage();
		this._loadNewMainImage();
	},
	
	_loadNewMainImage: function()
	{
		var current = this.mainImageCurrent;
		var reserve = this.mainImageReserve;
		
		if (this.mainImageContainer.current)
		{
			this.mainImageContainer.current = false;
			
			this.mainImageReserve.onload = function(e)
			{
				//Logger.debug("mainImageReserve onLoad");
				
				Element.setStyle(this.mainImageReserve, { zIndex: "200" });
				Element.setStyle(this.mainImageCurrent, { zIndex: "100" });
				
				Element.setStyle(this.imgNavSlider.PreviousButtonWrapper, { display: "block" });
				Element.setStyle(this.imgNavSlider.NextButtonWrapper, { display: "block" });
				
				Effect.fade(this.mainImageReserve, 
				{
					duration: this.duration,
					acceleration: 1,
					from: 0,
					to: 1
				});
			}.bind(this);
			this.mainImageReserve.setAttribute("src", this.path + this.largeSize + (this.images[this.currentImageIndex]) + ".jpg?" + this._randomString(25));
			
			Effect.fade(this.mainImageCurrent,
			{
				duration: this.duration,
				acceleration: 1,
				from: 1,
				to: 0
			});
		}
		else
		{
			this.mainImageContainer.current = true;
			
			this.mainImageCurrent.onload = function(e)
			{
				//Logger.debug("mainImageCurrent onLoad");
				
				Element.setStyle(this.mainImageReserve, { zIndex: "100" });
				Element.setStyle(this.mainImageCurrent, { zIndex: "200" });
				
				Element.setStyle(this.imgNavSlider.PreviousButtonWrapper, { display: "block" });
				Element.setStyle(this.imgNavSlider.NextButtonWrapper, { display: "block" });
		
				Effect.fade(this.mainImageCurrent, 
				{
					duration: this.duration,
					acceleration: 1,
					from: 0,
					to: 1
				});
			}.bind(this);
			this.mainImageCurrent.setAttribute("src", this.path + this.largeSize + (this.images[this.currentImageIndex]) + ".jpg?" + this._randomString(25));
			
			Effect.fade(this.mainImageReserve,
			{
				duration: this.duration,
				acceleration: 1,
				from: 1,
				to: 0
			});
		}
	},
	
	_drawImageNav: function()
	{
		//create elements
		this.imgNavSlider         = document.createElement("div");
		this.imgNavSliderWrapper  = document.createElement("div");
		this.imgNavSliderSelected = document.createElement("div");
		
		this.imgNavSlider.LeftOutside  = document.createElement("img");
		this.imgNavSlider.Previous     = document.createElement("img");
		this.imgNavSlider.Current      = document.createElement("img");
		this.imgNavSlider.Next         = document.createElement("img");
		this.imgNavSlider.RightOutside = document.createElement("img");
		
		this.imgNavSlider.PreviousButtonWrapper = document.createElement("div");
		this.imgNavSlider.NextButtonWrapper     = document.createElement("div");
		
		this.imgNavSlider.PreviousButton = document.createElement("div");
		this.imgNavSlider.NextButton     = document.createElement("div");
		
		//set attributes
		this.imgNavSlider.setAttribute("id", "imgNavSlider");
		
		this.imgNavSlider.PreviousButtonWrapper.setAttribute("id", "previousButtonWrapper");
		this.imgNavSlider.NextButtonWrapper.setAttribute("id", "nextButtonWrapper");
		
		this.imgNavSlider.PreviousButton.setAttribute("id", "previousButton");
		this.imgNavSlider.NextButton.setAttribute("id", "nextButton");
		
		this.imgNavSlider.LeftOutside.setAttribute ("src", this.path + this.smallSize + (this.currentImageIndex - 2 >= 0 ? this.images[this.currentImageIndex-2] : this.images[(this.currentImageIndex-2) + this.images.length]) + ".jpg");
		this.imgNavSlider.Previous.setAttribute    ("src", this.path + this.smallSize + (this.currentImageIndex - 1 >= 0 ? this.images[this.currentImageIndex-1] : this.images[(this.currentImageIndex-1) + this.images.length]) + ".jpg");
		this.imgNavSlider.Current.setAttribute     ("src", this.path + this.smallSize + this.images[this.currentImageIndex] + ".jpg");
		this.imgNavSlider.Next.setAttribute        ("src", this.path + this.smallSize + (this.currentImageIndex + 1 < this.images.length ? this.images[this.currentImageIndex+1] : this.images[(this.currentImageIndex+1) - this.images.length]) + ".jpg");
		this.imgNavSlider.RightOutside.setAttribute("src", this.path + this.smallSize + (this.currentImageIndex + 2 < this.images.length ? this.images[this.currentImageIndex+2] : this.images[(this.currentImageIndex+2) - this.images.length]) + ".jpg");
		
		//setup next and previous event
		this._nextObserver     = this.next.bind(this);
		this._previousObserver = this.previous.bind(this);
		this._previousRollOverObserver = function() { Element.addClassName(this.imgNavSlider.PreviousButton, "over"); }.bind(this);
		this._nextRollOverObserver     = function() { Element.addClassName(this.imgNavSlider.NextButton,     "over"); }.bind(this);
		this._previousRollOutObserver  = function() { Element.removeClassName(this.imgNavSlider.PreviousButton, "over"); }.bind(this);
		this._nextRollOutObserver      = function() { Element.removeClassName(this.imgNavSlider.NextButton,     "over"); }.bind(this);
		Event.observe(this.imgNavSlider.PreviousButtonWrapper, "mouseover", this._previousRollOverObserver);
		Event.observe(this.imgNavSlider.NextButtonWrapper,     "mouseover", this._nextRollOverObserver);
		Event.observe(this.imgNavSlider.PreviousButtonWrapper, "mouseout",  this._previousRollOutObserver);
		Event.observe(this.imgNavSlider.NextButtonWrapper,     "mouseout",  this._nextRollOutObserver);
		Event.observe(this.imgNavSlider.PreviousButtonWrapper, "click",     this._previousObserver);
		Event.observe(this.imgNavSlider.NextButtonWrapper,     "click",     this._nextObserver);
		
		//set styles
		Element.setStyle(this.imgNavSlider.LeftOutside,  { left: "0", opacity: .5 });
		Element.setStyle(this.imgNavSlider.Previous,     { left: this.offset + "px", opacity: .5 });
		Element.setStyle(this.imgNavSlider.Current,      { left: (this.offset * 2) + "px" });
		Element.setStyle(this.imgNavSlider.Next,         { left: (this.offset * 3) + "px", opacity: .5 });
		Element.setStyle(this.imgNavSlider.RightOutside, { left: (this.offset * 4) + "px", opacity: .5 });
		
		Element.setStyle(this.imgNavSlider.PreviousButtonWrapper, { opacity: 0 });
		Element.setStyle(this.imgNavSlider.NextButtonWrapper, { opacity: 0 });
		
		Element.setStyle(this.imgNavSliderWrapper,  { position: "absolute", left: 0, top: 0 });
		Element.setStyle(this.imgNavSliderSelected, { position: "absolute", left: (this.offset*2+2) + "px", top: 0, width: "77px", height: "116px", border: "1px solid #e8d2ab" });
		
		//append to the document tree - need to do top down to prevent memory leaks
		this.imgNavSlider.appendChild(this.imgNavSliderWrapper);
		this.imgNavSlider.appendChild(this.imgNavSliderSelected);
		this.imgNavSlider.appendChild(this.imgNavSlider.PreviousButtonWrapper);
		this.imgNavSlider.appendChild(this.imgNavSlider.NextButtonWrapper);
		this.imgNavSlider.appendChild(this.imgNavSlider.PreviousButton);
		this.imgNavSlider.appendChild(this.imgNavSlider.NextButton);
		
		this.imgNavSliderWrapper.appendChild(this.imgNavSlider.LeftOutside);
		this.imgNavSliderWrapper.appendChild(this.imgNavSlider.Previous);
		this.imgNavSliderWrapper.appendChild(this.imgNavSlider.Current);
		this.imgNavSliderWrapper.appendChild(this.imgNavSlider.Next);
		this.imgNavSliderWrapper.appendChild(this.imgNavSlider.RightOutside);
		
		$("imgNav").appendChild(this.imgNavSlider);
	},
	
	_initializeMainImage: function()
	{
		//create elements
		this.mainImageCurrent = document.createElement("img");
		this.mainImageReserve = document.createElement("img");
		this.mainImageLoader  = document.createElement("div");
		
		//set attributes
		this.mainImageCurrent.setAttribute("src", this.path + this.largeSize + (this.images[this.currentImageIndex]) + ".jpg?" + this._randomString(25));
		
		//set styles		
		Element.setStyle(this.mainImageCurrent, { position: "absolute", width: "309px", height: "464px", zIndex: "200" });
		Element.setStyle(this.mainImageReserve, { position: "absolute", width: "309px", height: "464px", zIndex: "100", opacity: 0 });
		Element.setStyle(this.mainImageLoader,  { postiion: "absolute", width: "309px", height: "464px" });
		
		this.mainImageContainer.appendChild(this.mainImageCurrent);
		this.mainImageContainer.appendChild(this.mainImageReserve);
		this.mainImageContainer.appendChild(this.mainImageLoader);
	},
	
	_getDescription: function()
	{
		Effect.fade(this.content, 
		{ 
			duration: this.duration/2, 
			acceleration: 1, 
			from: .75, 
			to: 0, 
			callback: function(e)
			{
				this.content.innerHTML = "";
				getDesc(this.images[this.currentImageIndex], this.category);
				Effect.fade(this.content, { duration: this.duration/2, acceleration: 1, from: 0, to: 1 });
			}.bind(this)
		});
	},
	
	_randomString: function(length)
	{
		var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
		var string_length = length || 10;
		var randomstring = '';
		for (var i=0; i<string_length; i++) {
			var rnum = Math.floor(Math.random() * chars.length);
			randomstring += chars.substring(rnum,rnum+1);
		}
		return randomstring;
	}
};