/**
 * @author raketentim
 */
window.addEvent('domready', function(){

    var url = "content1.html";
    var elements = 112;
    var url2 = "content1.html";
    var url3 = "content1.html";
    var url5 = "year1914.php";
    var next = 0;
    var id = 0;
    var active;
    var zoomlevel = 0;
    var actelement = 0;
    var actyear = 0;
    var lastact = 0;
    var nextprev = 0;
    
    /* ---> changes on mouseenter <---
     * on mouseenter change bgcolor of square, change back bgcolor of last active square, load content.html of the event to #log, link of the previous and the next button (besides the red stroke)
     * on click fix red square, change image next to #log
     */
    $ES('div.tlelement1, div.tlelement2, div.tlelement3, div.tlelement4, div.tlelement5, div.tlelement6, div.tlelement7').addEvent('mouseenter', function(rollin){
        rollin = new Event(rollin).stop();
        
        $ES('div.tlelement1, div.tlelement2, div.tlelement3, div.tlelement4, div.tlelement5, div.tlelement6, div.tlelement7').addEvent('click', function(pressed){
            pressed = new Event(pressed).stop();
            
            if (actelement != id) {
                actelement = id;
                
                $('tlimg').setStyle('background-image', 'url(img/big/tlimg' + actelement + '.jpg)');
                $('sldico').setStyle('background-image', 'url(img/slideshow.png)');
                active = 1;
                
                $$('#' + lastact).setStyle('background-color', '#888888');
            };            
            lastact = actelement;
        });
        
        //-------------------> change Ajax URL, color, prev link, next link, id
        
        url = ('content' + this.getProperty('id') + '.html');
        new Ajax(url, {
            method: 'get',
            update: $('log')
        }).request();
        
        this.setStyle('background-color', '#ef3230');
        
        pref = (this.getProperty('id') - (-1));
        next = (this.getProperty('id') - 1);
        id = this.getProperty('id');
        url2 = ('content' + ((id) - 1) + '.html');
        url3 = ('content' + (this.getProperty('id') - (-1)) + '.html');        
    });
    
    
    /* ---> change back on rollout <---*/
    
    $ES('div.tlelement1, div.tlelement2, div.tlelement3, div.tlelement4, div.tlelement5, div.tlelement6, div.tlelement7').addEvent('mouseleave', function(rollout){
        rollout = new Event(rollout).stop();
        
        if (id != actelement) {
            this.setStyle('background-color', '#888');
        };
        
        if (nextprev == 1) {
            url4 = ('content' + actelement + '.html');
            
            new Ajax(url4, {
                method: 'get',
                update: $('log')
            }).request();
        };
    });
    
    
    /*
     * linear navigation via previous/next buttons
     */
    $ES('#next', '#pref').addEvent('mouseenter', function(changenextin){
        changenextin = new Event(changenextin).stop()
        nextprev = 1;
    });
    
    $ES('#next', '#pref').addEvent('mouseleave', function(changenextout){
        changenextout = new Event(changenextout).stop()
        nextprev = 0;
    });
    
    /*
     *click previous button:
     *change #log content
     */
    $ES('#pref').addEvent('click', function(previous){
        previous = new Event(previous).stop();
        lastact = (actelement);
        actelement = ((actelement) - 1); //change active element
        previous = new Event(previous).stop();
        $ES('#' + actelement).setStyle('background-color', '#ef3230'); //change bgcolor of new active element to red
        $ES('#' + lastact).setStyle('background-color', '#888'); //change bgcolor of old active element to grey
        $('tlimg').setStyle('background-image', 'url(img/big/tlimg' + actelement + '.jpg)'); //change image besides the text
        url2 = ('content' + (actelement) + '.html');
        new Ajax(url2, {
            method: 'get',
            update: $('log')
        }).request(); //load new content to #log
    });
    
    $ES('#next').addEvent('click', function(next){
        next = new Event(next).stop();
        lastact = (actelement);
        actelement = ((actelement) - (-1)); //change active element
        next = new Event(next).stop();
        $ES('#' + actelement).setStyle('background-color', '#ef3230'); //change bgcolor of new active element to red
        $ES('#' + lastact).setStyle('background-color', '#888'); //change bgcolor of old active element to grey
        $('tlimg').setStyle('background-image', 'url(img/big/tlimg' + actelement + '.jpg)'); //change image besides the text
        url3 = ('content' + (actelement) + '.html');
        
        new Ajax(url3, {
            method: 'get',
            update: $('log')
        }).request(); //load new content to #log
    });
    
    
    /* ------------------------------> timeline year marker <------------------------------*/
    
    /*--- make the timeline draggable ---*/
    
    $('timeline').makeDraggable({
    
        onStart: function(){
            console.log("start top: %s, left: %s", this.getLeft(), this.getTop());
        }
		.bind($('timeline'))        ,
        onDrag: function(){
            console.log("drag start top: %s, left: %s", this.getLeft(), this.getTop());
        }
		.bind($('timeline'))        ,
        onComplete: function(){
        },
        
        modifiers: {
            y: false
        }, //only allow horizontal drag
        snap: 15, //only drag if dragged more than 15px
        limit: {
            x: [-716, 0]
        } //x-axis drag limitations
    });
    
    /*--- change to custom cursor for the timeline ---*/
    
    $('timeline').addEvents({
        'mouseup': function(){
            this.setStyle('cursor', 'url(img/openhand.cur),pointer');
        },
        'mousedown': function(){
            this.setStyle('cursor', 'url(img/closedhand.cur),pointer');
        },
        'mouseenter': function(){
            this.setStyle('cursor', 'url(img/openhand.cur),pointer');
        }
    });
    
    /*
     *year functions
     */
    /*--- mouse enter ---*/
    
    $ES('div.year').addEvent('mouseenter', function(coloryear){
        coloryear = new Event(coloryear).stop();
        
        $ES('div[year1=square' + this.getProperty('id') + '], div[year2=square' + this.getProperty('id') + '], div[year3=square' + this.getProperty('id') + '], div[year4=square' + this.getProperty('id') + '], div[year5=square' + this.getProperty('id') + '], div[year6=square' + this.getProperty('id') + '], div[year7=square' + this.getProperty('id') + ']').setStyle('background-color', '#000'); //change colors of years that have selected year marker to red
        url5 = ('year' + this.getProperty('id') + '.html');
        
        new Ajax(url5, {
            method: 'get',
            update: $('log')
        }).request(); // change content of #log
    });
    
    /*--- mouse leave ---*/
    
    $ES('div.year').addEvent('mouseleave', function(uncoloryear){
        uncoloryear = new Event(uncoloryear).stop();
        $ES('div[year1=square' + this.getProperty('id') + '], div[year2=square' + this.getProperty('id') + '], div[year3=square' + this.getProperty('id') + '], div[year4=square' + this.getProperty('id') + '], div[year5=square' + this.getProperty('id') + '], div[year6=square' + this.getProperty('id') + '], div[year7=square' + this.getProperty('id') + ']').setStyle('background-color', '#888'); //change colors of years that have selected year marker back to grey
        $ES('#' + actelement).setStyle('background-color', '#ef3230'); // keep last activated element red
    });
    

    
});