////////////////////////////////////////////////////
// Image Rotate Code
////////////////////////////////////////////////////
var ImageRotate = new Class({
    
    options : {
        // time that an image will last before rotating
        ROTATE_TIME : 4000,
        // the time an image will take to fade out
        FADEOUT_TIME : 600,
        // the time an image will take to fade in
        FADEIN_TIME : 1000,        
        // if an image is not yet loaded this how long we wait before checking again
        LOADWAIT_TIME : 500
    },
    
    initialize : function(options){
        this.setOptions(options);
        this.position = 0;
        this.rotateId = null;
        this.ids = [];
        this.containDiv = $(this.options.containDiv);
        this.images = [];
        this.inheritClass = "";
        
        this.containDiv.setStyle('position', 'relative');
        var img1 = this.containDiv.getElementsByTagName('IMG');
        if(img1.length == 1){
            var newId = this.genId();
            img1[0].id = newId;
            this.ids.push(newId);
            this.inheritClass = img1[0].className;
        }
        var that = this;
        for(var i=this.ids.length; i < this.options.images.length; i++){
            // load the images that we want to rotate, and don't drop them
            // into the dom until they are completely loaded
            this.ids.push(this.genId());
            var img = new Asset.image(this.options.images[i], {id: that.ids[i],
                                                     onload: function(){
                                                        this.className = that.inheritClass;
                                                        this.setStyles({position:'absolute', top: 0, left: 0, opacity: 0});
                                                        this.injectInside(that.containDiv);
            }});
            
        }
        this.rotateId = setTimeout(function(){ that.swapImage(); }, this.options.ROTATE_TIME);
    },
    
    swapImage : function(){
        var current_el = $(this.ids[this.position]);
	this.position = ++this.position % this.ids.length;
	var next_el = $(this.ids[this.position]);
        var that = this;
	if(next_el){
            // fade the current image out
	    var ofx = new Fx.Style(current_el, 'opacity',{duration : that.options.FADEOUT_TIME});
            ofx.start(1, 0);
            
	    // fade the incomming image in
	    var ofx2 = new Fx.Style(next_el, 'opacity',{duration : that.options.FADEIN_TIME});
	    ofx2.start(0, 1);
            
            // schedule the next image rotation
 	    this.rotateId = setTimeout(this.swapImage.bind(this), this.options.ROTATE_TIME);
	} else {
	    this.position--;  // since we are not loading the first element this should never go negative
	    this.rotateId = setTimeout(this.swapImage.bind(this), this.options.LOADWAIT_TIME);
	}
    },
    
    genId : function(){
        var id;
        do {
            id = 'imgRotate_' + String(Math.random()).substring(2);
        } while($(id));
        return id;
    }
});
ImageRotate.implement(new Options);