var FaderClass = function() {
    this.delay = 4000;
    this.isStarted = true;
    this.currentId = 0;
    this.isDebug = false;
}

FaderClass.prototype.json;
FaderClass.prototype.list;
FaderClass.prototype.containerId;
FaderClass.prototype.container;

FaderClass.prototype.setJson = function(j) {
    this.json = j;
    this.list = this.json.result.list;
}

FaderClass.prototype.setContainerId = function(c) {
    this.containerId = c;
    this.container = $("#" + this.containerId);
}

FaderClass.prototype.init = function() {
    //this.createDebugConsole();
    this.preloadImage();
    this.create();
    var fader = this;
    setTimeout(function(){
                fader.start();
              }, this.delay );    
    //this.initListeners();
}

FaderClass.prototype.preloadImage = function() {
    var cache = new Array();
    //this.debugMsg("size: " + this.list.length);
    for (var i = 0; i < this.list.length; i++) {
        var cacheImage = document.createElement('img');
        cacheImage.src = this.list[i].img;
        cache.push(cacheImage);
    }
    return cache;
}

FaderClass.prototype.setImageSrc = function(src) {
    $("#" + TagId.image).get(0).src = src;
}

FaderClass.prototype.nextSrc = function() {
    //this.debugMsg("nextSrc: " + this.currentId + " is " + this.list[this.currentId].img);
    $("#" + TagId.image).attr("src", this.list[this.currentId].img);
}




FaderClass.prototype.create = function() {
    var div = "<div class='imgFader'><img id='" + TagId.image + "' src='" + this.list[this.currentId].img + "' /><div id='" + TagId.infobulle + "' class='infobulle'></div></div>";
    this.container.append(div);
    this.nextSrc();
}

FaderClass.prototype.createInfobulleContent = function() {
    var element = this.list[this.currentId];
    var div = "<div><h3 class='infobulle'>" + element.title + "</h3>";
    div += "<ul><li>" + element.img + "</li><li>" + element.url + "</li></ul></div>";
    //div += "<img src='" + element.img + "' />";
    return div;
}


FaderClass.prototype.oldImg = function() {
    var fader = this;
    if (this.isStarted) {
        this.incrementId();
        $("#" + TagId.image).fadeOut(500, function() {
            if (fader.isStarted) {
                fader.newImg();
                //fader.debugMsg("oldImg: " + fader.currentId + " is " + fader.isStarted);
            }
        });
    }
}

FaderClass.prototype.incrementId = function() {
    var old = this.currentId;
    /*var id = this.currentId = old + 1;
    if (this.currentId == this.list.length)
        id = this.currentId = 0;*/
    var id = this.currentId = parseInt(old + 1) % this.list.length;
    //this.debugMsg("incrementId = {size: " + this.list.length + ", old: " + old + ", new: " + id + "}");
    return id;
}

/***/
FaderClass.prototype.newImg = function() {
    var fader = this;
    this.nextSrc();
    if (this.isStarted) {
        $("#" + TagId.image).fadeIn(500, function() {
            if (fader.isStarted) {
                setTimeout(function(){
                    if (fader.isStarted) {
                        fader.oldImg();
                        //fader.debugMsg("newImg: " + fader.currentId + " is " + fader.isStarted);
                    }
                  }, fader.delay );
            }
        });
    }
}

FaderClass.prototype.stop = function() {
    this.isStarted = false;
    this.showInfobulle();
}

FaderClass.prototype.start = function() {
    this.hideInfobulle();
    this.isStarted = true;
    this.oldImg();
}

FaderClass.prototype.showInfobulle = function() {
    var info = $("#" + TagId.infobulle);
    info.html( this.createInfobulleContent( ) );
    info.slideDown("slow");
}

FaderClass.prototype.hideInfobulle = function() {
    var info = $("#" + TagId.infobulle);
    info.slideUp("slow");
}

FaderClass.prototype.initListeners = function() {
    var fader = this, div = $("#" + TagId.image);
    div.bind("mouseover", function() { fader.stop(); } );
    div.bind("mouseout", function() { fader.start(); } );
}

FaderClass.prototype.killListeners = function() {
    var fader = this, div = $("#" + this.containerId);
    div.unbind("mouseover", function() { fader.stop(); } );
    div.unbind("mouseout", function() { fader.start(); } );
}

FaderClass.prototype.debugMsg = function(msg) {
    if (this.isDebug)
        $("#debuggerDisplay").append("<p style='color:white'>" + msg + "</p>");
}


FaderClass.prototype.createDebugConsole = function() {
    if (this.isDebug)
        $("<div id='debuggerDisplay'><h1>DEBUG CONSOLE</h1></div>").prependTo( 'body' );
}