//.....................................................................................................
//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