var ZOOM_CONTROL_ZOOM_FACTOR = 2;
var ZOOM_CONTROL_DRAG_SENSITIVITY = 7;

showProductZoom = function (pictureUrl)
{
    showZoomControlAddNode('productimage', false, null, null, pictureUrl);
}

showZoomControl = function(systemName, adminMode)
{
    showZoomControlAddNode(systemName, adminMode, null, null, null);
}

showZoomControlAddNode = function(systemName, adminMode, level, stamp, pictureUrl)
{
    var elmAlpha = showAlphaBox();

    var elmControl    = document.createElement('DIV');
    var elmCanvas     = document.createElement('DIV');
	var elmViewer     = document.createElement('DIV');
	var elmContent    = document.createElement('DIV');
	var elmCloseSmall = document.createElement('DIV');
    
    if (pictureUrl == null)
    {
        elmControl.className    = 'zoom_control';
        elmCanvas.className     = 'zoom_canvas';
        elmViewer.className     = 'zoom_viewer';
        elmContent.className    = 'zoom_content';
        elmCloseSmall.className = 'zoom_closebutton';
    }
    else
    {
        elmControl.className        = 'product_zoom_control';
        elmCanvas.className         = 'product_zoom_canvas';
        elmViewer.className         = 'product_zoom_viewer';
        elmContent.className        = 'product_zoom_content';
        elmCloseSmall.className     = 'product_zoom_closebutton';
    }
    
    elmAlpha.parentNode.appendChild(elmControl);
    elmControl.appendChild(elmCloseSmall);
    elmControl.appendChild(elmCanvas);
    elmCanvas.appendChild(elmViewer);
    elmViewer.appendChild(elmContent);
    
    if (adminMode)
    {
        elmControl.className += ' zoom_admin';
        
        var btnSave = document.createElement('INPUT');
        btnSave.className = 'zoom_save SearchButton';
        btnSave.type = 'button';
        btnSave.value = 'Opslaan';
        
        elmCloseSmall.appendChild(btnSave);
        
        btnSave.onclick = function()
        {
            var labelsLength = zoomImage.labels.length;
            
            createHiddenInput('zi_systemname', systemName);
            createHiddenInput('zi_labelcount', labelsLength);
            
            for (var i = 0; i < labelsLength; i++)
            {
                var label = zoomImage.labels[i];
                
                var name = 'zil_' + i + '_';
                createHiddenInput(name + 'x', label.x);
                createHiddenInput(name + 'y', label.y);
                createHiddenInput(name + 'w', label.w);
                createHiddenInput(name + 'h', label.h);
                createHiddenInput(name + 'level', label.level);
                createHiddenInput(name + 'stamp', label.stamp);
            }
            
            document.forms[0].submit();
        }
    }
    
    createHiddenInput = function(name, value)
    {
        var result = document.createElement('INPUT');
        result.type = 'hidden';
        result.name = name;
        result.value = value;
        elmControl.appendChild(result);
    }
    
    var imgSmall = document.createElement('IMG');
    if (pictureUrl != null)
        imgSmall.src = pictureUrl;
    else
	    imgSmall.src = '/Gfx/Zoom/' + systemName + '_small.png';
	
	imgSmall.alt = '';
	elmCanvas.appendChild(imgSmall);
    
    var imgLarge = document.createElement('IMG');
    if (pictureUrl != null)
    {
        imgLarge.src = pictureUrl;
        imgLarge.className = 'largezoompicture';
    }
    else
	    imgLarge.src = '/Gfx/Zoom/' + systemName + '_big.png';
	imgLarge.alt = '';
	elmContent.appendChild(imgLarge);

    var aClose = document.createElement('IMG');
    aClose.src = '/Gfx/close.png';
    aClose.style.cursor = 'pointer';
    elmCloseSmall.appendChild(aClose);
    
	var posCanvas = getAbsolutePosition(elmCanvas);
	var sizCanvas = getAbsoluteDimensions(elmCanvas);
	var sizViewer = getAbsoluteDimensions(elmViewer);
	
	var padViewerX = sizViewer.w / 2;
	var padViewerY = sizViewer.h / 2;

	elmViewer.style.position = 'absolute';
	elmViewer.style.display = 'none';

	elmContent.style.paddingLeft   = padViewerX + 'px';
	elmContent.style.paddingTop    = padViewerY + 'px';
	elmContent.style.paddingRight  = padViewerX + 'px';
	elmContent.style.paddingBottom = padViewerY + 'px';
	
    var url = '/XmlHttp/ZoomImage.aspx?systemname=';
    var urlSystemName = escape(systemName).replace(/\s/g, '%20');
    
    url += urlSystemName;
    url += '&nc=' + Math.random();
    
    var server = getXmlHttp();
    var zoomImage = null;
    
    server.onreadystatechange = function()
    {
        if (server.readyState != 'complete' && server.readyState != 4)
            return;

        zoomImage = readZoomImageResponse(server.responseXML);
        
        if (adminMode)
            showAllHotSpots();
    }
    
    server.open('GET', url);
    server.send(null);
    
    // Conversions between the 5 coordinate systems.
    
    // Mouse coordinates are relative to the viewport.
    // Absolute document coordinates are obtained by adding the scroll position.
    // Absolute canvas coordinates are obtained by subtracting the canvas position.
    coordViewPortToCanvas = function(evt)
    {
        return {
            x : evt.clientX + scrollX() - posCanvas.x - 2,
            y : evt.clientY + scrollY() - posCanvas.y - 2
        };
    }
    
    // Canvas (small image) coordinates to absolute image coordinates.
    coordCanvasToAbsolute = function(pos)
    {
        return {
            x : pos.x + posCanvas.x,
            y : pos.y + posCanvas.y
        };
    }
    
    // Canvas (small image) coordinates to virtual (large image) coordinates.
    coordCanvasToVirtual = function(pos)
    {
        return {
            x : pos.x * ZOOM_CONTROL_ZOOM_FACTOR,
            y : pos.y * ZOOM_CONTROL_ZOOM_FACTOR
        };
    }
    
    // Virtual (large image) coordinates to canvas (small image) coordinates.
    coordVirtualToCanvas = function(pos)
    {
        return {
            x : Math.floor(pos.x / ZOOM_CONTROL_ZOOM_FACTOR),
            y : Math.floor(pos.y / ZOOM_CONTROL_ZOOM_FACTOR)
        };
    }
    
    // Virtual (large image) coordinates to absolute coordinates
    // on the same scale as the large image.
    coordVirtualToContent = function(pos)
    {
        return {
            x : pos.x + padViewerX,
            y : pos.y + padViewerY
        };
    }
    
    // ***************************************
	
	elmCanvas.onmousemove = function(evt)
	{
		evt = evt || event;

		elmViewer.style.display = 'block';
		
		var pos = coordViewPortToCanvas(evt);

		positionViewer(pos);
	}
	
	var elmDragBox = null;
	var posDragStart = null;
		
    document.ondragstart   = function () { return false; }
    document.onselectstart = function () { return false; }
		
	elmViewer.onmousedown = function(evt)
	{
	    evt = evt || event;
	    
	    if (!adminMode || stamp == null)
	        return false;
	    
	    posDragStart = coordCanvasToVirtual(coordViewPortToCanvas(evt));
	    elmDragBox = null;

	    return false;
	}
	
	elmViewer.onmousemove = function(evt)
	{
		evt = evt || event;
		evt.cancelBubble = true;

		var cPos = coordViewPortToCanvas(evt);

		positionViewer(cPos);
		
		if (elmDragBox != null || posDragStart != null)
		{
		    vPos = coordCanvasToVirtual(cPos);
		    
		    if (posDragStart != null &&   
		        elmDragBox   == null &&
		        (Math.abs(vPos.x - posDragStart.x) >= ZOOM_CONTROL_DRAG_SENSITIVITY ||
		         Math.abs(vPos.y - posDragStart.y) >= ZOOM_CONTROL_DRAG_SENSITIVITY))
            {		           
	            // START DRAGGING
                var rPos = coordVirtualToContent(posDragStart);
                
                elmDragBox = document.createElement('DIV');
                elmDragBox.className = 'zoom_dragbox';
                elmDragBox.style.left = rPos.x + 'px';
                elmDragBox.style.top  = rPos.y + 'px';
                
                elmContent.appendChild(elmDragBox);
		    }
		    
		    if (elmDragBox != null)
		    {
		        var vWidth  = vPos.x - posDragStart.x;
	            var vHeight = vPos.y - posDragStart.y;
        	    
	            if (vWidth < ZOOM_CONTROL_DRAG_SENSITIVITY)
	                vWidth = ZOOM_CONTROL_DRAG_SENSITIVITY;
	            if (vHeight < ZOOM_CONTROL_DRAG_SENSITIVITY)
	                vHeight = ZOOM_CONTROL_DRAG_SENSITIVITY;

	            elmDragBox.style.width  = vWidth + 'px';
	            elmDragBox.style.height = vHeight + 'px';
	        }
		}
	}

	elmViewer.onmouseup = function(evt)
	{
	    evt = evt || event;
	    
	    if (!adminMode || stamp == null)
	        return false;
	    
        if (elmDragBox != null)
        {
            elmDragBox.parentNode.removeChild(elmDragBox);
            elmDragBox = null;
                        
            var cPos = coordViewPortToCanvas(evt);
            var vPos = coordCanvasToVirtual(cPos);
            
	        var zil = {
	            x     : posDragStart.x,
	            y     : posDragStart.y,
	            w     : vPos.x - posDragStart.x,
	            h     : vPos.y - posDragStart.y,
	            level : level,
	            stamp : stamp,
	            text  : '',
	            url   : ''
	        };
	        
	        zoomImage.labels.push(zil);
	        createHotSpot(zil);
	        
	        stamp = null;
	        level = 0;
        }
        
        posDragStart = null;

        return false;
	}

	positionViewer = function(canvasPos)
	{
		var cx = canvasPos.x;
		var cy = canvasPos.y;
		
		if (cx < 0 || cy < 0 || cx >= sizCanvas.w || cy >= sizCanvas.h)
		{
			elmViewer.style.display = 'none';
			return;
		}

        var cPos = { x : cx - padViewerX, y : cy - padViewerY };
        var vPos = coordCanvasToVirtual(canvasPos);
        
		elmViewer.style.left = cPos.x + 'px';
		elmViewer.style.top  = cPos.y + 'px';
		elmViewer.scrollLeft = vPos.x;
		elmViewer.scrollTop  = vPos.y;
		
	    labelHitTest(vPos);
	}
	
	var tmrDelay = null;
	var elmActiveLabel = null;
	var elmActiveAnchor = null;
	var elmActiveDelete = null;
	var lblActive = null;
	var allowLabelClose = true;
	
	labelHitTest = function(virtualPos)
	{
	    var vx = virtualPos.x;
	    var vy = virtualPos.y;
	    
	    if (zoomImage == null || !allowLabelClose)
            return;
        
        var labelsLength = zoomImage.labels.length;
        var lblFound = null;
        
        for (var i = 0; i < labelsLength; i++)
        {
            var label = zoomImage.labels[i];
            if (vx >= label.x &&
                vy >= label.y &&
                vx < (label.x + label.w) &&
                vy < (label.y + label.h)
               )
            {
                lblFound = label;
                break;
            }
        }

        if (lblFound != lblActive)
        {
            if (tmrDelay != null)
            {
                clearTimeout(tmrDelay);
                tmrDelay = null;
            }
            else if (elmActiveLabel != null && elmActiveAnchor != null)
            {
                elmViewer.style.cursor = 'auto';
                removeActiveLabel();
            }
            
            if (lblFound == null)
                elmViewer.style.cursor = 'auto';
            else
            {
                elmViewer.style.cursor = 'wait';
                
                if (tmrDelay == null)
                    // Asynch timer is to prevent server flooding when mouse sweeps over a lot of labels.
                    tmrDelay = setTimeout(function(z) { return function() { updateInfoCreateLabel(z); }}(lblFound), 100);
            }
            
            lblActive = lblFound;
        }
	}
	
	removeActiveLabel = function()
	{
        elmActiveAnchor.onmouseover = null;
        elmActiveAnchor.onmouseout  = null;
        elmContent.removeChild(elmActiveLabel);
        elmContent.removeChild(elmActiveAnchor);
        elmActiveLabel  = null;
        elmActiveAnchor = null;
        
        if (elmActiveDelete != null)
        {
            elmActiveDelete.onmouseover = null;
            elmActiveDelete.onmouseout  = null;
            elmContent.removeChild(elmActiveDelete);
            elmActiveDelete = null;
        }
        
        allowLabelClose = true;
        lblActive = null;
	}
	
	updateInfoCreateLabel = function(lblTarget)
	{
	    tmrDelay = null;
	    
	    if (lblTarget != lblActive)
	        return;
	        
	    if (lblTarget.text.length > 0 && lblTarget.url.length > 0)
	        createLabel(lblTarget);
	    else
	    {
            var url = '/XmlHttp/ZoomImageLabel.aspx';
            url += '?level=' + lblTarget.level;
            url += '&stamp=' + escape(lblTarget.stamp).replace(/\s/g, '%20');
            url += '&nc=' + Math.random();
            
            server = getXmlHttp();
                    
            server.onreadystatechange = function()
            {
                if (server.readyState != 'complete' && server.readyState != 4)
                    return;
                    
	            if (lblTarget != lblActive)
	                return;

                var xmlDoc = server.responseXML;
                
                lblTarget.text = xmlDoc.getElementsByTagName('Text')[0].firstChild.nodeValue;
                lblTarget.url  = xmlDoc.getElementsByTagName('Url')[0].firstChild.nodeValue;
                
                createLabel(lblTarget);
            }

            server.open('GET', url);
            server.send(null);
        }
    }
    
    createLabel = function(lblTarget)
    {
        var elmAnchor = document.createElement('A');
        elmAnchor.className = 'zoom_anchor';
        elmAnchor.appendChild(document.createTextNode(lblTarget.text));
        
        elmAnchor.href = lblTarget.url;
        elmContent.appendChild(elmAnchor);

        var sizAnchor = getAbsoluteDimensions(elmAnchor);
        var vPos = {
            x : lblTarget.x + lblTarget.w / 2 - sizAnchor.w / 2,
            y : lblTarget.y + lblTarget.h / 2 - sizAnchor.h / 2
        };
        
        var rPos = coordVirtualToContent(vPos);
        
        elmAnchor.style.left = rPos.x + 'px';
        elmAnchor.style.top  = rPos.y + 'px';
        
        var elmLabel = document.createElement('DIV');
        elmContent.appendChild(elmLabel);
        elmLabel.className    = 'zoom_label';
        elmLabel.style.left   = rPos.x + 'px';
        elmLabel.style.top    = rPos.y + 'px';
        elmLabel.style.width  = sizAnchor.w + 'px';
        elmLabel.style.height = sizAnchor.h + 'px';
        
        elmAnchor.onmouseover = function() { allowLabelClose = false; }
        elmAnchor.onmouseout  = function() { allowLabelClose = true; }
        
        if (adminMode)
        {
            var elmDelete = document.createElement('A');
            elmDelete.className = 'zoom_delete';
            elmDelete.appendChild(document.createTextNode('verwijder'));
            
            elmContent.appendChild(elmDelete);
            elmDelete.href = '#';
            
            elmDelete.style.left = rPos.x + 'px';
            elmDelete.style.top  = (rPos.y + sizAnchor.h) + 'px';
            elmDelete.style.width = sizAnchor.w + 'px';
            elmDelete.style.height = sizAnchor.h + 'px';
            var sizDelete = getAbsoluteDimensions(elmDelete);
            elmDelete.style.width = (sizAnchor.w - (sizDelete.w - sizAnchor.w)) + 'px';
            elmDelete.style.height = (sizAnchor.h - (sizDelete.h - sizAnchor.h)) + 'px';
           
            elmLabel.style.height = (sizAnchor.h * 2) + 'px';
            
            elmDelete.onmouseover = function() { allowLabelClose = false; }
            elmDelete.onmouseout  = function() { allowLabelClose = true; }
            
            elmDelete.onclick = function()
            {
                var idx = -1;
                var zoomImageLabelsLength = zoomImage.labels.length;
                for (var i = 0; i < zoomImageLabelsLength; i++)
                {
                    if (zoomImage.labels[i] == lblTarget)
                    {
                        idx = i;
                        break;
                    }
                }
                
                removeActiveLabel();
                removeHotSpot(idx);
                zoomImage.labels.splice(idx, 1);
            }
            
            elmActiveDelete = elmDelete;
        }
        
        elmActiveLabel  = elmLabel;
        elmActiveAnchor = elmAnchor;

        elmViewer.style.cursor = 'auto';
    }
    
    showAllHotSpots = function()
    {
        if (zoomImage == null)
            return;
            
        var labelsLength = zoomImage.labels.length;
        
        for (var i = 0; i < labelsLength; i++)
            createHotSpot(zoomImage.labels[i]);
    }
    
    removeHotSpot = function(labelIndex)
    {
        var hotspots_large = getByClassName(elmContent, 'DIV', 'zoom_hotspot_large');
        var hotspots_small = getByClassName(elmCanvas,  'DIV', 'zoom_hotspot_small');
        
        hotspots_large[labelIndex].parentNode.removeChild(hotspots_large[labelIndex]);
        hotspots_small[labelIndex].parentNode.removeChild(hotspots_small[labelIndex]);
    }
    
    createHotSpot = function(lblTarget)
    {
        var vPos = { x : lblTarget.x, y : lblTarget.y };
        var rPos = coordVirtualToContent(vPos);
        
        var elmHotSpotLarge = document.createElement('DIV');
        elmHotSpotLarge.className    = 'zoom_hotspot_large';
        elmHotSpotLarge.style.left   = rPos.x + 'px';
        elmHotSpotLarge.style.top    = rPos.y + 'px';
        elmHotSpotLarge.style.width  = lblTarget.w + 'px';
        elmHotSpotLarge.style.height = lblTarget.h + 'px';
        
        // Create a copy on the small image
        var cPos = coordVirtualToCanvas(vPos);
        var posBla = coordVirtualToCanvas({ x : lblTarget.w, y : lblTarget.h });

        elmHotSpotSmall = elmHotSpotLarge.cloneNode(true);
        elmHotSpotSmall.className    = 'zoom_hotspot_small';
        elmHotSpotSmall.style.left   = cPos.x + 'px';
        elmHotSpotSmall.style.top    = cPos.y + 'px';
        elmHotSpotSmall.style.width  = posBla.x + 'px';
        elmHotSpotSmall.style.height = posBla.y + 'px';
        
        elmContent.appendChild(elmHotSpotLarge);
        elmCanvas.appendChild(elmHotSpotSmall);
    }
    
    window.onresize = function()
    {
        posCanvas = getAbsolutePosition(elmCanvas);
    }
    
    aClose.onclick = function()
    {
        window.onresize = null;
        elmCanvas.onmousemove = null;
        elmViewer.onmousedown = null;
        elmViewer.onmousemove = null;
        elmViewer.onmouseup = null;
        
        aClose.onclick = null;
        
        elmControl.parentNode.removeChild(elmControl);
        elmControl = null;
        
        document.ondragstart   = null;
        document.onselectstart = null;
        
        hideAlphaBox();
        return false;
    }
	
    readZoomImageResponse = function(xmlDoc)
	{
	    var result = {
	        id         : 0,
	        systemName : '',
	        labels     : []
	    };

	    var xmlZoomImages = xmlDoc.getElementsByTagName('ZoomImage');
	    if (xmlZoomImages.length == 0)
	    {
	        //alert('Zoom image data record not found.');
	        return result;
	    }
	    
	    var xmlZoomImage = xmlZoomImages[0];
	    
	    result.id         = +xmlZoomImage.getElementsByTagName('Id')[0].firstChild.nodeValue;
	    result.systemName = +xmlZoomImage.getElementsByTagName('SystemName')[0].firstChild.nodeValue;
	    
	    var xmlLabels = xmlZoomImage.getElementsByTagName('ZoomImageLabel');
	    
	    var xmlLabelsLength = xmlLabels.length;
   
	    for (var i = 0; i < xmlLabelsLength; i++)
	    {
	        var xmlLabel = xmlLabels[i];
	        
	        var zil = {
	            x     : +xmlLabel.getElementsByTagName('X')[0].firstChild.nodeValue,
	            y     : +xmlLabel.getElementsByTagName('Y')[0].firstChild.nodeValue,
	            w     : +xmlLabel.getElementsByTagName('W')[0].firstChild.nodeValue,
	            h     : +xmlLabel.getElementsByTagName('H')[0].firstChild.nodeValue,
	            level : +xmlLabel.getElementsByTagName('Level')[0].firstChild.nodeValue,
	            stamp :  xmlLabel.getElementsByTagName('Stamp')[0].firstChild.nodeValue,
	            text  : '',
	            url   : ''
	        };
	        
	        result.labels.push(zil);
	    }
	    
	    return result;
	}
}