var RandomImage = function() {
    this.initialize.apply(this, arguments);
}
RandomImage.prototype = {
    initialize: function(panelId, approot, imageSettings, initImage, interval, fade, crossfade, fadeFirst) {
        this._panel = document.getElementById(panelId);
        this._image = document.getElementById(panelId).getElementsByTagName('IMG')[0];
        this._approot = approot;
        this._imageSettings = imageSettings;
        this._total = this._imageSettings.length;
        this._loadImages();
        this._current = initImage;
        if (interval) this._interval = interval;
        this._fade = fade;
        this._crossFade = crossfade;
        var me = this;
        if (fadeFirst) {
            this.swapImage(0, false);
        } else {
            setTimeout(function() {
                me.swapImage(100, true);
            }, me._interval);
        }
    },
    swapImage: function(opacity, isFadeout) {
        var _image = this._image;
        var me = this;
        if (!this._fade) {
            var _next = this._getNext();
            this._image.src = this._images[_next].src;
            setTimeout(function() { me.swapImage(0, isFadeout) }, me._interval);
            return;
        }
        if (isFadeout) {
            if (this._crossFade) {
                this._setCurrentAsBackground();
                this.swapImage(0, false); //go direct to next fade in
                return;
            }
            if (opacity >= 0) {
                this._changeOpac(_image, opacity);
                opacity -= me._opacity_change;
                if (opacity > 0) {
                    setTimeout(function() { me.swapImage(opacity, true) }, me._opacity_changeTime);
                } else {
                    opacity = 0;
                    var _next = this._getNext();
                    this._image.src = this._images[_next].src;
                    setTimeout(function() { me.swapImage(opacity, false) }, me._opacity_changeTime);
                }
            }
        } else {
            if (opacity <= 100) {
                this._changeOpac(_image, opacity);
                opacity += me._opacity_change;
                if (opacity > 100) {
                    setTimeout(function() { me.swapImage(opacity, true) }, me._interval);
                } else {
                    setTimeout(function() { me.swapImage(opacity, false) }, me._opacity_changeTime);
                }
            }
        }
    },
    _setCurrentAsBackground: function() {
        var _current = this._image.src;
        var _next = this._getNext();

        this._image.src = this._images[_next].src;
        var _obj = this._panel;
//	alert(_obj.tagName);
        var _style = 'background:url(' + _current + ') no-repeat';
        if (document.all) _obj.style.backgroundImage = 'url(' + _current + ')';
        else _obj.setAttribute('style', _style);
        _obj.style.width = this._image.offsetWidth + 'px';
        _obj.style.height = this._image.offsetHeight + 'px';
	_obj.style.margin='0 auto';
	//_obj.style.border='1px solid red';


    },
    _getNext: function() {
        var _index = this._current + 1;
        if (_index >= this._total) _index = 0;
        this._current = _index;
        return _index;
    },
    _changeOpac: function(ele, opacity) {
        if (opacity == 100) opacity = 99.999;
        var object = ele.style;
        object.opacity = (opacity / 100);
        object.MozOpacity = (opacity / 100);
        object.KhtmlOpacity = (opacity / 100);
        object.filter = "alpha(opacity=" + opacity + ")";
    },
    _loadImages: function() {
        var _total = this._imageSettings.length;
        for (var i = 0; i < _total; i++) {
            var _image = new Image();
            _image.src = this._approot + 'webroot/' + this._imageSettings[i].filePath + '/' + this._imageSettings[i].fileName;
            this._images.push(_image);
        }
    },
    _current: false,
    _images: [],
    _imageSettings: false,
    _opacity_change: 3,
    _opacity_changeTime: 10,
    _interval: 4000,
    _crossFade: 1,
    _fade: 1
}