/* Copyright 2010 Xsevo */
var _xsRotatorObjectIdx = 0;
var xsRotator = Class.create();
xsRotator.prototype = {
    Delay:10,Duration:0,Target:null,
    Controls:null,ControlMode:0,ControlLocation:0,ControlFadeDuration:0.3,HideControls:false,
    ClassBase:'xs-rotator',
    Images:[],ImageCount:0,LoadImg:null,Idx:0,
    Path:'/',PathPrefix:'banner/',FilePrefix:'f-',
    Paused:0,
    Started:false,Loaded:{},Actions:['Pause', 'Play'],Buttons:[],
    ObjectIdx:0,ObjectBase:'xsRotator',ObjectName:'',
    initialize: function(options) {
        if (options) Object.extend(this, options);
        this.setupObject();
        if (this.Target) this.Target = $(this.Target);
        if (!this.Target) return;
        if (this.Controls) this.Controls = $(this.Controls);
        this.ImageCount = this.Images.length;
        if (!this.ImageCount) return;
        Element.setStyle(this.Target.parentNode, {display:'block'});        
        this.buildSlides();
        this.setupControls();
        this.execute(false);
    },
    buildSlides: function() {
        var size = Element.getDimensions(this.Target);
        this.Back = document.createElement('div');
        this.Front = document.createElement('div');
        Element.setStyle(this.Back, {'z-index':1, width:size.width, height:size.height});
        Element.setStyle(this.Front, {'z-index':2,  width:size.width, height:size.height});
        this.Target.appendChild(this.Back);
        this.Target.appendChild(this.Front);
    },
    imagePath: function(image) {
        return image.RemoteURL?image.RemoteURL:this.Path+this.PathPrefix+this.FilePrefix+image.PhotoFile;
    },
    setupControls: function() {        
        if (!this.Controls || (this.ControlMode <= 0)) return;
        var buttons = [];
        var buf = '<ul>';
        if (this.ControlMode > 1) {
            for (var i=0; i<this.Images.length;i++) {
                var el_id = this.getIdxElId(i);
                buttons.push(el_id);
                buf += '<li id="'+el_id+'" class="'+this.ClassBase+'-idx" ><a href="#" onclick="return '+this.ObjectName+'.click('+i+');">'+(i+1)+'</a></li>'
            }
        }
        buf += '<li class="'+this.ClassBase+'-action"><a id="'+this.ObjectName+'-action" href="#" onclick="return '+this.ObjectName+'.action();">'+this.Actions[this.Paused]+'</a></li><li class="'+this.ClassBase+'-arr"><a title="Previous" href="#" onclick="return '+this.ObjectName+'.click(0,1);">&laquo;</a></li><li class="'+this.ClassBase+'-arr"><a title="Next" href="#" onclick="return '+this.ObjectName+'.click(0,2);">&raquo;</a></li></ul>';

        this.Controls.innerHTML = buf;
        this.Controls.addClassName(this.ClassBase+'-ctrl-l'+this.ControlLocation);
        
        for (var i=0; i<buttons.length;i++) {
            try {
                var b = buttons[i];
                var el = $(b);
                if (el) this.Buttons.push(el);
            } catch(e) {}
        }

        this.updateIndices();
        
        Event.observe(this.Target, 'mouseover', this.showControls.bind(this, true), true);
        Event.observe(this.Target, 'mouseout', this.showControls.bind(this, false), true);
    },
    setActionText: function() {
        try {
            var el = $(this.ObjectName+'-action');
            if (el) el.innerHTML =  this.Actions[this.Paused];
        } catch(e) {}
    },
    click: function(idx, f) {
        if (!f) {
            this.setIdx(idx);
        } else {
            var i = this.Idx;
            if (f == 1) {
                if (i>1) { i-=2; } else if (i <= 1) { i = this.ImageCount - (2 - i); } 
            }             
            this.setIdx(i);
        }
        
        if (this.Paused) {
            this.cycle(false,false);
        } else {
            this.execute(false);
        }
        return false;
    },
    action: function() {
        if (this.Paused) { this.execute(); } else { this.cancel(); }
        this.Paused = 1 - this.Paused;
        this.setActionText();
        return false;
    },
    setIdx: function(idx) {
        this.Idx = idx;
    },
    getIdxElId: function(idx) {
      return this.ObjectName+'Idx'+idx;
    },
    showControls: function(show) {
        if (this.HideControls) {
            new Effect.Opacity(this.Controls, {duration:this.ControlFadeDuration, from:(show?0.0:.999), to:(show?.999:0)});             
        } else {
            this.Controls.setStyle({opacity:1});
        }
    },
    updateIndices: function() {
        var c = this.ClassBase+'-idx-current';
        for (var i=0; i<this.Buttons.length;i++) {
            try {
                var b = this.Buttons[i];
                if (i == this.Idx) { b.addClassName(c); } else { b.removeClassName(c); }
            } catch(e) {}
        }
    },
    setupObject: function() {
        this.ObjectIdx = _xsRotatorObjectIdx;
        this.ObjectName = this.ObjectBase+this.ObjectIdx;
        window[this.ObjectName] = this;
        _xsRotatorObjectIdx++;
    },
    cancel: function() {
        if (!this.Executer) return;        
        try {
            this.Executer.stop();
        } catch(e) { }
        this.Executer = 0;
    },
    fade: function() {
        new Effect.Appear(this.Front, {duration:this.Duration, afterFinish:this.cycle.bind(this, this.Executer, false) });
    },
    cycle: function(executer, fade) {
        var current = this.Images[this.Idx];
        if (!executer) this.draw(this.Front, current);
        if (fade) { this.fade(); return; }
        this.updateIndices();
        this.draw(this.Back, current);
        this.setIdx( this.Idx >= (this.ImageCount-1) ? 0 : (this.Idx+1)  );
        this.Front.setStyle({display:'none'});        
        this.draw(this.Front, this.Images[this.Idx]);
     },
     draw: function(target, image) {
         var image_path = this.imagePath(image);
         if (image.URL) {
             target.innerHTML = '<a href="' + image.URL + '"'+ (image.Title?' title="'+image.Title+'"':'')+'><img src="' + image_path +'" alt="'+image.Title+'" /></a>';
         } else {
             target.innerHTML = '<img src="' + image_path +'" alt="'+image.Title+'" />';            
         }
     },
    execute: function(fade) {
        this.cancel();
        this.Executer = new PeriodicalExecuter(this.cycle.bind(this,true), this.Delay);
        this.cycle(false,fade);
    }
};