//alert("Done iCarousel");
//iCarousel (as downloaded from: http://zendold.lojcomm.com.br/icarousel/js/iCarousel-full.js) starts here
/* ************************************************************************************* *\
 * The MIT License
 * Copyright (c) 2007 Fabio Zendhi Nagao - http://zend.lojcomm.com.br
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this
 * software and associated documentation files (the "Software"), to deal in the Software
 * without restriction, including without limitation the rights to use, copy, modify,
 * merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all copies
 * or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
 * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 * 
\* ************************************************************************************* */
	window.addEvent("domready", function() {

		new iCarousel("example_3_content", {
			idPrevious: "example_3_previous",
			idNext: "example_3_next",
			idToggle: "undefined",
			idShow: "undefined",
			item: {
				klass: "example_3_item",
				size: 86
			},
			animation: {
				duration: 250,
				amount: 5
			}
		});
	});

var iCarousel = new Class({
	options: {
		animation: {
			type: "fadeNscroll",
			direction: "left",
			amount: 1,
			transition: Fx.Transitions.Cubic.easeInOut,
			duration: 500,
			rotate: {
				type: "manual",// auto || manual
				interval: 5000,// if type = auto, set the interval (ms)
				onMouseOver: "stop"// if type = auto, set the onmouseover behavior: stop || proceed
			}
		},

		item: {
			klass: "item",
			size: 100
		},

		idPrevious: "previous",
		idNext: "next",
		idToggle: "toggle",
		idShow: "show",

		onClickPrevious: Class.empty,
		onClickNext: Class.empty,
		onPrevious: Class.empty,
		onNext: Class.empty,
		onGoTo: Class.empty
	},

	initialize: function(container, options) {
		this.setOptions(options);
		this.container = $(container);
		this.aItems = $A($$('.'+ this.options.item.klass));	//Copy klass to aItems ($A does copy)
		this.isMouseOver = false;
		this.largeImage = "";
		this.itemCount = 0;
		
		//Add progress bar class
		this.imgProgBar = new progBar();
		
		//Get the number of items in the list
		this.itemCount = this.aItems.length;
		if(this.itemCount < 5)	//Fewer than max. items displayed in scroller?
			this.options.animation.rotate.type = "manual"; //Then no auto rotation
		
		if(this.itemCount){		//Not an empty photo list?
			$('ImageViewFrame').setStyle('display', 'block');
			$('example_3').setStyle('display', 'block');
			$('PhotoCarouselInfo').setStyle('height', '520px');
		}
		
		//More images available then shown in rotation view?
		//Then enable rotation
		if(this.itemCount > 5){
			if(this.options.idPrevious != "undefined" && $(this.options.idPrevious))
				$(this.options.idPrevious).addEvent("click", function(event) {
					event.stop();
					this._previous();
	
					//Reset the auto rotate timer on button clicks
					if(this.options.animation.rotate.type == "auto"){ 
						this.timer = $clear(this.timer);
						this.timer = this._autoRotate.periodical(this.options.animation.rotate.interval, this);				
					}
				}.bind(this));// check if value is not "undefined" before start search the dom with $()
			if(this.options.idNext != "undefined" && $(this.options.idNext))
				$(this.options.idNext).addEvent("click", function(event) {
					event.stop();
					this._next();
					
					//Reset the auto rotate timer on button clicks
					if(this.options.animation.rotate.type == "auto"){ 
						this.timer = $clear(this.timer);
						this.timer = this._autoRotate.periodical(this.options.animation.rotate.interval, this);				
					}
				}.bind(this));
		}	//END: if(this.itemCount > 5){
		
		if(this.options.idToggle != "undefined" && $(this.options.idToggle))
			$(this.options.idToggle).addEvent("click", function(event) {new Event(event).stop(); this._toggle()}.bind(this));

		var oAn = this.options.animation; // short hand
		switch(this.options.animation.type.toLowerCase()) {
			case "fade":
				break;
			default:
				//More images available then shown in rotation view?
				//Then enable rotation
/*				if(this.itemCount > 5){
					//Make two more copies of each item (to facilitate rotation?)
					(2).times(function() {
						this.aItems.each(function(item) {
							item.clone().injectInside(this.container);
						}.bind(this));
					}.bind(this));

					//Then add these new copies to the original list
					//So, the number of items will be multiplied by 3
					this.aItems = $A($$('.'+ this.options.item.klass));
				}	//END: if(this.itemCount){		//Not an empty photo list?
*/				
				this.aItems.each(function(item) {
					item.addEvents({
						"mouseenter": function(e) {
							e.stop();
							this.isMouseOver = true;
							if(this.options.animation.rotate.type == "auto") 
								this.timer = $clear(this.timer);
							//Replace the big image with the one under the mouse
							this._switchImg(item);
						}.bind(this),
						"mouseleave": function() {
							this.isMouseOver = false;
							if(this.options.animation.rotate.type == "auto") 
								this.timer = this._autoRotate.periodical(this.options.animation.rotate.interval, this);

						}.bind(this)
					});

					//Get the element of the first image in the list
					//so it can be displayed in the large view
					if(this.largeImage == "")	//Not initialized
						this.largeImage = item;
			
				}.bind(this));	//END: this.aItems.each(function(item)
				
				//Set the large image to the first item in the list
				if(this.itemCount){		//Not an empty photo list?
					//More images available then shown in rotation view?
					//Then enable rotation
					if(this.itemCount > 5){
						//Create the morph (transition) class used during rotation animation
						this.fx = new Fx.Morph(this.container, {duration: oAn.duration, transition: oAn.transition});
						this.atScreen = 0;
						this.prvScreen = 0;
						this.container.setStyle(oAn.direction, 0);
					}

					this.imgProgBar.setup_bar('visible'); 	// call the function setup_bar() first
					//Periodically call: this.imgProgBar.progress_bar()
					this.timer = $clear(this.timer);
					this.timer = this._progBarUpdate.periodical(250, this);				

					//Select the large image
//moved to:	_progBarUpdate			this._switchImg(this.largeImage);
				}
				else{
					$('PhotoCarouselInfo').set('html', 'No Photos Available Yet');
					$('PhotoCarouselInfo').setStyle('margin-left', '30px');
				}

				break;
		}

		if(this.options.animation.rotate.type == "auto") 
			this.timer = this._autoRotate.periodical(this.options.animation.rotate.interval, this);
	},		//END: initialize

	_progBarUpdate: function(){
		this.imgProgBar.progress_bar();
		if(this.imgProgBar.doneyet){	//Done loading images?
			this.timer = $clear(this.timer);			
			//Select the large image
			this._switchImg(this.largeImage);
		}
	},		//END: _progBarUpdate
	
	_switchImg: function(curItem) {
		//Swap the image under the mouse into the large view
		this.SrcImgEl = curItem.getElement('img');

		//Adjust dimensions for dumbass IE which doesn't support max-height, max-width
		//but, since we have to do it for IE, we have to do it for others as well
		//because the dimensions get morphed along with opacity below (and they must be,
		//otherwise, the transition is ugly)
		//Specify the function to execute after image re-size is finished
		this.srcHtWdObj = new HtWdObject();	//Object for passing values to/from AdjustImgSz (see definition below)
		this.srcHtWdObj.parent = this;
		this.ImgReSz = this._switchImgFinish;

		//Scale the image to fit our slide size without distorting aspect ratio
		//(Call "_switchImgFinish" when finished)
		this.ReSzImgClass = new AdjustImgSzClass(curItem, 375, 500, this.srcHtWdObj);
		this.ReSzImgClass.LoadImg(true);
		
		//Scale the image to fit our slide size without distorting aspect ratio
//		srcHtWdObj = new HtWdObject();	//Object for passing values to/from AdjustImgSz (see definition below)
//		AdjustImgSz(curItem, 375, 500, srcHtWdObj);
	},	//END: _switchImg

	_switchImgFinish: function() {
		//First, get the req'd elements and properties
		var thisSrc = this.SrcImgEl.getProperty('src');
		var bigPicEl = $('ImageViewFrame');
		var TgtImgEl = bigPicEl.getElement('img');								

		var height = this.srcHtWdObj.height; 
		var width = this.srcHtWdObj.width; 
		//Create the morph functions
		var BigPicShrinkFx = new Fx.Morph(TgtImgEl, {duration: 500, transition: Fx.Transitions.Cubic.easeInOut});
		var BigPicGrowFx = new Fx.Morph(TgtImgEl, {duration: 100, transition: Fx.Transitions.Cubic.easeInOut});
		
		//Get properties used to set the large image caption
		var bigPicCapEl = $('ImageViewCaption');
		var thisCap = this.SrcImgEl.getProperty('alt');
		
		//Now, fade the big image
		BigPicShrinkFx.start({"opacity":0.2});

		(function(){	//Delay
			//Now, switch the new image under the mouse into the big image
			//and bring opacity to 1
			TgtImgEl.setProperty('src', thisSrc);
//			alert("in: iCarousel: setting large image...");
			BigPicGrowFx.start({
			    'height': height,
			    'width': width,		
				'opacity':1
				});						
		}).delay(600, this);															
	
		//Set the large image caption
		bigPicCapEl.set('html', thisCap);
	},	//END: _switchImgFinish

	_previous: function() {
		switch(this.options.animation.type.toLowerCase()) {
			case "fade":
				break;

			default:
				//Decrement "rotation" position
				this.prvScreen = this.atScreen;
				//Don't go back past zero
				if(this.atScreen >= this.options.animation.amount){
					this.atScreen -= this.options.animation.amount;
					this._animate(this.atScreen, this.prvScreen);
				}
				
				break;
		}

		this.fireEvent("onPrevious", this, 20);
	},

	_next: function() {
		switch(this.options.animation.type.toLowerCase()) {
			case "fade":
				break;

			default:
				//Increment "rotation" position
				this.prvScreen = this.atScreen;
				//Don't go forward past end
				if(this.atScreen < this.aItems.length - this.options.animation.amount){
					this.atScreen += this.options.animation.amount;
					this._animate(this.atScreen, this.prvScreen);
				}
				
				break;
		}

		this.fireEvent("onNext", this, 20);
	},

	_toggle: function() {
		(this.container.getStyle("height").toInt() == 0) ?
			this.container.effect("height", { duration:1000, transition: Fx.Transitions.Sine.easeInOut }).start(this.height):
			this.container.effect("height", { duration:1000, transition: Fx.Transitions.Sine.easeInOut }).start(0);
	},

	_autoRotate: function() {
		if(this.options.animation.rotate.onMouseOver == "stop" && !this.isMouseOver) 
			this._next();
	},

	_animate: function(a, b) {
		switch(this.options.animation.type) {
			case "fade":
				break;

			case "scroll":
				break;

			case "fadeNscroll":	//Perform the fadeNscroll transition
				var that = this;
				//Chain the opacity/position/opacity changes, and start the transition
				that.fx.start({"opacity":0.75}).chain(function(){
						that.fx.start({"left": [-b * that.options.item.size,
						                        -a * that.options.item.size]
						              }).chain(function(){
						            	  that.fx.start({"opacity": 1});
					});
				});
				break;
		}
	}
});
iCarousel.implement(new Events); // Implements addEvent(type, fn), fireEvent(type, [args], delay) and removeEvent(type, fn)
iCarousel.implement(new Options);// Implements setOptions(defaults, options)

//Create an object for passing data to/from scaling function AdjustImgSz 
function HtWdObject() {
  this.height;
  this.width;
  return this;
}