//.....................................................................................................
//Images preloader arg( array of the images to monitor, function reference to run after complete, progressbar container id)
var ImagePreload = Class.create({
 initialize:function(ImageArray,onComplete,progressCont) {
    this.ImageArray = ImageArray;
	this.onComplete = onComplete;
    this.iLength = this.ImageArray.length;
	if ( this.iLength < 1 ) { return false; }
	this.Loaded = 0;
	if( typeof(progressCont) == 'undefined' ){
		var showLoading = document.createElement('div');
		showLoading.id = 'imgLoadProgress';
		this.progressCont = 'imgLoadProgress';
		document.body.appendChild(showLoading);
		}
	else
		this.progressCont = progressCont;
	$(this.progressCont).setStyle({margin:'0px auto',width:'200px', height:'15px',padding:'2px', border:'2px solid #dfdfdf', overflow:'hidden'});
	$(this.progressCont).update('<div style="text-align: center;font-size: 10px;height: 15px;background: #2a2a2f;color: #fff;font-weight: bold;" id="barr">Loading Images Please Wait...</div>');
    for( var i = 0; i < this.iLength; i++ ) {
       this.preLoadImage(ImageArray[i]);
    }
 },
 preLoadImage: function(src) {
	var oImage = new Image();
	oImage.onload = (function(src){
		   this.Loaded++;
		   if ( this.Loaded == this.iLength ) {
				$(this.progressCont).remove();
				this.onComplete();
			}
			else {
				var percent = Math.round(( this.Loaded * 200) / this.iLength);
				$('barr').setStyle({width:percent+'px'}).update(this.Loaded + ' / ' + this.iLength);
			}
	}).bind(this);
	oImage.src = src;        // Image Object Source Path
 }
});
//.....................................................................................................

//fade appear images:
var FadeAppear = Class.create({
	 initialize:function(Containers, trans, dur) {
		this.Containers = Containers;
		this.cur = 0;
		this.next = 1;
		this.dur = dur;
		this.trans = trans;
		this.frequency = trans + dur;
		for( i = 1; i<this.Containers.length; i++){ 
									  this.Containers[i].setStyle({opacity:'0.001'});
									  }
		if (this.Containers.lenght <= 0 ) { return false; }
		this.registerCallback();
	 },
	 registerCallback: function() {
		this.timer = setInterval(this.rotateImage.bind(this), this.frequency * 1000);
	 },
	 rotateImage: function() {
		  new Effect.Parallel([
				new Effect.Opacity(this.Containers[this.cur], {sync: true, to: 0.001, from: 0.999}),
				new Effect.Opacity(this.Containers[this.next], {sync: true, to: 0.999, from: 0.001})
		  ],{duration:this.dur});
		  this.cur = this.next;
		  this.next = this.cur + 1
		  if ( this.cur == this.Containers.length -1 ) { this.next = 0 }
	 }
	}); // end FadeAppear



//class to rotate images
var ImageSlide = Class.create({
	initialize:function(option){
		//initialize by argument:
		this.slideContainer = option.slideContainer;	//container of the slide wich contains the element to move/slide
		this.slideElement = option.slideElement;		//tag name of the elements
		this.isAutoSlide = option.isAutoSlide?option.isAutoSlide:true;	//check whether the slide rotates automatically?
		this.slideSpeed = option.slideSpeed?option.slideSpeed:0.8;	//spped of the elements to move
		this.autoSlideInterval = option.autoSlideInterval?option.autoSlideInterval:3.0;	//time in second of auto slide
		this.pauseButton = option.pauseButton;	// id of the button to toggle play/pause.
		this.nextButton = option.nextButton;	//id of the button to go next slide
		this.previousButton = option.previousButton;	//id of the button to go previous slide
		this.isVertical = option.isVertical?option.isVertical:false;	//option to set slide vertically
		this.oldFwd = this.fwd = option.isForward?option.isForward:false;	//set default direction of the autoSlide.
		//core initialization:
		this.isSlidePaused = false;
		this.isMasterPaused = false;
		this.intervalTimer;
		this.playSlideTimer;
		this.elements = $(this.slideContainer).select(this.slideElement);
		if( option.Random ){
			var x = Math.round(Math.random()*this.elements.length);
			var r = 0;
			var tmpElems = $(this.slideContainer).select(this.slideElement);
			for(i=0; i<this.elements.length; i++){
				if(x<this.elements.length)
					this.elements[i] = tmpElems[x++];
				else
					this.elements[i] = tmpElems[r++]
				}
			}
		
		//initialize events:
		if( this.pauseButton ) $(this.pauseButton).onclick = this.togglePlayPause.bind(this);
		if( this.nextButton ) $(this.nextButton).onclick = this.forwardSlide.bind(this);
		if( this.previousButton ) $(this.previousButton).onclick = this.rewindSlide.bind(this);
		for(i=0;i<this.elements.length;i++){
			this.e = this.elements[i];
			this.e.onmouseover = this.pauseSlide.bind(this); 
			this.e.onmouseout = this.playSlide.bind(this);
			}
		if( this.isAutoSlide )
			this.autoSlideAdvance();
		},
	pauseSlide:function(){
		this.isSlidePaused = true;
		},
	playSlide:function(){
		this.isSlidePaused = false;
		if( this.playSlideTimer ) clearInterval(this.playSlideTimer);
		},
	togglePlayPause:function(){
		this.isMasterPaused = !this.isMasterPaused;
		if( this.playSlideTimer ) clearInterval(this.playSlideTimer);
		},
	forwardSlide:function(){
		this.fwd = true;
		if( this.isAutoSlide )
			this.autoSlideAdvance();
		else
			this.slide();
		this.fwd = this.oldFwd;
		},
	rewindSlide:function(){
		this.fwd = false;
		if( this.isAutoSlide )
			this.autoSlideAdvance();
		else
			this.slide();
		this.fwd = this.oldFwd;
		},
	autoSlideAdvance:function(){
		if( this.intervalTimer )
			clearInterval(this.intervalTimer);
		this.slide();
		this.intervalTimer = setInterval(this.autoSlideAdvance.bind(this), this.autoSlideInterval * 1000);
		},
	reSort:function(elements){
		if( this.fwd ){
			this.tmp = elements[elements.length-1];
			for(i = elements.length-1;i>0;i--)
				elements[i]=elements[i-1];
			elements[0] = this.tmp;
			}
		else{
			this.tmp = elements[0];
			for(i = 0;i<elements.length-1;i++)
				elements[i]=elements[i+1];
			elements[elements.length-1] = this.tmp;
			}
		return elements;
		},
	slide:function(){
		if( this.isSlidePaused || this.isMasterPaused ) return;
		this.elements = this.reSort(this.elements);
		this.totalElements = this.elements.length;
		if( !this.isVertical ){
			for(i=0;i<this.elements.length;i++){
				this.e = this.elements[i];
				if( !this.fwd && i == this.totalElements-1 )
					this.e.setStyle({left: (this.totalElements-1)*this.e.getWidth()+'px'});
				else if( this.fwd && i == 0 )
					this.e.setStyle({left: '-' + this.e.getWidth()+'px'});
				this.e.morph('left:'+(i-1)*(this.e.getWidth())+'px',{duration:this.slideSpeed});
				}
			}
		else{
			for(i=0;i<this.elements.length;i++){
				this.e = this.elements[i];
				if( !this.fwd && i == this.totalElements-1 )
					this.e.setStyle({top: (this.totalElements-1)*this.e.getHeight()+'px'});
				else if( this.fwd && i == 0 )
					this.e.setStyle({top: '-' + this.e.getHeight()+'px'});
				this.e.morph('top:'+(i-1)*(this.e.getHeight())+'px',{duration:this.slideSpeed});
				}
			}
			
		this.pauseSlide();
		clearInterval(this.playSlideTimer);
		this.playSlideTimer = setInterval(this.playSlide.bind(this),this.slideSpeed*1000);
		}
	} );
//rotate images