var progressDiv = null;
var searchDiv = null;
var listDiscipline = null;
var listCategory = null;
var listType = null;
var listSystem = null;
var listDescription = null;

var txtSearch = null;
var btnGo = null;

var view = null;
var btnPlace = null;
var btnInsert = null;

var lblCategory = null;
var lblType = null;
var lblSystem = null;
var lblSearch = null;
var lblDescription = null;

var outerDiv = null;
var innerDiv = null;
var imgCAD = null;
var sliderDiv = null;
var slider = null;
var sliding = false;
var offset = 0;

var count = 10;

var lastCursor = null;
var lastOnMouseDown = null;
var lastOnMouseMove = null;
var lastOnMouseUp = null;
var lastOnMouseWheel = null;
//var lastOnDragClick = null;

var sliderDiv_mousedown = false;

// ----------------- Add our init function to the onload event ------------------------ //
var oldonload = window.onload;
if (typeof window.onload != 'function') 
{
	window.onload = init;
}
else 
{
	window.onload = function() { oldonload();
						         init();      }
}

function init() 
{   
    progressDiv = document.getElementById("progressDiv");
    searchDiv = document.getElementById("searchDiv");
    
    listDiscipline = document.getElementById("listDiscipline");
    listCategory = document.getElementById("listCategory");
    listType = document.getElementById("listType");
    listSystem = document.getElementById("listSystem");
    listDescription = document.getElementById("listDescription");
    
    txtSearch = document.getElementById("txtSearch");
    btnGo = document.getElementById("btnGo");
    
    view = document.getElementById("view");
    btnPlace = document.getElementById("btnPlace");
    btnInsert = document.getElementById("btnInsert");
    
    lblCategory = document.getElementById("lblCategory");
    lblType == document.getElementById("lblType");
    lblSystem == document.getElementById("lblSystem");
    lblSearch == document.getElementById("lblSearch");
    lblDescription == document.getElementById("lblDescription");
    
    outerDiv = document.getElementById("outerDiv");
    innerDiv = document.getElementById("innerDiv");
    imgCAD = document.getElementById("imgCAD");
    	
	onWinResize();
	 
	outerDiv.onmousewheel = zoomInnerDiv;
	outerDiv.onmousedown = startMove;
	outerDiv.onmousemove = processMove;
	outerDiv.onmouseup = stopMove;
		
	// necessary to enable dragging on IE
	outerDiv.ondragstart = function() { return false; }	
	loadZoomPanel();
}

function saveListeners()
{
    lastCursor = outerDiv.style.cursor;
    lastOnMouseDown = outerDiv.onmousedown;
    lastOnMouseMove = outerDiv.onmousemove;
    lastOnMouseUp = outerDiv.onmouseup;
    lastOnMouseWheel = outerDiv.onmousewheel; 
    //lastOnDragClick = onDragClick;
    
    outerDiv.style.cursor = "";
    outerDiv.onmousedown = null;
    outerDiv.onmousemove = null;
    outerDiv.onmouseup = null;
    outerDiv.onmousewheel = null;
    //onDragClick = null;
}

function restoreListeners()
{
    //sliderDiv.focus(); 
    outerDiv.style.cursor = lastCursor;
    outerDiv.onmousedown = lastOnMouseDown;
    outerDiv.onmousemove = lastOnMouseMove;
    outerDiv.onmouseup   = lastOnMouseUp;
    outerDiv.onmousewheel = lastOnMouseWheel;
    //onDragClick = lastOnDragClick;
}

function sliderDiv_onmousedown()
{
    sliderDiv_mousedown = true; 
}

function sliderDiv_onmousemove()
{
    if ( sliderDiv_mousedown == true )
    {
        //sliderDiv.focus();  
        //sliderDiv.select():
    }
}

function sliderDiv_onmouseup()
{
    sliderDiv_mousedown = false; 
}
// ----------------------------------------------------------------------------------- //

// ----------------------------- zoom and move panel --------------------------------- //
function loadZoomPanel()
{
    var topDiv = document.getElementById("topDiv");
    var bottomDiv = document.getElementById("bottomDiv");
    sliderDiv = document.getElementById("sliderDiv");
    
    sliderDiv.onmouseover = saveListeners;
    sliderDiv.onmouseout = restoreListeners;
     
    var top = document.getElementById("top");
    if ( top == null )
    {
        top = document.createElement("div");
        top.setAttribute("id", "top");
        top.style.width = '59px';
        top.style.height = '354px';
        top.style.position = 'absolute';
        top.style.left = '0px';
        top.style.top = '0px';
        if( document.all )
            top.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources/images/lmc.png')";
        topDiv.appendChild(top);
            
        var topImg = document.getElementById("topImg");
        if ( topImg == null )
        {
            topImg = document.createElement("img");
            topImg.setAttribute("id", "topImg");
            topImg.src = "resources/images/lmc.png";
            if( document.all )
                topImg.style.visibility = "hidden";
            top.appendChild(topImg);
        }
   }
        
    var upDiv =  document.getElementById("upDiv");
    if ( upDiv == null )
    {
	    upDiv = document.createElement("div");
	    upDiv.setAttribute("id", "upDiv");
	    upDiv.style.width = '18px';
	    upDiv.style.height = '18px';
	    upDiv.style.position = 'absolute';
	    upDiv.style.left = '20px';
	    upDiv.style.top = '0px';
	    upDiv.style.cursor = "pointer";
	    if( document.all )
		    upDiv.style.filter = "filter:alpha(opacity=1)";
	    upDiv.title = "Go up";
	    upDiv.onclick = moveUp;
	    topDiv.appendChild(upDiv);
    }
	
    var leftDiv =  document.getElementById("leftDiv");
    if ( leftDiv == null )
    {
	    leftDiv = document.createElement("div");
	    leftDiv.setAttribute("id", "leftDiv");
	    leftDiv.style.width = '18px';
	    leftDiv.style.height = '18px';
	    leftDiv.style.position = 'absolute';
	    leftDiv.style.left = '0px';
	    leftDiv.style.top = '20px';
	    leftDiv.style.cursor = "pointer";
	    if( document.all )
		    leftDiv.style.filter = "filter:alpha(opacity=1)";
	    leftDiv.title = "go left";
	    leftDiv.onclick = moveLeft;
	    topDiv.appendChild(leftDiv);
    }
	
    var rightDiv =  document.getElementById("rightDiv");
    if ( rightDiv == null )
    {
        rightDiv = document.createElement("div");
        rightDiv.setAttribute("id", "rightDiv");
        rightDiv.style.width = '18px';
        rightDiv.style.height = '18px';
        rightDiv.style.position = 'absolute';
        rightDiv.style.left = '40px';
        rightDiv.style.top = '20px';
        rightDiv.style.cursor = "pointer";
        if( document.all )
            rightDiv.style.filter = "filter:alpha(opacity=1)";
        rightDiv.title = "Go right";
        rightDiv.onclick = moveRight;
        topDiv.appendChild(rightDiv);
    }
    
    var downDiv =  document.getElementById("downDiv");
    if ( downDiv == null )
    {
        downDiv = document.createElement("div");
        downDiv.setAttribute("id", "downDiv");
        downDiv.style.width = '18px';
        downDiv.style.height = '18px';
        downDiv.style.position = 'absolute';
        downDiv.style.left = '20px';
        downDiv.style.top = '40px';
        downDiv.style.cursor = "pointer";
        if( document.all )
            downDiv.style.filter = "filter:alpha(opacity=1)";
        downDiv.title = "Go down";
        downDiv.onclick = moveDown;
        topDiv.appendChild(downDiv);
    }
    
    var originalDiv =  document.getElementById("originalDiv");
    if ( originalDiv == null )
    {
        originalDiv = document.createElement("div");
        originalDiv.setAttribute("id", "originalDiv");
        originalDiv.style.width = '18px';
        originalDiv.style.height = '18px';
        originalDiv.style.position = 'absolute';
        originalDiv.style.left = '20px';
        originalDiv.style.top = '20px';
        originalDiv.style.cursor = "pointer";
        if( document.all )
            originalDiv.style.filter = "filter:alpha(opacity=1)";
        originalDiv.title = "Return to the original";
        originalDiv.onclick = returnOriginal;
        topDiv.appendChild(originalDiv);
    }
    
    var inDiv =  document.getElementById("inDiv");
    if ( inDiv == null )
    {
        inDiv = document.createElement("div");
        inDiv.setAttribute("id", "inDiv");
        inDiv.style.width = '18px';
        inDiv.style.height = '18px';
        inDiv.style.position = 'absolute';
        inDiv.style.left = '20px';
        inDiv.style.top = '65px';
        inDiv.style.cursor = "pointer";
        if( document.all )
            inDiv.style.filter = "filter:alpha(opacity=1)";
        inDiv.title = "Zoom In";
        inDiv.onclick = zoomIn;
        topDiv.appendChild(inDiv);
    }
    
    
    var bottom = document.getElementById("bottom");
    if ( bottom == null )
    {
        bottom = document.createElement("div");
        bottom.setAttribute("id", "bottom");
        bottom.style.width = '59px';
        bottom.style.height = '30px';
        if( document.all )
            bottom.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources/images/lmc-bottom.png')";
        bottomDiv.appendChild(bottom);
        
        var bottomImg = document.getElementById("bottomImg");
        if ( bottomImg == null )
        {
            bottomImg = document.createElement("img");
            bottomImg.setAttribute("id", "bottomImg");
            bottomImg.src = "resources/images/lmc-bottom.png";
            if( document.all )
                bottomImg.style.visibility = "hidden";
            bottom.appendChild(bottomImg);
        }
    }
    
    var outDiv =  document.getElementById("outDiv");
    if ( outDiv == null )
    {
        outDiv = document.createElement("div");
        outDiv.setAttribute("id", "outDiv");
        outDiv.style.width = '18px';
        outDiv.style.height = '18px';
        outDiv.style.position = 'absolute';
        outDiv.style.left = '20px';
        outDiv.style.top = '11px';
        outDiv.style.cursor = "pointer";
        if( document.all )
            outDiv.style.filter = "filter:alpha(opacity=1)";
        outDiv.title = "Zoom Out";
        outDiv.onclick = zoomOut;
        bottomDiv.appendChild(outDiv);
    }
    
    slider = document.getElementById("slider");
    if ( slider == null )
    {
        slider = document.createElement("div");
        slider.setAttribute("id", "slider");
        slider.style.position = 'absolute';
        slider.style.left = '0px';
        slider.style.top = (23-count)*8 + 'px';
        slider.style.width = '22px';
        slider.style.height = '14px';
        slider.style.cursor = "url('resources/images/openhand.cur')";
        if( document.all )
            slider.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resources/images/slider.png')";
            
        slider.onmousedown = startSliding;
	    slider.onmousemove = processSliding;
	    slider.onmouseup = stopSliding;
	    slider.onmouseleave = stopSliding;
	
        sliderDiv.appendChild(slider);
        
        var sliderImg = document.getElementById("sliderImg");
        if ( sliderImg == null )
        {
            sliderImg = document.createElement("img");
            sliderImg.setAttribute("id", "sliderImg");
            sliderImg.src = "resources/images/slider.png";
            if( document.all )
                sliderImg.style.visibility = "hidden";
            slider.appendChild(sliderImg);
        }
    }
}

function returnOriginal()
{
    count = 10;
    getWinSize();
    setInnerDivSize(windowWidth*0.6, windowHeight*0.85);
    innerDivResize(count);
    
    if ( slider != null )
        slider.style.top = (23-count)*8 + 'px';
}

function moveUp()
{
    innerDiv.style.top = (stripPx(innerDiv.style.top) - 100) + 'px';
}

function moveDown()
{
    innerDiv.style.top = (stripPx(innerDiv.style.top) + 100) + 'px';
}

function moveLeft()
{
    innerDiv.style.left = (stripPx(innerDiv.style.left) - 100) + 'px';
}

function moveRight()
{
    innerDiv.style.left = (stripPx(innerDiv.style.left) + 100) + 'px';
}

function zoomIn()
{
    if ( count < 23 )
        count++;

    if ( slider != null )
    {
        slider.style.top = (23-count)*8 + 'px';
    }
    innerDivResize(count);
}

function zoomOut()
{
    if ( count > 6 )
        count--;

    if ( slider != null )
    {
        slider.style.top = (23-count)*8 + 'px';
    }
    innerDivResize(count);
}

function startSliding()
{
    // necessary for IE
    if (!event) 
        event = window.event;
        
    if( document.all )
	    slider.style.cursor = "resources/images/closedhand.cur";
	    
	sliding = true;
	
	offset = (window.event.clientY - 173) - slider.style.pixelTop;
	
	window.event.returnValue = false;
	window.event.cancelBubble = true;

}

function processSliding()
{
    // necessary for IE
    if (!event) 
        event = window.event;
    
    if ( sliding == true )
    {
        var Y = window.event.clientY - 173;
        
        if ( Y >= 0 )
        {
            var dy = Y - offset;
            
            if ( dy < 0 )
                dy = 0;
                
            if ( dy > 136 )
                dy = 136
            
            count = 23 - Math.round(dy/8);
            slider.style.top = (23-count)*8 + 'px';
            innerDivResize(count);
            
            
        }
    }
    
    window.event.returnValue = false;
	window.event.cancelBubble = true;

}

function stopSliding()
{
    slider.style.cursor = "resources/images/openhand.cur";
    offset = 0;
    sliding = false;
}
// ------------------------------------------------------------------------------------- //


// ----------------------- set position and size for Divs ------------------------------ //
function setSearchDivSize(win_width, win_height) 
{
    var width = 250;//win_width*0.3;
    var height = win_height-40;
    
    //if ( width < 250 )
    //    width = 250;
        
    //if ( width > 390 )
    //    width = 390;
        
    if ( height < 450 )
        height = 450;
    
    //var h = (height - 300)/5;
    
    searchDiv.style.left = '20px';
    searchDiv.style.top = '20px';

	searchDiv.style.width = width + 'px';  
	searchDiv.style.height = height + 'px';
	  
	listDiscipline.style.width = width - 40 + 'px';
	//listDiscipline.style.height = h + 'px';
	
	//lblCategory.style.top = h + 40 + 'px';
	
	//listCategory.style.top = h + 60 + 'px';
	listCategory.style.width = width - 40 + 'px';
	//listCategory.style.height = h + 'px';
	
	//lblType.style.top = 2*h + 70 + 'px';  
	
	//listType.style.top = 2*h + 90 + 'px'; 
	listType.style.width = width - 40 + 'px';
	//listType.style.height = h + 'px';
	
	listSystem.style.width = width - 40 + 'px';
	//listSystem.style.height = h + 'px';
		
	txtSearch.style.width = width - 100 + 'px';
	btnGo.style.left = width - 60 + 'px';
		
	listDescription.style.width = width - 40 + 'px';
	//listDescription.style.height = h + 'px';
	
	view.style.width = width - 40 + 'px';
	btnPlace.style.left = width - 140 + 'px';
	btnInsert.style.left = width - 140 + 'px';
}

function setOuterDivSize(win_width, win_height) 
{
    var width = 250;//win_width*0.3;
    var height = win_height-40;
    
    //if ( width <= 250 )
    //{
        outerDiv.style.left = 290 + 'px';
        
        if ( win_width - 310 < 400 )
            outerDiv.style.width = 400 + 'px';
        else
            outerDiv.style.width = win_width - 310 + 'px';
    //}
    //else if ( width > 250 && width < 390 )
    //{
    //    outerDiv.style.left = width + 40 + 'px';
    //    outerDiv.style.width = win_width - width - 60 + 'px';
    //}
    //else
    //{
    //    outerDiv.style.left = '430px';
    //    outerDiv.style.width = win_width - 450 + 'px';
    //}
        
    outerDiv.style.top = '20px';
    
    if ( height < 450 )
        height = 450;
        
    outerDiv.style.height = height + 'px';
}
    
function setInnerDivSize(width, height) 
{   
    if (width == height )
    {   
        innerDiv.style.width = width + 'px';
        innerDiv.style.height = height+ 'px';
        innerDiv.style.left = '0px'; 
        innerDiv.style.top = '0px';
        imgCAD.style.width = width + 'px';
        imgCAD.style.height = height + 'px';
    }
    else if ( width > height)
    {
        height = width;
        innerDiv.style.width = width + 'px';
        innerDiv.style.height = height+ 'px';
        innerDiv.style.left = '0px';
        innerDiv.style.top = (stripPx(outerDiv.style.height)-height)/2 + 'px';
        imgCAD.style.width = width + 'px';
        imgCAD.style.height = height + 'px';
    }
    else
    {
        width = height;
        innerDiv.style.width = width + 'px';
        innerDiv.style.height = height+ 'px';
        innerDiv.style.left = (stripPx(outerDiv.style.width)-width)/2 + 'px';
        innerDiv.style.top = '0px'; 
        imgCAD.style.width = width + 'px';
        imgCAD.style.height = height + 'px';
    }
}

function setProgressDivPos(top, left) 
{
    progressDiv.style.top = top + 'px';
    progressDiv.style.left = left + 'px';
 
}
// -------------------------------------------------------------------------------------- //



// ----------------------------- on window resize -------------------------------------- //
var oldonresize = window.onresize;
if( typeof window.onresize != 'function')
{
	window.onresize = function() { onWinResize();	}
}
else
{
	window.onresize = function() { oldonresize(); onWinResize(); }
}	

var windowWidth = 0;
var windowHeight = 0;

function onWinResize()
{
    getWinSize();
    
    setSearchDivSize(windowWidth, windowHeight);
    setOuterDivSize(windowWidth, windowHeight)
    setInnerDivSize(windowWidth*0.6, windowHeight*0.85)
    setProgressDivPos(7, windowWidth*0.3-20);
}

function getWinSize() 
{ 
    if( document.documentElement && 
       ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
    {
        //IE 6+ in 'standards compliant mode'
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } 
    else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
    {
        //IE 4 compatible
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }
    else if( typeof( window.innerWidth ) == 'number' ) 
    {
        //Non-IE
        windowWidth = window.innerWidth;
        windowHeight = window.innerHeight;
    } 
}
// ------------------------------------------------------------------------------------ //




// ------------------------------ dynamic zoom ---------------------------------------- //
function zoomInnerDiv()
{
    outerDiv.style.cursor = "default";
	count = counting(count);
	innerDivResize(count);
	//outerDiv.style.cursor = "";
	return false;
}

function counting(count)
{       
    if (event.wheelDelta >= 120)
    {
        if ( count < 23 )
            count++;
    }
    else if (event.wheelDelta <= -120 )
    {
        if ( count > 6 )
            count--;   
    }
    
    //slider = document.getElementById("slider");
    if ( slider != null )
    {
        slider.style.top = (23-count)*8 + 'px';
    }
    return count; 
}
function innerDivResize(count)
{
    innerDiv.style.zoom = count + '0%';
    imgCAD.style.zoom = count + '0%';
}

function stopZoom()
{
    outerDiv.style.cursor = "";
}
// ------------------------------------------------------------------------------------ //





// --------------------------------- drag and move ----------------------------------- //
var dragging = false;
var top = 0;
var left = 0;
var dragStartTop = 0;
var dragStartLeft = 0;

function startMove(event) 
{
    // necessary for IE
    if (!event) 
        event = window.event;
	    	
	dragStartLeft = event.clientX;
	dragStartTop = event.clientY;
	
	if( document.all )
	    outerDiv.style.cursor = "resources/images/closedhand.cur";
	    //innerDiv.style.cursor = "url('resources/images/closedhand.cur')";
	else
	    outerDiv.style.cursor = "-moz-grab";
	    //innerDiv.style.cursor = "-moz-grab";

	top = stripPx(innerDiv.style.top);
	left = stripPx(innerDiv.style.left);
	dragging = true;
		
	return false;
}

function processMove(event) 
{
    if (!event) 
        event = window.event; // for IE
	
	if (dragging) 
	{   
        innerDiv.style.top = top + (event.clientY - dragStartTop) + 'px';
		innerDiv.style.left = left + (event.clientX - dragStartLeft) + 'px';
	}
}

function stopMove() 
{
    //innerDiv.style.cursor = "url('resources/images/openhand.cur')";
	outerDiv.style.cursor = "";
	dragging = false;
}

function stripPx(value) 
{
	if (value == "") 
	    return 0;
	    
	return parseFloat(value.substring(0, value.length - 2));
}
// ------------------------------------------------------------------------------------ //






// ------------------------------------- Tiles ----------------------------------------- //

function getVisibleTiles() 
{
	var mapX = stripPx(innerDiv.style.left);
	var mapY = stripPx(innerDiv.style.top);
}

// ------------------------------------------------------------------------------------ //