var objDrag = null;     // Element, über dem Maus bewegt wurde

var mouseX   = 0;       // X-Koordinate der Maus
var mouseY   = 0;       // Y-Koordinate der Maus

var offX = 0;           // X-Offset der Maus zur linken oberen Ecke des Elements
var offY = 0;           // Y-Offset der Maus zur linken oberen Ecke des Elements

var component_id;
var component_pos = new Array(100);

var object_count = 0;
var components = new Array(100);

for(var i=0; i < component_pos.length; ++i)
{
	component_pos[i] = new Array(3);
}

function getCookieVal (offset) {
    var endstr = document.cookie.indexOf (";", offset);
    if (endstr == -1)
        endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
        return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break; 
    }
    return null;
}

// Browserweiche
IE = document.all&&!window.opera;
DOM = document.getElementById&&!IE;

// Wird aufgerufen, wenn die Maus über einer Box gedrückt wird
function startDrag(objElem) {
// Objekt der globalen Variabel zuweisen -> hierdurch wird Bewegung möglich

var date = new Date();
	date = new Date(date.getTime() + 1000*60*60*24*365);
	document.cookie = 
					  
objDrag = objElem;

// Offsets im zu bewegenden Element ermitteln
offX = mouseX - objDrag.offsetLeft;
offY = mouseY - objDrag.offsetTop;
}

// Wird ausgeführt, wenn die Maus bewegt wird
function doDrag(ereignis) {
// Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
mouseX = ereignis.pageX;
mouseY = ereignis.pageY;

// Wurde die Maus über einem Element gedrück, erfolgt eine Bewegung
if (objDrag != null) {
  // Element neue Koordinaten zuweisen

		  objDrag.style.left = (((mouseX - offX)* 100) / window.innerWidth ) + "%";
		  objDrag.style.top =  (((mouseY - offY) * 100) / window.innerHeight) + "%";
	
	 window.status = "Position der Komponente: " + (((mouseX - offX)* 100) / window.innerWidth ) + ", " + (((mouseY - offY) * 100) / window.innerHeight);
}
}

// Wird ausgeführt, wenn die Maustaste losgelassen wird
function stopDrag(ereignis) {
// Objekt löschen -> beim Bewegen der Maus wird Element nicht mehr verschoben
components[object_count++] = objDrag;
save_component_positions();
objDrag = null;
}

function render_component(width, height, img, id, posx, posy) 
{
	component = document.createElement("div");
	component.setAttribute("style", "width: " + width + "px; height: " + height + "px; background-image: url('img/components/micro/" + img + "'); border: 0px; position: absolute; left: 610px; top: 265px;", 0);
	
	if(posx && posy != 0) {
		component.setAttribute("style", "left: " + posx + "px; top: " + posy + "px;");
	}
	
	component.setAttribute("onmousedown", "startDrag(this);", 0);

	component_id++;
	component.setAttribute("id", "_" + component_id);
	document.body.appendChild(component);
}

function getPosition (o){
       return objDrag.style.left;
}

function save_component_positions()
{
	alert(getPosition(0));
	
	var date = new Date();
	date = new Date(date.getTime() + 1000*60*60*24*365);
	document.cookie = "component_pos=" + component_pos
					  + "; expires=" + date.toGMTString()+';';
}


// Initialisierungs-Funktion
function init(){
// Initialisierung der Überwachung der Events
document.onmousemove = doDrag;  // Bei Mausbewegung die Fkt. doDrag aufrufen
document.onmouseup = stopDrag;  // Bei Loslassen der Maustaste die Fkt. stopDrag aufrufen
}