/**
 * @author markbranly
 */
Showcase = function(options){
	var self = this;

	this.options = {
		maxWidth: 				null, 					// Maximum width that the primary image can be
		maxHeight: 				null, 					// Maximum height that the primary image can be
		thumbLinkClass:			'ThumbLink',			// Class for thumb links
		mainImageId:			"MainImageContainer",	// This should be the CONTAINER wrapping the primary image
		current:				null					// The image currently displayed as the primary image
	};

	this.imageLarge = null;
	this.imageContainer = null;
	this.thumbs = new Array();

	this.current = null;
	this.loaded = {};


	this.checkSize = function(dim){
		var tooWide = self.options.maxWidth && dim.width > self.options.maxWidth;
		var tooTall = self.options.maxHeight &&  dim.height > self.options.maxHeight;

		try{
			if ( tooWide || tooTall ) {
				var ratio = null;
				if ( tooWide ){
					ratio = self.options.maxWidth/dim.width;
					self.imageLarge.width = self.options.maxWidth;
					self.imageLarge.height = Math.floor(ratio*dim.height);
				}
				if (  tooTall ){
					ratio = self.options.maxHeight/dim.height;
					self.imageLarge.height = self.options.maxHeight;
					self.imageLarge.width = Math.floor(ratio*dim.width);
				}
			} else {
				self.imageLarge.height = dim.height;
				self.imageLarge.width = dim.width;
			}
		} catch (e){
			if ( console )console.log(e);
		}
	}

	this.setCurrent = function(el){
		if (self.current) {
			self.current.removeClassName("Current");
		}
		self.current = el;
		self.current.addClassName("Current");
	}

	this.swap = function( el ){
		if( self.imageLarge.src == el.href )return false;

		if( !self.loaded[el.href] ){
			// initialize transition state
			el.fire('showcase:loading', {id:el.id} );
			self.imageContainer.addClassName("Loading");
			// load the new image
			var newImg = new Image();
			newImg.onload = function(){
				self.loaded[el.href] = {width: newImg.width, height: newImg.height};
				self.checkSize(self.loaded[el.href]);
				// set image attributes
				self.imageLarge.src = newImg.src;
				self.imageLarge.title = el.getElementsByTagName('img')[0].title;
				self.imageLarge.alt = el.getElementsByTagName('img')[0].alt;
				// set transition effect and CSS hook
				self.imageContainer.removeClassName("Loading");
				// clean up
				self.setCurrent( el );
				el.fire('showcase:loaded', {id:el.id} );
			}
			newImg.src = el.href;
		} else {
			self.checkSize(self.loaded[el.href]);
			self.imageLarge.src = el.href;
			self.setCurrent( el );
		}
		el.fire('showcase:swapped', {id:el.id} );
		return false;
	}

	self.mergeOptions = function( source, destination ){
		for ( var i in source ){
			if( typeof destination[i] !== "undefined" ){
				if( typeof destination[i] === "object" && typeof source[i] === "object" )
					destination[i] == self.mergeOptions( source[i], destination[i] );
				else
					destination[i] = source[i];
			} else {
				if( console )
					console.log( 'AnimatedBackground:  Warning - unrecognized option, '+i+' = '+source[i] );
			}
		}
		return destination;
	}

	this.initialize = function(options){
		if (options) {
			this.options = this.mergeOptions(options, this.options);
		}
		this.thumbs = $$('a.'+this.options.thumbLinkClass);
		this.imageContainer = $(this.options.mainImageId);
		this.imageLarge = this.imageContainer.getElementsByTagName('img')[0];

		//this.imageLarge = $('MainImage');



		this.thumbs.each(function(name,index){
			self.thumbs[index].onclick = function(){self.swap(this);return false;}
		});
		//console.log(self);
		this.imageLarge.onload = function(){
			self.loaded[self.imageLarge.src] = {
				width: self.imageLarge.width,
				height: self.imageLarge.height
			};
			self.checkSize(self.loaded[self.imageLarge.src]);
			self.imageLarge.onload = null;
		}
		if ( this.options.current  ){
			try{
				this.setCurrent( $(this.options.current) );
			}catch(e){
				if( console ) console.log(e);
			}
		}
		if (!this.current) {
			this.setCurrent( this.thumbs[0] );
		}
	};
	this.initialize(options);
}