$(document).ready(function(){
    new ColorChanger('webHeaderDiv', '40');
});



function ColorChanger(target, colorCount) {
    this.target     = document.getElementById(target);
    this.colorCount = colorCount;
    this.height     = this.target.offsetHeight;
    this.width      = this.target.offsetWidth / this.colorCount;
    
    
    this.target.ColorChanger = this;
    
    this.set        = ColorChangerChangeColor;
    this.create     = ColorChangerCreateColorDivs;
    this.getRGB     = ColorChangerGetRGB;
    
    this.create();
    
    //this.target.innerHTML = 'fick';
}


function ColorChangerCreateColorDivs() {
    var color = '';

    this.target.style.position = 'relative';
    
    // ColorChangerDiv erstellen
    var div = document.createElement('div');
    div.setAttribute('id', 'ColorChanger');
    div.style.display = 'none';
    div.style.height  = this.height + 'px';
    
    this.target.appendChild(div);
    this.target.onmouseover    = new Function("this.ColorChanger.ColorChangerDiv.style.display = 'block';");
    this.target.style.overflow = 'hidden';
    
    this.ColorChangerDiv       = document.getElementById('ColorChanger');
    this.ColorChangerDiv.onmouseout = new Function("this.style.display = 'none'");
    
    // Farben auflisten
    for(var i = 0; i < this.colorCount; i++) {
        color = '#' + this.getRGB();   // neue Farbe generieren
        
        var div = document.createElement('div');
        div.onclick = new Function('this.parentNode.parentNode.ColorChanger.set(\'' + color + '\');');
        div.style.background = color;
        div.style.cssFloat   = 'left';
        div.style.cursor     = 'pointer';
        div.style.styleFloat = 'left';
        div.style.height     = this.height + 'px';
        div.style.overflow   = 'hidden';
        div.style.width      = this.width + 'px';
        this.ColorChangerDiv.appendChild(div);
    }
}


function ColorChangerGetRGB() {
    var hex  = '';
  var rand = 0;
    var re   = '';
    
    for(var i = 0; i < 3; i++) {
        rand = Math.floor((256)*(Math.random()));
        hex  = d2h(rand);
        
        if(hex.length < 2)
            while(hex.length < 2)
                hex = '0' + hex;
        
        re += hex;
    }
    
    return re;
}


function ColorChangerChangeColor(color) {
    var url = '/styles/color.css.php?color=' + escape(color);
    
    if(!document.getElementById('ColorChangerCss')) {
        var link  = document.createElement('link');
        link.id   = 'ColorChangerCss';
        link.href = url;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(link);
    }
    
    document.getElementById('ColorChangerCss').href = url;
}





function d2h(n) {
    var hex = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
    var con = new Array();
    
    var re = '';
    var d  = 16;
    var e  = d;
    var r  = 0;
    var i  = 0;
    
    while(e > 1) {
        e = n / d;
        r = n % d;
        
        n = Math.floor(e);
        con[con.length] = hex[r];
    }
    
    for(var i = con.length-1; i >= 0; i--)
        re += con[i];
    
    return re;
}

function debug(t) {
    if(!document.getElementById('debug')) {
        var div = document.createElement('div');
        div.setAttribute('id','debug');
        div.setAttribute('style','clear: both');
        
        document.getElementsByTagName('body')[0].appendChild(div);
    }
    
    document.getElementById('debug').innerHTML += t + '<br />';
}