function dragstart(element){    //Wird aufgerufen, sobald ein Element angeklickt wird.
    if (!element){element = window.event;}
    dragobjekt = element;       //Parameter element: Das zu bewegende Objekt.
    document.getElementById("picker").style.display='none';//Picker wieder ausblenden
    id = (dragobjekt.target || dragobjekt.srcElement).id; //Id des aktuellen Objektes speichern
    if(id=="smw-titel" || id=="picker" || id=="feld" || id=="canvas" || id=="color_schieber" || id=="prev" || id=="regler" || id=="gray" || id=="gray_schieber" || id=="hex" || document.getElementById(id).className == "smw_picker"){
        document.getElementById("picker").style.display='block'; //den color-picker einblenden
        dragx = posx - document.getElementById(id).offsetLeft; //Dragposition initialisieren
        dragy = posy - document.getElementById(id).offsetTop;
        if(document.getElementById(id).className == "smw_picker"){//wenn ein picker-button geklickt wurde
            document.getElementById("picker").style.display='block'; //den color-picker einblenden
            document.getElementById("picker").style.left = posx + "px"; //den color-picker an die Mausposition setzen
            document.getElementById("picker").style.top = posy + "px";
            pickbutton = id; //die ID des aktuellen Pick-buttons speichern
            pickinput = document.getElementById(id).getAttribute('for'); //ID des Input-feldes, in welches das Ergebnis geschrieben wird
        }
    }else{}
}
    
function dragstop() {       //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
    dragobjekt=null;        //objekt etfernen
}
    
function drag(ereignis) {   //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
    posx = document.all ? window.event.clientX : ereignis.pageX;
    posy = document.all ? window.event.clientY : ereignis.pageY;
    if(dragobjekt != null){ //Wenn ein zu Bewegendes Objekt vorhanden...
        if(id == "gray_schieber"){
            var left = (posx - dragx);
            if(left < 0) {  left = 0;       }
            if(left > 271){ left = 271; }
            document.getElementById(id).style.left = left + "px";
            grayx = left; //Position des Schiebereglers in einer globalen Variable speichern
            vorschau(); //Vorschau-div und Hex-code aktuallisieren
            set_screen("canvas",left);//Farbpalette überarbeiten
        }
        if(id == "color_schieber"){
            var left = (posx - dragx);
            if(left < 0) {  left = 0;       }
            if(left > 255){ left = 255; }
            var top = (posy - dragy);
            if ( checkIE() > -1 ){top = top-23}//Nur, wenn MSIE
            if(top < 0) {   top = 0;    }
            if(top > 255){  top = 255;}
            document.getElementById(id).style.left = left + "px";
            document.getElementById(id).style.top = top + "px";
            colorx = left; //Position des Schiebereglers in einer globalen Variable speichern
            colory = top; //Position des Schiebereglers in einer globalen Variable speichern
            vorschau(); //Vorschau-div und Hex-code aktuallisieren
        }
        if(id == "picker"){
            var left = (posx - dragx);
            if(left < 0) {  left = 0;}
            var top = (posy - dragy);
            if(top < 0) {   top = 0;}
            document.getElementById(id).style.left = left + "px";
            document.getElementById(id).style.top = top + "px";
        }
    }
}
    
    
function vorschau() {       //Initialisiert und aktuallisiert das Vorschau-div und mach den Hex-code.
    var color = read_color(colorx, colory, 255, grayx); //Farbe des Vorschau-div's bestimmen
    document.getElementById("prev").style.backgroundColor = "rgb("+color[0]+", "+color[1]+", "+color[2]+")"; //Vorschau-div hintergrundfarbe
    document.getElementById(pickbutton).style.backgroundColor = "rgb("+color[0]+", "+color[1]+", "+color[2]+")"; //Vorschau-pick-button hintergrundfarbe
    var hex = rgbToHex(color[0], color[1], color[2]);
    document.getElementById("hex").value = hex; //Hex-vorschau-input
    document.getElementById(pickinput).value = hex; //Das eigentliche Input setzen 
    hex = rgbToHex(255-color[0], 255-color[1], 255-color[2]);//complimentärfarbe
    document.getElementById("color_schieber").style.border = "solid "+hex+" 2px";
}
function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
    
    
function setPixel(imageData, x, y, r, g, b, a) {
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}