var activeElement = null;
var overElement = null;
var sX, sY;
var action = null;
var curId = 0;
var imgTop = 0;
var imgLeft = 0;
var newDiv = false;
function mousedown() 
{
    mp = window.event.srcElement;
    if (mp && mp.tagName == 'DIV')
    {
        mp.setActive();
        mp.setCapture(true);
    }
    sX = event.x;
    sY = event.y;
    noReturn();
    if (!action)
        setAction();
}
function setAction()
{
    if (!activeElement) 
        return;
        
    switch (activeElement.style.cursor)
    {
        case 'move':
            action = 'move';
            break;
        case 'n-resize':
            action = 'n';
            break;
        case 'ne-resize':
            action = 'ne';
            break;
        case 'e-resize':
            action = 'e';
            break;
        case 'se-resize':
            action = 'se';
            break;
        case 's-resize':
            action = 's';
            break;
        case 'sw-resize':
            action = 'sw';
            break;
        case 'w-resize':
            action = 'w';
            break;
        case 'nw-resize':
            action = 'nw';
            break;
        default: 
            action = null;
    }
}
function onareafocus()
{
    if (activeElement)
    {
        activeElement.style.filter = 'alpha(opacity=40)';
        activeElement.style.border = '1px solid red';
        activeElement.style.zIndex = 100;
    }
    activeElement = event.srcElement;
    if (activeElement && activeElement.tagName == "DIV")
    {
        activeElement.style.zIndex = 200;
        activeElement.style.border = "2px solid lightgreen";
        activeElement.style.filter = 'alpha(opacity=80)';
        setAction();
        createMapForm.disabled = false;
        setFormFromArea();
    }
}
function mouseup()
{
    activeElement.releaseCapture();
    action = null;
    newDiv = false;
} 
function setCursor()
{
    mX = event.x + document.body.scrollLeft;
    mY = event.y + document.body.scrollTop;
    if(mX >= (overElement.style.pixelLeft+overElement.style.pixelWidth-3) && 
       mY >= (overElement.style.pixelTop+overElement.style.pixelHeight-3))
    {
        overElement.style.cursor='se-resize';
    }
    else if (mX <= (overElement.style.pixelLeft+3) &&
             mY <= (overElement.style.pixelTop+3))
    {
        overElement.style.cursor='nw-resize';
    }
    else if (mX >= (overElement.style.pixelLeft+overElement.style.pixelWidth-3) && 
             mY <= (overElement.style.pixelTop+3))
    {
        overElement.style.cursor='ne-resize';
    }
    else if (mX <= (overElement.style.pixelLeft+6) && 
             mY >= (overElement.style.pixelTop+overElement.style.pixelHeight-3))
    {
        overElement.style.cursor='sw-resize';
    }
    else if (mX >= (overElement.style.pixelLeft+overElement.style.pixelWidth-3))
    {
        overElement.style.cursor='e-resize';
    }
    else if (mX <= (overElement.style.pixelLeft+6))
    {
        overElement.style.cursor='w-resize';
    }
    else if (mY >= (overElement.style.pixelTop+overElement.style.pixelHeight-3))
    {
        overElement.style.cursor='s-resize';
    }
    else if (mY <= (overElement.style.pixelTop+3))
    {
        overElement.style.cursor='n-resize';
    }
    else
    {
        overElement.style.cursor='move';
    }
}
function mousemove() 
{
    if (!action && !newDiv)
    {
        overElement = window.event.srcElement;
        if (overElement && overElement.tagName == "DIV")
            setCursor();
    }

    var nX = event.x;
    var nY = event.y;
    dLeft = nX - sX;
    dTop = nY - sY;

    if (event.button == 1) 
    {
        if (!activeElement)
            return;
        if (!action && newDiv)
        {
            if (Math.abs(dLeft) < 2 || Math.abs(dTop) < 2)
                return;
            if (dLeft < 0 && dTop < 0)
                action = 'nw';
            else if (dLeft > 0 && dTop < 0)
                action = 'ne';
            else if (dLeft < 0 && dTop > 0)
                action = 'sw';
            else
                action = 'se';
        }
        if (action == 'move')
            moveElement(nX, nY, dLeft, dTop);
        else
        {
            resizeElement(nX, nY, dLeft, dTop);
            areaWidth.innerText = activeElement.offsetWidth;
            areaHeight.innerText = activeElement.offsetHeight;
        }
    }
    areaX.innerText = nX - imgLeft;
    areaY.innerText = nY - imgTop;
}

document.attachEvent('onmousemove', mousemove);
function moveElement(nX, nY, dLeft, dTop) 
{
    if (activeElement.style.posLeft+dLeft <= imgLeft)
    {
        activeElement.style.posLeft = imgLeft;
    }
    else if (activeElement.style.posLeft + activeElement.style.pixelWidth+dLeft >= imgLeft + img.offsetWidth)
    {
        activeElement.style.posLeft = imgLeft+img.offsetWidth-activeElement.style.pixelWidth;
    }
    else
    {
        sX = nX;
        activeElement.style.posLeft += dLeft;
    }
    if (activeElement.style.posTop+dTop <= imgTop)
    {
        activeElement.style.posTop = imgTop;
    }
    else if (activeElement.style.posTop + activeElement.style.pixelHeight+dTop >= imgTop + img.offsetHeight)
    {
        activeElement.style.posTop = imgTop+img.offsetHeight-activeElement.style.pixelHeight;
    }
    else
    {
        sY = nY;
        activeElement.style.posTop += dTop;
    }
}
function resizeElement(nX, nY, dLeft, dTop) 
{
    switch (action)
    {
        case 'n':
            if (activeElement.style.pixelHeight - dTop - 5 > 0 && activeElement.style.pixelTop + dTop > imgTop)
            {
                sY = nY;
                activeElement.style.pixelTop += dTop;
                activeElement.style.pixelHeight -= dTop;
            }
            break;
        case 'e':
            if (activeElement.style.pixelWidth + dLeft - 5 > 0 && activeElement.style.pixelLeft + activeElement.style.pixelWidth + dLeft <= imgLeft + img.offsetWidth)
            {
                sX = nX;
                activeElement.style.pixelWidth += dLeft;
            }
            break;
        case 's':
            if (activeElement.style.pixelHeight + dTop + 5 > 0 && activeElement.style.pixelTop + activeElement.style.pixelHeight + dTop <= imgTop + img.offsetHeight)
            {
                sY = nY;
                activeElement.style.pixelHeight += dTop;
            }
            break;
        case 'w':
            if (activeElement.style.pixelWidth - dLeft - 5 > 0 && activeElement.style.pixelLeft+dLeft > imgLeft)
            {
                sX = nX;
                activeElement.style.pixelLeft += dLeft;
                activeElement.style.pixelWidth -= dLeft;
            }
            break;
        case 'se':
            if (activeElement.style.pixelHeight + dTop + 5 > 0 && activeElement.style.pixelTop + activeElement.style.pixelHeight + dTop <= imgTop + img.offsetHeight)
            {
                sY = nY;
                activeElement.style.pixelHeight += dTop;
            }
            if (activeElement.style.pixelWidth + dLeft - 5 > 0 && activeElement.style.pixelLeft + activeElement.style.pixelWidth + dLeft <= imgLeft + img.offsetWidth)
            {
                sX = nX;
                activeElement.style.pixelWidth += dLeft;
            }
            break;
        case 'sw':
            if (activeElement.style.pixelHeight + dTop + 5 > 0 && activeElement.style.pixelTop + activeElement.style.pixelHeight + dTop <= imgTop + img.offsetHeight)
            {
                sY = nY;
                activeElement.style.pixelHeight += dTop;
            }
            if (activeElement.style.pixelWidth - dLeft - 5 > 0 && activeElement.style.pixelLeft+dLeft > imgLeft)
            {
                sX = nX;
                activeElement.style.pixelLeft += dLeft;
                activeElement.style.pixelWidth -= dLeft;
            }
            break;
        case 'nw':
            if (activeElement.style.pixelHeight - dTop - 5 > 0 && activeElement.style.pixelTop + dTop > imgTop)
            {
                sY = nY;
                activeElement.style.pixelTop += dTop;
                activeElement.style.pixelHeight -= dTop;
            }
            if (activeElement.style.pixelWidth - dLeft - 5 > 0 && activeElement.style.pixelLeft+dLeft > imgLeft)
            {
                sX = nX;
                activeElement.style.pixelLeft += dLeft;
                activeElement.style.pixelWidth -= dLeft;
            }
            break;
        case 'ne':
            if (activeElement.style.pixelHeight - dTop - 5 > 0 && activeElement.style.pixelTop + dTop > imgTop)
            {
                sY = nY;
                activeElement.style.pixelTop += dTop;
                activeElement.style.pixelHeight -= dTop;
            }
            if (activeElement.style.pixelWidth + dLeft - 5 > 0 && activeElement.style.pixelLeft + activeElement.style.pixelWidth + dLeft <= imgLeft + img.offsetWidth)
            {
                sX = nX;
                activeElement.style.pixelWidth += dLeft;
            }
            break;
    }
}

function onResize()
{
    oldTop = imgTop;
    oldLeft = imgLeft;
    imgTop = 0;
    imgLeft = 0;
    par = document.getElementById('editedImg');
    while (par)
    {
        imgTop += par.offsetTop;
        imgLeft += par.offsetLeft;
        par = par.offsetParent;
    }
    oDivs = document.getElementsByTagName('DIV');
    for (i=0;i<oDivs.length;i++)
    {
        oDivs[i].style.posTop = oDivs[i].style.posTop+imgTop-oldTop;
        oDivs[i].style.posLeft = oDivs[i].style.posLeft+imgLeft-oldLeft;
    }
}
window.attachEvent('onresize', onResize);
function setMapInfo()
{
    par = document.getElementById('editedImg');
    while (par)
    {
        imgTop += par.offsetTop;
        imgLeft += par.offsetLeft;
        par = par.offsetParent;
    }
    if (oldMapName.length > 0)
    {
        for (var i = 0; i < oDoc.all.length; i++)
        {
            if (oDoc.all(i).tagName == 'MAP' && oDoc.all(i).getAttribute('name') == oldMapName)
            {
                for (var ia=1; oDoc.all(i+ia) && oDoc.all(i+ia).tagName == 'AREA'; ia++)
                {
                    var oArea = oDoc.all(i+ia);
                    var _target= oArea.getAttribute('target');
                    var _href=oArea.getAttribute('href');
                    if (_href == 'javascript:void(0)')
                    	_href = '';
                    var _alt=oArea.getAttribute('alt');
                    var _coords=oArea.getAttribute('coords');
                    if (_coords.length >0)
                    {
                        var _coordsA = Array();
                        _coordsA = _coords.split(',');
                        if (_coordsA.length == 4)
                            createMap(true, _href, _alt, _target, parseInt(_coordsA[0])+imgLeft, parseInt(_coordsA[1])+imgTop, parseInt(_coordsA[2]-_coordsA[0]), parseInt(_coordsA[3]-_coordsA[1]));
                    }
                }
                break;
            }
        }
    }
}
function createMap(_new, _href, _alt, _target, _left, _top, _width, _height)
{
    oDiv = document.createElement('DIV');
    oDiv.id = 'map_area_'+curId;
    oDiv.style.position = 'absolute';
    if (_new)
    {
        if (_left < imgLeft)
            _left = imgLeft;
        if (_top < imgTop)
            _top = imgTop;
        if (_left+_width > imgLeft+img.offsetWidth)
            _width = imgLeft + img.offsetWidth - _left;
        if (_top+_height > imgTop+img.offsetHeight)
            _height = imgTop+img.offsetHeight-_top;

        oDiv.MAP_href =_href;
        oDiv.MAP_alt = _alt;
        oDiv.MAP_target = _target;

        oDiv.style.left = _left;
        oDiv.style.top = _top;
        oDiv.style.width = _width;
        oDiv.style.height = _height;
    }
    else
    {
        oDiv.MAP_href ='';
        oDiv.MAP_alt = '';
        oDiv.MAP_target = '';
        
        oDiv.style.left = event.x + document.body.scrollLeft-2;
        oDiv.style.top = event.y + document.body.scrollTop-2;
        oDiv.style.width = 4;
        oDiv.style.height = 4;
        sX = event.x;
        sY = event.y;
        newDiv = true;
    }
    oDiv.style.fontSize = '1px';
    oDiv.style.backgroundColor = 'gray';
    oDiv.style.filter = 'alpha(opacity=40)';
    document.body.insertAdjacentElement('beforeEnd', oDiv);
    oDiv.attachEvent('onmouseup', mouseup);
    oDiv.attachEvent('onmousedown', mousedown);
    oDiv.attachEvent('onfocus', onareafocus);
    oDiv.attachEvent('onkeydown', keydown);
    oDiv.focus();
    if (!_new)
        oDiv.setCapture(true);
    curId++;
}
function setFormFromArea()
{
    if(activeElement)
    {
        createMapForm.href.value = activeElement.MAP_href;
        createMapForm.alt.value = activeElement.MAP_alt;
        createMapForm.target.value = activeElement.MAP_target;
        areaWidth.innerText = activeElement.offsetWidth;
        areaHeight.innerText = activeElement.offsetHeight;
    }
}
function updateArea()
{
    if (activeElement)
    {
        activeElement.MAP_href = createMapForm.href.value;
        activeElement.MAP_alt = createMapForm.alt.value;
        activeElement.MAP_target = createMapForm.target.value;
    }
}
function keydown()
{
    if (!activeElement)
        return;

    if (event.keyCode == 8 || event.keyCode == 46 )
    {
        activeElement.removeNode(true);
        activeElement = null;
        createMapForm.href.value = "";
        createMapForm.alt.value = "";
        createMapForm.target.value = "";
        createMapForm.disabled = true;
        areaWidth.innerText = "";
        areaHeight.innerText = "";
        noReturn();
        return;
    }
    else
    {
        var _step = 1;
        if (event.ctrlKey)
            _step = 5;
        if (event.shiftKey)
        {
            switch (event.keyCode)
            {
                case 37:
                    activeElement.style.pixelWidth = activeElement.style.pixelWidth-_step;
                    noReturn();
                    break;
                case 39:
                    if (activeElement.style.pixelWidth + activeElement.style.posLeft+_step <= imgLeft + img.offsetWidth)
                        activeElement.style.pixelWidth = activeElement.style.pixelWidth+_step;
                    else
                        activeElement.style.pixelWidth = imgLeft+img.offsetWidth-activeElement.style.posLeft;
                    noReturn();
                    break;
                case 38:
                    activeElement.style.pixelHeight= activeElement.style.pixelHeight-_step;
                    noReturn();
                    break;
                case 40:
                    if (activeElement.style.pixelHeight + activeElement.style.posTop+_step <= imgTop + img.offsetHeight)
                        activeElement.style.pixelHeight = activeElement.style.pixelHeight+_step;
                    else
                        activeElement.style.pixelHeight = imgTop+img.offsetHeight-activeElement.style.posTop;
                    noReturn();
                    break;
            }
        }
        else
        {
            switch (event.keyCode)
            {
                case 37:
                    if (activeElement.style.posLeft-_step > imgLeft)
                        activeElement.style.posLeft = activeElement.style.posLeft-_step;
                    noReturn();
                    break;
                case 39:
                    if (activeElement.style.posLeft+activeElement.style.pixelWidth+_step <= imgLeft + img.offsetWidth) 
                        activeElement.style.posLeft = activeElement.style.posLeft+_step;
                    noReturn();
                    break;
                case 38:
                    if (activeElement.style.posTop-_step > imgTop)
                        activeElement.style.posTop = activeElement.style.posTop-_step;
                    noReturn();
                    break;
                case 40:
                    if (activeElement.style.posTop+activeElement.style.pixelHeight+_step <= imgTop+img.offsetHeight)
                        activeElement.style.posTop = activeElement.style.posTop+_step;
                    noReturn();
                    break;
            }
        }
    }
}
function noReturn()
{
    event.cancelBubble = true;
    event.returnValue = false;
}
function generateSource()
{
    var map_source = '';
    oDivs = document.getElementsByTagName('DIV');
    for(var i=0;i<oDivs.length;i++)
    {
        oDiv = oDivs[i]; 
        ut = oDiv.style.posTop-imgTop;
        ul = oDiv.style.posLeft-imgLeft;
        bb = oDiv.style.posTop-imgTop+oDiv.style.pixelHeight;
        br = oDiv.style.posLeft-imgLeft+oDiv.style.pixelWidth;
        if (oDiv.MAP_href == '')
	       oDiv.MAP_href = 'javascript:void(0)';  
        map_source+='<area shape=RECT alt="'+oDiv.MAP_alt+'" coords="'+ul+','+ut+','+br+','+bb+'" target="'+oDiv.MAP_target+'" href=\''+oDiv.MAP_href+'\'>';
    }
    var ret= Array();
    ret['map_source']=map_source;
    ret['map_name']=makeMapName();
    return ret;
}

function generateMap()
{
    mapinfo = generateSource();
    removeMap(oldMapName);
    if (mapinfo['map_source'].length > 0)
    {
        var map_source = '<MAP name="'+mapinfo['map_name']+'">';
        map_source += mapinfo['map_source'];
        map_source += "</MAP>";
        editableRegion.insertAdjacentHTML('afterBegin', map_source);
        img.setAttribute('useMap','#'+mapinfo['map_name']);
        img.setAttribute('border','0');
    }
    else
    {
        img.removeAttribute('useMap');
    }
    window.close();
}

function removeMap(mapname)
{
    if (mapname.length > 0)
    for (var i = 0; i < oDoc.all.length; i++)
    {
        if (oDoc.all[i].tagName == 'MAP' && oDoc.all[i].getAttribute('name') == mapname)
        {
            oDoc.all[i].removeNode(true);
            return;
        }   
    }
}

function makeMapName()
{
    if (oldMapName && oldMapName.length)
        return oldMapName;

    var zeit = new Date();
    return "map"+Date.UTC(zeit.getYear(),zeit.getMonth(),zeit.getDay(),zeit.getHours(),zeit.getMinutes(),zeit.getSeconds());
}

function cancel()
{
    window.returnValue = false;
    window.close();
}
function showLinkDialog()
{
    strPage = "dlg_ins_link.php";
    strAttr = "resizable:yes;status:no;dialogWidth:"+screen.availWidth+"px;dialogHeight:"+screen.availHeight+"px;help:no";
    var result = showModalDialog(strPage, window, strAttr);

    if (result)
    {
        createMapForm.href.value = result['URL'];
        createMapForm.alt.value = result['title'];
        createMapForm.target.value = result['target'];
        updateArea();
    }
}