%%include_language "templates/lang/main.lng"%%
%%include_language "templates/tree/tree.lng"%%

<style>
div.dragedObject{
    position: absolute;
    z-index: 10;
}
img.dragedObject{
    opacity: 0.6;
    filter:alpha(opacity=60);
    z-index: 11;
}
img.dragedObjectPlus{
    position: absolute;
    right: -5px;
    bottom: -5px;
    z-index: 12;
}
img.dragedObjectNoDrop{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 13;
}
</style>


<!--#set var="level_start" value=""-->

<!--#set var="level_end" value=""-->

<!--#set var="img_path" value="<img align="absmiddle" src="skins/vanilla/treeimgs/##img##.gif" >" -->

<!--#set var="img_inc" value="<img id="el_##cid##" align="absmiddle" width=16 height=20 hspace=1 src="skins/vanilla/treeimgs/page_##page_type##.gif" ondragstart="InitiateDrag('##cid##','##pid##')" ondragenter="DragEnter('##cid##', '##pid##')" ondragover="DragOver('##cid##', '##pid##', event)" onmouseout="DragLeave('##cid##', '##pid##')">"-->

<!--#set var="img_link" value="<img align="absmiddle" src="skins/vanilla/treeimgs/##img##.gif">"-->

<!--#set var="select_link" value="##IF(_sys_right_w==0)##<a id="tree_url_##cid##" href="##itemLink##" onclick="tree_click('##cid##',_tree_rm); return false;" ><img id=el_##cid##  title="##img_alt##" align="absmiddle" width=16 height=20 hspace=1 src="skins/vanilla/treeimgs/page_readonly.gif" style="background: url(skins/vanilla/treeimgs/page_##page_type##.gif) no-repeat" ondragenter="DragEnter('##cid##', '##pid##')" ondragover="DragOver('##cid##', '##pid##', event)"  onmouseout="DragLeave('##cid##', '##pid##')"></a><input type=checkbox style="margin:0px;display:none;" id="tree_ch_##cid##" disabled>##ELSE##<a id="tree_url_##cid##"  title="##img_alt##" href="##itemLink##" onclick="if(!amiDndCheckDrop()){tree_click('##cid##',_tree_rm);}; return false;" onDragStart="return false"><img id=el_##cid## align="absmiddle" width=16 height=20 hspace=1 src="skins/vanilla/treeimgs/page_##page_type##.gif" amiDropTarget="1" onDragStart="return false" onMouseDown="amiDndAllow(event)" onMouseUp="amiDndDisallow(event)" onMouseOut="amiDndClearStyle(event)"></a><input onclick="tree_grp_select('##cid##', '##pid##', this.checked, event.ctrlKey, event.altKey)" type=checkbox style="margin:0px;display:none;" id="tree_ch_##cid##">##ENDIF##"-->

<!--#set var="item_selected" value="<b>##itemName##</b></span>"-->

<!--#set var="item_normal" value="<a href="##itemLink##" onclick="tree_click('##cid##',_tree_rm); return false;">##itemName##</a></span>"-->

<!--#set var="item" value="
     <tr>
       <td nowrap height=20>##lines##<img src="skins/vanilla/treeimgs/tf_##img_iconsmask##.gif" height=19 border=0 align=absmiddle><span class="tree_item" id="tree_it_##cid##" pid="##pid##" rid="##redirect_id##"
##IF(_sys_right_w==0)##
style="color:#7382A0"
##ENDIF##       
       >##item##</td>
     </tr>
"-->
<script>
var docScrollTimeout = null;
var docScrollStep = 0;
function onDocumentScroll(evt){
    if(doMouseDrag){
        var mousePos = amiCommon.getMousePosition(evt);
        docScrollTimeout = setTimeout('document.body.scrollTop = Math.max(0, document.body.scrollTop + docScrollStep)', 100);
    }
}

/* Drag'n'drop */

mouseDragAllowed = false;
doSkipInitDrag = true;
doMouseDrag = false;
isDropAllowed = false;
clickAfterDnd = false;

var amiDndUpdateObjects = function(evt){
    if(isDropAllowed){
        document.getElementById("amiDraggedObjectNoDrop").style.display = 'none';
        document.getElementById("amiDraggedObjectIcon").style.display = 'block';
        if(evt.ctrlKey){
            document.getElementById('amiDraggedObjectPlus').style.display = 'block';
        }else{
            document.getElementById('amiDraggedObjectPlus').style.display = 'none';
        }
    }else{
        document.getElementById("amiDraggedObjectNoDrop").style.display = 'block';
        document.getElementById("amiDraggedObjectIcon").style.display = 'none';
        document.getElementById('amiDraggedObjectPlus').style.display = 'none';
    }
}

var amiDndKeyDown = function(evt){
    if(doMouseDrag){
        amiDndUpdateObjects(evt);
    }
}

var amiDndKeyUp = function(evt){
    if(doMouseDrag){
        amiDndUpdateObjects(evt);
    }
}

var amiDndMouseMove = function(evt){
    evt = evt ? evt : window.event;
    if(doMouseDrag){
        docScrollStep = 0;
        clearTimeout(docScrollTimeout);
        
        evt = amiCommon.getValidEvent(evt);
        var overObject = amiCommon.getEventTarget(evt);
        
        var pos = amiCommon.getMousePosition(evt);
        var obj = document.getElementById('amiDraggedObject');
        obj.style.left = pos[0] + 10 + 'px';
        obj.style.top = pos[1] + 19 + 'px';
        if(overObject.getAttribute('amiDropTarget') == '1' && overObject.id != obj.objectId){
            itemId = overObject.id.substr(3);
            var innerLinks = document.getElementById("tree_it_"+itemId).getElementsByTagName('a');
            if(innerLinks.length > 0){
                setRuntimeStyle(innerLinks[0], 'color', "#990000");
                overObject.style.cursor = 'default';
            }else{
                setRuntimeStyle(document.getElementById("tree_it_"+itemId), 'color', "#990000");
            }
            isDropAllowed = true;
        }else{
            isDropAllowed = false;
        }
        amiDndUpdateObjects(evt);
        
        var mousePos = amiCommon.getMousePosition(evt);
        if(document.body.scrollTop > 0 && mousePos[1] - document.body.scrollTop < 10){
            docScrollStep = -10;
        }else if(document.body.scrollTop < document.body.scrollHeight && mousePos[1] - document.body.scrollTop > amiCommon.getDocumentClientHeight() - 10){
            docScrollStep = 10;
        }
        onDocumentScroll(evt);
    }else if(mouseDragAllowed){
        // Skip first move event
        if(doSkipInitDrag){
            doSkipInitDrag = false;
            return;
        }
        evt = amiCommon.getValidEvent(evt);
        var draggedObject = amiCommon.getEventTarget(evt);
        
        var pos = amiCommon.getElementPosition(draggedObject);

        var draggedObject2 = draggedObject.cloneNode(false);
        draggedObject2.id = 'amiDraggedObjectIcon';
        draggedObject2.className = 'dragedObject';

        var plusObj = document.createElement('img');
        plusObj.src = 'skins/vanilla/images/plus_white_bg.gif';
        plusObj.id = 'amiDraggedObjectPlus';
        plusObj.className = 'dragedObjectPlus';

        var ndropObj = document.createElement('img');
        ndropObj.src = 'skins/vanilla/images/ndrop_alpha_bg.gif';
        ndropObj.id = 'amiDraggedObjectNoDrop';
        ndropObj.className = 'dragedObjectNoDrop';
        
        var divObj = document.createElement('div');
        divObj.id = 'amiDraggedObject';
        divObj.className = 'dragedObject';
        divObj.style.left = pos[0] + 'px';
        divObj.style.top = pos[1] + 'px';
        divObj.style.width = draggedObject.offsetWidth + 'px';
        divObj.style.height = draggedObject.offsetHeight + 'px';
        divObj.appendChild(draggedObject2);
        divObj.appendChild(plusObj);
        divObj.appendChild(ndropObj);
        divObj.objectId = draggedObject.id;
        divObj = document.body.appendChild(divObj);

        itemId = draggedObject.id.substr(3);
        setRuntimeStyle(document.getElementById("tree_it_"+itemId), 'borderLeft', "2px #990000 solid");
        setRuntimeStyle(document.getElementById("tree_it_"+itemId), 'borderRight', "2px #990000 solid");
        
        doMouseDrag = true;
        isDropAllowed = false;
        amiDndUpdateObjects(evt);
    }
};

var amiDndMouseUp = function(evt){
    if(doMouseDrag){
        evt = amiCommon.getValidEvent(evt);
        doMouseDrag = false;
        mouseDragAllowed = false;
        doSkipInitDrag = true;
        var obj = document.getElementById('amiDraggedObject');
        obj.parentNode.removeChild(obj);

        evt = amiCommon.getValidEvent(evt);
        var overObject = amiCommon.getEventTarget(evt);
        if(overObject.getAttribute('amiDropTarget') == '1' && overObject.id != obj.objectId){
            DragEnd(evt, obj.objectId, overObject.id);
        }

        itemId = obj.objectId.substr(3);
        clearRuntimeStyle(document.getElementById("tree_it_"+itemId));
        clickAfterDnd = true;
        setTimeout('clickAfterDnd = false', 100);
    }
}

amiCommon.setEventHandler('scroll', document, onDocumentScroll);
amiCommon.setEventHandler('mousemove', document, amiDndMouseMove);
amiCommon.setEventHandler('mouseup', document, amiDndMouseUp);
amiCommon.setEventHandler('keydown', document, amiDndKeyDown);
amiCommon.setEventHandler('keyup', document, amiDndKeyUp);

function amiDndAllow(evt){
    mouseDragAllowed = true;
    doSkipInitDrag = true;
    evt = amiCommon.getValidEvent(evt);
    window.focus();
    amiCommon.stopEvent(evt);
}

function amiDndDisallow(evt){
    mouseDragAllowed = false;
    doSkipInitDrag = true;
}

function amiDndClearStyle(evt){
    evt = amiCommon.getValidEvent(evt);
    var overObject = amiCommon.getEventTarget(evt);
    
    itemId = overObject.id.substr(3);
    var innerLinks = document.getElementById("tree_it_"+itemId).getElementsByTagName('a');
    if(innerLinks.length > 0){
        clearRuntimeStyle(innerLinks[0]);
    }else{
        var obj = document.getElementById('amiDraggedObject');
        if(obj != null && overObject.id != obj.objectId){
            clearRuntimeStyle(document.getElementById("tree_it_"+itemId));
        }
    }
    overObject.style.cursor = 'pointer';
}

var amiDndCheckDrop = function(){
    return clickAfterDnd;
}
</script>
<table cellspacing=0 cellpadding=0 id="tree" helpId="site_map">
  <tr>
    <td>
      ##map##
    </td>
  </tr>
</table>