/*
	fadeshow object
*/
function FadeShow(divName){
	/* 
		initialize params
	*/
	this._divName = divName;
	// main container
	this._container = null;
	// image canvas
	this._canvas1 = null;
	// this._canvas2 = null;
	// control buttons
	this._controlsWrapper = null;
	this._controls = null;
	this._controlButtons = new Array();
	// images
	this._images = new Array();
	this._currImage = null;
	/*
		display parameter overrides
	*/
	this._canvasSize = new Array();
	this._controlButtonSize = new Array();
	this._controlButtonHSpace = null;
	this._controlsMarginBottom = null;
	this._controlsVAlign = 'center';
	this._controlButtonNumbers = 1;
	/*
		action switches
	*/
	this._fadeOutSpeed = 300;
	this._fadeInSpeed = 300;
	// this._nextCanvas = this._canvas2;
	
	this.initialize = function(){
		/*
			initialize the container
		*/
		this._container = document.getElementById(this._divName);
		this._container.className ='fadeshow-container';
		/*
			create the canvas
		*/
		this._controlsWrapper = document.createElement('div');
		this._controlsWrapper.className = 'controls-wrapper';
		this._canvas1 = document.createElement('div');
		this._canvas1.className = 'fadeshow-canvas';
		// this._canvas2 = document.createElement('div');
		// this._canvas2.className = 'fadeshow-canvas';
		/*
			create controls
		*/
		this._controls = document.createElement('div');
		this._controls.className = 'fadeshow-controls';
		for(var i=0;i<this._images.length;i++){
			this._controlButtons[i] = new fadeShowButton(i, this);
			this._controls.appendChild(this._controlButtons[i]);
		}	// add 'clear' div
		var clearDiv = document.createElement('div');
		clearDiv.className = 'clear';
		this._controls.appendChild(clearDiv);
		/*
			add canvas and controls to container div
		*/
		// this._container.appendChild(this._controlsWrapper);
		this._container.appendChild(this._canvas1);
		// this._container.appendChild(this._canvas2);
		this._container.appendChild(this._controls);
		/*
			set display parameters
		*/
		this.setDisplayParams();
		/*
			pre-load images
		*/
		var obj = new Image();
		for(var i=0;i<this._images.length;i++){
			obj.src = this._images[i];
		}
		// load initial image
		$(this._controlButtons[0]).click();
	}
	this.setDisplayParams = function(){
		/*
			set canvas size
		*/
		if(this._canvasSize.length==0){
			this._canvasSize[0] = this._canvas1.offsetWidth;
			this._canvasSize[1] = this._canvas1.offsetHeight;
		}
		/*
			set control button sizes
		*/
		var offsetFix = 0;
		if(this._controlButtonSize.length==0){
			this._controlButtonSize[0] = this._controlButtons[0].offsetWidth;
			this._controlButtonSize[1] = this._controlButtons[0].offsetHeight;
		}else{
			for(var i=0; i<this._controlButtons.length; i++){
				offsetFix = 2;  //assume a 2px border on the control buttons
			}
		}
		/*
			center controls
		*/
		// get control button bottom margins
		if(!this._controlsMarginBottom){
			var str = this.getStyle(this._controls, 'margin-bottom');
			this._controlsMarginBottom = str.substring(0, str.length-2);
		}
		// calculate and set controls vertical position
		var yOffset = 0;
		yOffset -= parseInt(this._controlsMarginBottom)+this._controls.offsetHeight+offsetFix;
		this._controls.style.marginBottom = '0';
		
		// get control button bottom margins
		if(!this._controlButtonHSpace){
			var str = this.getStyle(this._controlButtons[0], 'margin-right');
			this._controlButtonHSpace = str.substring(0, str.length-2);
		}else{
			for(var i=0; i<this._controlButtons.length; i++){
			}
		}
		var controlsWidth = parseInt(this._controlButtonSize[0])+parseInt(this._controlButtonHSpace)+offsetFix;
		controlsWidth *= this._controlButtons.length;
		if(this._controlsVAlign == 'center'){
			this._controls.style.width = controlsWidth+'px';
			this._controls.style.marginLeft = 'auto';
			this._controls.style.marginRight = 'auto';
		}else if(this._controlsVAlign == 'left'){
			this._controls.style.cssFloat = 'left';
		}else{
			this._controls.style.cssFloat = 'right';
		}
		this._controls.style.marginBottom = '0px';
	};
	/*
		fadeshow button object
		- returns a button object w/ 'click' event listener
	*/
	function fadeShowButton(ind, item){//imageSrc, divName, canvas, currImage){
		var obj = new Object();
		obj = document.createElement('div');
		obj.setAttribute('id', item._divName+'-control-button-'+ind);
		obj.className = 'fadeshow-control-button';
		if(item._controlButtonNumbers){
			var numSpan = document.createElement('span');
			var num = document.createTextNode(ind+1);
			numSpan.appendChild(num);
			obj.appendChild(numSpan);
		}
		$(obj).bind('click', function(){
			if(item._currImage!=ind){
				//clear other button styles
				for(var i=0;i<item._controlButtons.length;i++){
					var str = item._controlButtons[i].className;
					item._controlButtons[i].className=str.replace(new RegExp("fadeshow-control-button-active\\b"), "");
				}
				//add active style to this button
				this.className += ' fadeshow-control-button-active';
				$(item._canvas1).fadeOut(item._fadeOutSpeed,function(){
					// display fixes?
					// item._canvas1.style.visibility = "hidden";
					// item._canvas1.style.display = "block";
					// switch image
					var bgImage = 'url(\''+item._images[ind]+'\')';
					$(item._canvas1).css('background-image', bgImage);
					$(item._canvas1).fadeIn(item._fadeInSpeed);
					item._currImage = ind;
				});
				
			}
		});
		return obj;
	}
	/*
		utility for getting css assigned margins
	*/
	this.getStyle = function(elem,styleProp){
		if (elem.currentStyle){
			styleProp = this.toCamelCase(styleProp);
			var y = elem.currentStyle[styleProp];
		}else if (window.getComputedStyle){
			var y = document.defaultView.getComputedStyle(elem,null).getPropertyValue(styleProp);
		}
		return y;
	}
	/*
		convert a string to camel case
	*/
	this.toCamelCase = function(input) {
	  var inputArray = input.split("-");
	  if (inputArray.length == 1) {
	    return inputArray[0];
	  } else {
	    var camelCase = inputArray[0];
	    for (var i = 1, len = inputArray.length; i < len; i++) {
	      camelCase += inputArray[i].charAt(0).toUpperCase() + inputArray[i].substring(1);
	    }
	    return camelCase;
	  }
	}
	/*
		get ie version
	*/
	function getMsieVersion() {
		var ua = window.navigator.userAgent
		var msie = ua.indexOf ( "MSIE " )

		if ( msie > 0 )      // If Internet Explorer, return version number
		  return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
		else                 // If another browser, return 0
	   return 0
	}
}