var mouseOffset = null;
var iMouseDown  = false;
var lMouseState = false;
var dragObject  = null;

var DragDrops   = [];
var curTarget   = null;
var lastTarget  = null;
var dragHelper  = null;
var rootParent  = null;
var rootSibling = null;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

var setBasic = false;

function pageinit()
{
    CreateDragContainer(document.getElementById("pagediv"), document.getElementById("figdiv"), document.getElementById("trashdiv"));
	makeAllDraggable("figdiv");
	makeAllDraggable("pagediv");
	CreateHelper();
	SetPageWidth();
	hideLoading();
	
	if(setBasic)
	{
	    setBasicClipart();
	}
}

function CreateHelper()
{

	dragHelper = document.getElementById("dragHelper");
	if(dragHelper==null)
	{
	    dragHelper = document.createElement("div");
	    dragHelper.style.cssText = "position:absolute;display:none;border:dotted 1px red;z-index:99999;";
	    dragHelper.id="dragHelper";
	    document.getElementById("pagediv").appendChild(dragHelper);	
	}
}

function CreateDragContainer(){

	var cDrag        = DragDrops.length;
	DragDrops[cDrag] = [];

	for(var i=0; i<arguments.length; i++){
		var cObj = arguments[i];
		if(cObj)
		{
		    DragDrops[cDrag].push(cObj);
		    cObj.setAttribute("DropObj", cDrag);

		    for(var j=0; j<cObj.childNodes.length; j++){

			    if(cObj.childNodes[j].nodeName=="#text") continue;

			    cObj.childNodes[j].setAttribute("DragObj", cDrag);
		    }
		}
	}
}

function getPosition(e){
	var left = 0;
	var top  = 0;
	if(e)
	{
	    while (e.offsetParent){
		    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		    e     = e.offsetParent;
	    }


	    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
    }
	return {x:left, y:top};

}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

var ratioX = 1.0;
var ratioY = 1.0;
function mouseMove(ev){
	ev         = ev || window.event;

	var target   = ev.target || ev.srcElement;
	var mousePos = mouseCoords(ev);
	
	if(lastTarget && (target!==lastTarget)){
		var origClass = lastTarget.getAttribute("origClass");
		if(origClass) lastTarget.className = origClass;
	}
		
	var dragObj = target.getAttribute("DragObj");

	if(dragObj!=null){
	    
		if(target!=lastTarget){
			var oClass = target.getAttribute("overClass");
			if(oClass){
				target.setAttribute("origClass", target.className);
				target.className = oClass;
			}
		}
			
        var shiftPressed=ev.shiftKey;
        if(shiftPressed && iMouseDown)
        {
		    var pagediv  = document.getElementById("pagediv");
		    if(pagediv && isDropZone(ev, pagediv, target))
		    {
                mouseOffset = getMouseOffset(target, ev);
                var posDoc = getPosition(target);
                var mouseCoor = mouseCoords(ev);
                var posX = posDoc.x;
                var posY = posDoc.y;
                
		        newXsize = target.width;
		        newYsize = target.height;
    		    
                if(!lMouseState)
                {
                    lMouseState = true;
                    ratioX = newXsize / (mouseCoor.x - posX);
                    ratioY = newYsize / (mouseCoor.y - posY);
                }
    		
                newXsize = (mouseCoor.x - posX) * ratioX;
                newYsize = (mouseCoor.y - posY) * ratioY;
                
                if(newXsize<20) newXsize=20;
                if(newYsize<20) newYsize=20;
               
                target.width = newXsize;
                target.height = newYsize;                
		    }
        }
        else
        {
		    if(iMouseDown && !lMouseState){

                var usepage = document.getElementById("usepage");
                if(usepage)
                {
                    usepage.checked = true;
                }
	            
			    curTarget     = target;
			    rootParent    = curTarget.parentNode;
			    rootSibling   = curTarget.nextSibling;

			    mouseOffset   = getMouseOffset(target, ev);

                if(dragHelper)
                {
			        for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);

			        dragHelper.appendChild(curTarget.cloneNode(true));
			        dragHelper.style.display = "block";
        			
			        dragHelper.firstChild.style.position="relative";
			        dragHelper.firstChild.style.top="0";
			        dragHelper.firstChild.style.left="0";

			        dragHelper.firstChild.removeAttribute("DragObj");
			        
				    var dragClass = curTarget.getAttribute("dragClass");
				    if(dragClass){
					    dragHelper.firstChild.className = dragClass;
				    }
				
			        var dragConts = DragDrops[dragObj];

			        curTarget.setAttribute("startWidth",  parseInt(curTarget.offsetWidth));
			        curTarget.setAttribute("startHeight", parseInt(curTarget.offsetHeight));
			        curTarget.style.display  = "none";

			        for(var i=0; i<dragConts.length; i++){
				        with(dragConts[i]){
					        var pos = getPosition(dragConts[i]);

					        setAttribute("startWidth",  parseInt(offsetWidth));
					        setAttribute("startHeight", parseInt(offsetHeight));
					        setAttribute("startLeft",   pos.x);
					        setAttribute("startTop",    pos.y);
				        }

				        for(var j=0; j<dragConts[i].childNodes.length; j++){
					        with(dragConts[i].childNodes[j]){
						        if((nodeName=="#text") || (dragConts[i].childNodes[j]==curTarget)) continue;

						        var pos = getPosition(dragConts[i].childNodes[j]);

						        setAttribute("startWidth",  parseInt(offsetWidth));
						        setAttribute("startHeight", parseInt(offsetHeight));
						        setAttribute("startLeft",   pos.x);
						        setAttribute("startTop",    pos.y);
					        }
				        }
			        }
			    }
		    } //if(iMouseDown && !lMouseState)
		} //if(shiftPressed && iMouseDown)
	} //if(dragObj!=null)

	if(curTarget && dragHelper){
		dragHelper.style.top  = mousePos.y - mouseOffset.y;
		dragHelper.style.left = mousePos.x - mouseOffset.x;
		
		var dragConts  = DragDrops[curTarget.getAttribute("DragObj")];
		var activeCont = null;

		var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute("startWidth")) /2);
		var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute("startHeight"))/2);

		for(var i=0; i<dragConts.length; i++){
			with(dragConts[i]){
				if((parseInt(getAttribute("startLeft"))                                           < xPos) &&
					(parseInt(getAttribute("startTop"))                                            < yPos) &&
					((parseInt(getAttribute("startLeft")) + parseInt(getAttribute("startWidth")))  > xPos) &&
					((parseInt(getAttribute("startTop"))  + parseInt(getAttribute("startHeight"))) > yPos)){

						activeCont = dragConts[i];

						break;
				}
			}
		}

		if(activeCont){
		
			var beforeNode = null;

			for(var i=activeCont.childNodes.length-1; i>=0; i--){
				with(activeCont.childNodes[i]){
					if(nodeName=="#text") continue;

					if(curTarget != activeCont.childNodes[i]                                                  &&
						((parseInt(getAttribute("startLeft")) + parseInt(getAttribute("startWidth")))  > xPos) &&
						((parseInt(getAttribute("startTop"))  + parseInt(getAttribute("startHeight"))) > yPos)){
							beforeNode = activeCont.childNodes[i];
					}
				}
			}

			if(beforeNode){
				if(beforeNode!=curTarget.nextSibling){

					activeCont.insertBefore(curTarget, beforeNode);
				}

			} else {
				if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){

					activeCont.appendChild(curTarget);
				}
			}

			setTimeout(function(){
			var contPos = getPosition(activeCont);
			activeCont.setAttribute("startWidth",  parseInt(activeCont.offsetWidth));
			activeCont.setAttribute("startHeight", parseInt(activeCont.offsetHeight));
			activeCont.setAttribute("startLeft",   contPos.x);
			activeCont.setAttribute("startTop",    contPos.y);}, 5);

			if(curTarget.style.display!=""){
				curTarget.style.display    = "";
				curTarget.style.visibility = "hidden";
			}
			
			if(activeCont.id=="pagediv")
			{
	            if(dragObject){
		            dragObject.style.position = "absolute";
		            dragObject.style.top      = mousePos.y - mouseOffset.y;
		            dragObject.style.left     = mousePos.x - mouseOffset.x;
	            }
			}
			else
			{
	            if(dragObject){
		            dragObject.style.position = "relative";
		            dragObject.style.top      = 0;
		            dragObject.style.left     = 0;
	            }
			}
		} else {
			if(curTarget.style.display!="none"){
				curTarget.style.display  = "none";
			}
		} //if(activeCont)
	} //if(curTarget && dragHelper)

	lastTarget  = target;

	lMouseState = iMouseDown;
	if(curTarget || dragObject) return false;
}

function mouseUp(ev){

	if(curTarget){
	try{
	    if(dragHelper)
	    {
		    dragHelper.style.display = "none";
		}

		var pagediv  = document.getElementById("pagediv");
		var figdiv  = document.getElementById("figdiv");
		var trashdiv  = document.getElementById("trashdiv");
		if(pagediv && isDropZone(ev, pagediv, curTarget))
		{	
		    if(curTarget.style.display == "none"){
			    if(rootSibling){
				    rootParent.insertBefore(curTarget, rootSibling);
			    } else {
				    rootParent.appendChild(curTarget);
			    }
		    }
		    curTarget.style.display    = "";
		    curTarget.style.visibility = "visible";
		    
		    if(curTarget.nodeName == "IMG" && curTarget.getAttribute("grfftwidth"))
		    {
	            var grfft = createGraffiti(curTarget);
                document.getElementById("pagediv").appendChild(grfft);
                document.getElementById("pagediv").removeChild(curTarget);
	            makeTextable(grfft);
	            grfft.select();
		    }
		    else if(curTarget.nodeName == "IMG")
		    {
		        curTarget.style.width = "";
		        curTarget.style.height = "";
	            setDragHintText("Hold shift-key & drag to resize images...");
		    }
		    
		    if(curTarget.nodeName == "TEXTAREA")
		    {
		        if(curTarget.getAttribute("grfft")=="yes")
	                setDragHintText("Start typing into graffiti text...");
	            else
	                setDragHintText("Start typing into speech balloon. Double click on balloon to rotate...");
	                
	            if(curTarget.value=="Start typing...") curTarget.select();
	            else curTarget.focus();
		    }
		    else if(curTarget.getAttribute("audio")!=null)
		    {
	            setDragHintText("You may add only one audio in a panel...");
		    }
		    
		    if(curTarget.nodeName == "DIV")
		    {
		        curTarget.style.zIndex = 0;
		    }
		    else if(curTarget.className == "nodrag")
		    {
		        curTarget.style.zIndex = 0;
		    }
		    else
		    {
		        curTarget.style.zIndex = getMaxZindex(curTarget);
		    }
            curTarget.removeAttribute("onmouseover");
            curTarget.removeAttribute("onmouseout");
            curTarget.id = "";
		    closePopup();	    
	        clearEmptyText();
	        miniDragged();
		}
		else if(figdiv && isDropZone(ev, figdiv, curTarget))
		{
		    curTarget.style.display    = "";
		    curTarget.style.visibility = "visible";
		}
		else if(trashdiv && isDropZone(ev, trashdiv, curTarget))
		{
            document.getElementById("trashdiv").removeChild(curTarget);
		}
		else
		{
		    curTarget.style.display    = "";
		    curTarget.style.visibility = "visible";
		}
		hideSubtabs();
	}
	catch(e){};
	}
	curTarget  = null;
	dragObject = null;
	iMouseDown = false;
}

function createGraffiti(curTarget)
{
    var grfft = document.createElement("TEXTAREA");
    grfft.style.cssText = curTarget.style.cssText;
    grfft.setAttribute("DragObj", curTarget.getAttribute("DragObj"));
    grfft.setAttribute("rows", curTarget.getAttribute("rows"));
    grfft.setAttribute("cols", curTarget.getAttribute("cols"));
    grfft.setAttribute("onkeyup", curTarget.getAttribute("onkeyup"));
    grfft.setAttribute("ondblclick", curTarget.getAttribute("ondblclick"));
    grfft.style.width = curTarget.getAttribute("grfftwidth");
    grfft.style.height = curTarget.getAttribute("grfftheight");
    grfft.style.borderTop = curTarget.getAttribute("grffttop");
    grfft.style.borderBottom = curTarget.getAttribute("grfftbottom");
    grfft.style.background = curTarget.getAttribute("grfftbg");
	
	if(curTarget.src.indexOf("grfft")>0)
	{
	    setDragHintText("Start typing into graffiti text...");
        grfft.value="Start typing...";
        grfft.setAttribute("grfft", "yes");
	}
	else
	{
	    setDragHintText("Start typing into speech balloon. Double click on balloon to rotate...");
        grfft.setAttribute("grfft", "no");
	}

    return grfft;
}

function setDragHintText(txt)
{
    var draghint = document.getElementById("draghint");
    if(draghint)
    {
        draghint.innerHTML = txt;
        draghint.style.textDecoration = "blink";
    }
}

function getMaxZindex(curTarget)
{
    if(document.getElementById("lasttouchgotop").checked)
    {
        var pagediv = document.getElementById("pagediv");
        var z = 1;
        for(var i=0; i<pagediv.childNodes.length; i++)
        {
            if(pagediv.childNodes[i].nodeName=="#text") continue;
            
            if(pagediv.childNodes[i].style.zIndex && pagediv.childNodes[i].style.zIndex>z)
            {
                z = parseInt(pagediv.childNodes[i].style.zIndex);
            }
        }
        return z+1;
    }
    else
    {
        return curTarget.style.zIndex;
    }
}

function miniDragged()
{
    var minisave = document.getElementById("minisave");
    if(minisave)
    {
        minisave.style.display="inline";
    }
    var miniundo = document.getElementById("miniundo");
    if(miniundo)
    {
        miniundo.style.display="inline";
    }
    var toppost = document.getElementById("toppost");
    if(toppost)
    {
        toppost.style.display="inline";
    }
    var draghintmini = document.getElementById("draghintmini");
    if(draghintmini)
    {
        draghintmini.style.display="none";
    }
    var undochanges = document.getElementById("undochanges");
    if(undochanges)
    {
        undochanges.style.display="inline";
    }       
}

function clearEmptyText()
{
    var emptyText = document.getElementById("emptytext");
    if(emptyText)
    {
        emptyText.parentNode.removeChild(emptyText);
    }
}

function isDropZone(ev, zoneobj, obj)
{
	ev           = ev || window.event;
    var mousePos = mouseCoords(ev);
    
	var targPos    = getPosition(zoneobj);
	var targWidth  = parseInt(zoneobj.offsetWidth);
	var targHeight = parseInt(zoneobj.offsetHeight);

	var curWidth  = 0;
	var curHeight = 0;
	if(
		(mousePos.x > targPos.x+curWidth/2 - 100)                &&
		(mousePos.x < (targPos.x + targWidth-curWidth/2 + 100))  &&
		(mousePos.y > targPos.y+curHeight/2 - 100)                &&
		(mousePos.y < (targPos.y + targHeight-curHeight/2 + 100)))
    {
        return true;
    }
    return false;
}

function mouseDown(ev){
	ev         = ev || window.event;
	var target = ev.target || ev.srcElement;

	iMouseDown = true;

	if(target.onmousedown || target.getAttribute("DragObj")){
		return false;
	}
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

function makeTextable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		if(item.className!="nodrag") dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		item.focus();
		return false;
	}
}

function makeAllDraggable(divid)
{
    var pagediv = document.getElementById(divid);

    if(pagediv)
    {
	    for(var i=0; i<pagediv.childNodes.length; i++) 
	    {
	        var child = pagediv.childNodes[i];
	        if(child.nodeName=="#text") continue;
    	    
	        if(child.nodeName=="TEXTAREA")
	        {
	            makeTextable(child);
	        }
	        else if(child.nodeName!="DIV")
	        {
	            makeDraggable(child);
	        }
	    }
	}
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;