//Javascript that is used for the homepage


function _debug(msg) {
    document.getElementById("debug").value += msg + "\n";
 }


 // Array of images (Thumbnails) for highlights. can be generated dynamically
 // Format:
 // highlightImages[<element_id>]["over"] = "image name for activ status";
 // highlightImages[<element_id>]["out"]  = "image name for normal status";
 
var highlightImages = {
    "highlight_imagesmall:1": {"over": "/g_abdunkeln.png", "out": "/g_.gif"},
    "highlight_imagesmall:2": {"over": "/g_abdunkeln.png", "out": "/g_.gif"},
    "highlight_imagesmall:3": {"over": "/g_abdunkeln.png", "out": "/g_.gif"},
    "highlight_imagesmall:4": {"over": "/g_abdunkeln.png", "out": "/g_.gif"}
};


var highlightTeaser = {

    oTopic:       null,
    numImages:    null,
    actImageId:   "",
    pos:          1,               // position of first highlight
    imgDir:       "img/",
    delay:        8000,            // time delay in ms
    timeoutId:    null,
    initialized:  false,

    init: function() {
       
        if (!document.getElementById) {
            alert("no id");
            return;
        }

        var images = document.getElementsByName("highlight_imagesmall");
        if (!images) {
            alert("no imgages");
            return;
        }
        
        

        var img;
        for (var i=0; i<images.length; i++) {
            img = images[i];            
            img.onmouseover = function () {
                //highlightTeaser.setImgOverState(this);
                var arr = this.id.split(":");

                

                highlightTeaser.show(arr[1]);
                //new_callIVW ('137AN0S2009o');
            }
            img.onmouseout = function () {
                highlightTeaser.setImgOutState(this);
            }
            img.onclick = function () {
                var arr = this.id.split(":");
                highlightTeaser.show(arr[1]);
            }
        }

        this.oTopic = document.getElementById("highlight_container");
        this.numImages = 0;
        for (img in highlightImages) {
            this.numImages++;
        }
        this.initialized = true;
        this._showTopic();
    },

    setImgOverState: function (img) {
        img.src = this.imgDir + highlightImages[img.id].over;
    },

    setImgOutState: function (img) {
        if (img.id == this.actImageId) { return; }
        img.src = this.imgDir + highlightImages[img.id].out;
    },

    showNext: function () {
        if (++this.pos > this.numImages) {
            this.pos = 1;
        }

        this._showTopic();
    },

    show: function (pos) {
        if (pos < 1) {
            this.pos = 1;
        } else if (pos > this.numImages) {
            this.pos = this.numImages;
        } else {
            this.pos = pos;
        }
        this.clearTimer();
        this._showTopic();
    },

    setTimer: function () {
        this.timeoutId = window.setTimeout("highlightTeaser.showNext()", this.delay);
    },

    clearTimer: function () {
        if (this.timeoutId !== null) {
            window.clearTimeout(this.timeoutId);
            this.timeoutId = null;
        }
    },

    _showTopic: function() {
        if (!this.initialized) { return; }

        var newTopic = document.getElementById("highlight_collection_"+this.pos);
        if (!newTopic) {
            return;
        }

      

        // handle image over out states
        if (this.actImageId != "") {
            // reset previous over state
            var img = document.getElementById(this.actImageId);
            this.actImageId = "";
            this.setImgOutState(img);
        }

        this.actImageId = "highlight_imagesmall:"+this.pos;
        // set image over state of actual topic
        this.setImgOverState(document.getElementById(this.actImageId));

        // set new topic    
       
       // $(this.oTopic).style.display = "none";
        this.oTopic.innerHTML = newTopic.innerHTML;
       // $(this.oTopic).innerHTML = $(newTopic).innerHTML;
       //$(this.oTopic).appear({ duration: 4.0 });

        this.setTimer();
    }
}

document.observe("dom:loaded", function() {
  highlightTeaser.init(); 
});


function toggleDiv(){
     $('readmore').toggle();
}