var currentActiveMenu = null;
var nextActiveMenu = null;
var imageSpecifier = "";
//var imageSel = "";
//var selReady = 0;
var surfaceNames;
var ImageMapID;
var SelectedRegionIndex = 1;
var SelectedTool = null; // Outline, CutOut, Perspective, Scale, null
var SelectedRegion = new Region(null);

//////////////////////////////////////////////////////////////////////////////////////////////////////

function Point()
{
    this.X = 0;
    this.Y = 0;
}

function Point3D()
{
    this.X = 0;
    this.Y = 0;
    this.Z = 0;
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function Region(regionID)
{
    this.RegionID = regionID;
    this.RowNum = null;
    this.OutlinePointsX = [];
    this.OutlinePointsY = [];
    this.CutOuts = [];
    this.PerspectivePointsX = [];
    this.PerspectivePointsY = [];
    this.PerspectivePoints3D = [];
    this.Height = 1;
    this.Width = 1;
    this.isSaved = true;
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function activateMenu(elementid)
{
	if(currentActiveMenu)
	{
		nextActiveMenu = elementid;
		deactivateMenu(currentActiveMenu);
	}
	else
	{
		var menuElement = document.getElementById(elementid);
		if(menuElement)
		{
			if(!(menuElement.currentY))
			{
				prepMenu(elementid);
			}
			menuElement.destinationWidth = 200;
			menuElement.style.visibility = "visible";
			currentActiveMenu = elementid;
			setTimeout("moveMenu('" + elementid + "');", 50);
		}
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function AddRegion(Name, SurfaceName)
{
    //alert("ImageMapper_Regions.aspx?ImageMapID=" + ImageMapID + "&Name=" + Name + "&SurfaceName=" + SurfaceName + "&Action=Add&rand=" + Math.random());
    AJAXReplace("RegionList","ImageMapper_Regions.aspx?ImageMapID=" + ImageMapID + "&Name=" + Name + "&SurfaceName=" + SurfaceName + "&Action=Add&rand=" + Math.random());
    deactivateMenu(currentActiveMenu);
}

function DeleteRegion()
{
    AJAXReplace("RegionList","ImageMapper_Regions.aspx?ImageMapID=" + ImageMapID + "&RegionID=" + SelectedRegion.RegionID + "&Action=Delete&rand=" + Math.random());
    deactivateMenu(currentActiveMenu);
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function GetXmlHttpObject(handler)
{ 
	var objXMLHttp = null;
	if(window.XMLHttpRequest)
	{
		objXMLHttp = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return objXMLHttp;
}	

//////////////////////////////////////////////////////////////////////////////////////////////////////

function AJAXReplace(elementid, url)
{
    var xmlHttp = GetXmlHttpObject();
    var baseElement = document.getElementById(elementid);
    if(xmlHttp == null || baseElement == null)
    {
	    return;
    }
    baseElement.innerHTML = "Loading, please wait...";
    baseElement.xmlHttpObject = xmlHttp;
    //eval("baseElement.xmlHttpFunction = function() { baseElement = document.getElementById(\"" + elementid + "\"); if(baseElement.xmlHttpObject.readyState==4 || baseElement.xmlHttpObject.readyState==\"complete\"){ baseElement.innerHTML = baseElement.xmlHttpObject.responseText;	} }");
    //eval("baseElement.xmlHttpFunction = function() { baseElement = document.getElementById(\"" + elementid + "\"); if(baseElement.xmlHttpObject.readyState==4 || baseElement.xmlHttpObject.readyState==\"complete\"){ var wrappingDiv = document.createElement('div');  wrappingDiv.innerHTML = baseElement.xmlHttpObject.responseText;  baseElement.appendChild(wrappingDiv);} }");
    baseElement.xmlHttpFunction = function() 
    {
        baseElement = document.getElementById(elementid);
        if(baseElement.xmlHttpObject.readyState==4 || baseElement.xmlHttpObject.readyState=="complete")
        {
            var wrappingDiv = document.createElement('div');
            wrappingDiv.innerHTML = baseElement.xmlHttpObject.responseText;
            baseElement.innerHTML = "";
            baseElement.appendChild(wrappingDiv);
        }
    }
    xmlHttp.onreadystatechange = baseElement.xmlHttpFunction;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

	
function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}


//////////////////////////////////////////////////////////////////////////////////////////////////////


function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}


//////////////////////////////////////////////////////////////////////////////////////////////////////


function prepMenu(elementid)
{
	var menuElement = document.getElementById(elementid);
	if(menuElement)
	{
		menuElement.destinationWidth = 200;
		menuElement.currentWidth = 0;
		menuElement.speedWidth = 20;
	}
}


//////////////////////////////////////////////////////////////////////////////////////////////////////


function moveMenu(elementid)
{
	var menuElement = document.getElementById(elementid);
	if(menuElement)
	{
		if(menuElement.destinationWidth < (menuElement.currentWidth - menuElement.speedWidth))
		{
			menuElement.currentWidth -= menuElement.speedWidth;
			menuElement.style.width = menuElement.currentWidth + "px";		
			setTimeout("moveMenu('" + elementid + "');", 50);
		}
		else if(menuElement.destinationWidth > (menuElement.currentWidth + menuElement.speedWidth))
		{
			menuElement.currentWidth += menuElement.speedWidth;
			menuElement.style.width = menuElement.currentWidth + "px";	
			setTimeout("moveMenu('" + elementid + "');", 50);
		}
		else
		{
			if(menuElement.destinationWidth < 1)
			{
				menuElement.style.visibility = "hidden";
			}
			menuElement.currentWidth = menuElement.destinationWidth;
			menuElement.style.width = menuElement.currentWidth + "px";		
			if(currentActiveMenu == elementid && menuElement.destinationWidth <= 0)
			{
				currentActiveMenu = null;
			}
			if(nextActiveMenu)
			{
				activateMenu(nextActiveMenu);
				nextActiveMenu = null;
			}
		}
	}
}


//////////////////////////////////////////////////////////////////////////////////////////////////////


function deactivateMenu(elementid)
{
	var menuElement = document.getElementById(elementid);
	if(menuElement)
	{
		if(!menuElement.currentY)
		{
			prepMenu(menuElement);
		}
		menuElement.destinationWidth = 0;
		setTimeout("moveMenu('" + elementid + "');", 50);
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function showAddRegion()
{
    if(currentActiveMenu == "addregionmenu")
    {
        deactivateMenu("addregionmenu")
    }
    else
    {
        //AJAXReplace("stylesearchmenuinner", "vismenu_stylesearch.cfm");
        activateMenu("addregionmenu");
    }
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function showDeleteRegion()
{
    // First make sure we have a selected Region
    if(currentActiveMenu == "deleteregionmenu")
    {
        deactivateMenu("deleteregionmenu")
    }
    else
    {
        activateMenu("deleteregionmenu");
    }
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function showPerspectiveTool()
{
    // First make sure we have a selected Region
    //if(currentActiveMenu == "PerspectiveDropDown")
    //{
        deactivateMenu("PerspectiveDropDown")
        //SelectTool('none');
    //}
    //else
    //{
        //activateMenu("PerspectiveDropDown");
        SelectTool('Perspective');
        /*
        // Is the perspective already set?
        if(SelectedRegion.PerspectivePoints3D.length < 1)
        {
            // Do we have at least 3 outline points?
            if(SelectedRegion.OutlinePointsX.length > 2)
            {
                // load the 2D points
                for(i = 0; i < SelectedRegion.OutlinePointsX.length; i++)
                {
                    p = new Point();
                    p.X = SelectedRegion.OutlinePointsX[i];
                    p.Y = SelectedRegion.OutlinePointsY[i];
                    outlinePoints[outlinePoints.length] = p;
                }
                // define the origin as the center of the outline
                origin = ComputeCenterPoint(outlinePoints);
                
                // define the starting points as a box centered on the center point of the outline;
                verts[0].X = origin.X - 50;
                verts[0].Y = origin.Y - 50;
                verts[0].Z = -1;
                
                verts[1].X = origin.X + 50;
                verts[1].Y = origin.Y - 50;
                verts[1].Z = -1;
                
                verts[2].X = origin.X + 50;
                verts[2].Y = origin.Y + 50;
                verts[2].Z = -1;
                
                verts[3].X = origin.X - 50;
                verts[3].Y = origin.Y + 50;
                verts[3].Z = -1;
            }
            else
            {
                alert("You must have at least 3 points in this region's outline before creating the perspective");
            }
        }
        */
        RefreshImage();
    //}
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function showScaleTool()
{
    // First make sure we have a selected Region
    if(currentActiveMenu == "ScaleDropDown")
    {
        deactivateMenu("ScaleDropDown")
        SelectTool('none');
    }
    else
    {
        document.getElementById("txtHeight").value = SelectedRegion.Height;
        document.getElementById("txtWidth").value = SelectedRegion.Width;
        activateMenu("ScaleDropDown");
        SelectTool('Scale');
    }
}

/////////////////////////////////////////////////////////////////////////////////////////////////////

function SetScale(h, w)
{
    // FIX: need to do unit conversions
    SelectedRegion.Height = h;
    SelectedRegion.Width = w;
    SelectedRegion.isSaved = false;
    showScaleTool();
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function changeSelectedRegion(newIndex)
{
    // Refresh the div only if we have to
    if(newIndex != SelectedRegionIndex)
    {
        // deactivate any currently active menu
        deactivateMenu(currentActiveMenu);
        
        SelectedRegionIndex = newIndex;
        var regionListURL = "ImageMapper_Regions.aspx?ImageMapID=" + ImageMapID + "&SelectedIndex=" + SelectedRegionIndex + "&rand=" + Math.random();
        
        // Check to see if we have to save the current one
        if(!SelectedRegion.isSaved)
        {
            // Save action expects parameters: RegionID, OutlinePoints, PerspectivPoints3D, PerspectivePoints2D, Height, Width (and in the future, cutouts)
            regionListURL += "&Action=Save&RegionID=" + SelectedRegion.RegionID.toString();
            oPoints = new Array();
            for(var i = 0; i < SelectedRegion.OutlinePointsX.length; i++)
            {
                oPoints[oPoints.length] = SelectedRegion.OutlinePointsX[i];
                oPoints[oPoints.length] = SelectedRegion.OutlinePointsY[i];
            }
            regionListURL += "&OutlinePoints=" + oPoints.toString();
            pPoints = new Array();
            for(var j = 0; j < SelectedRegion.PerspectivePointsX.length; j++)
            {
                pPoints[pPoints.length] = SelectedRegion.PerspectivePointsX[j];
                pPoints[pPoints.length] = SelectedRegion.PerspectivePointsY[j];
            }
            regionListURL += "&PerspectivePoints2D=" + pPoints.toString();
            regionListURL += "&PerspectivePoints3D=,";
            regionListURL += "&Height=" + SelectedRegion.Height.toString();
            regionListURL += "&Width=" + SelectedRegion.Width.toString();
        }
        //alert(regionListURL);
        AJAXReplace("RegionList",regionListURL);
    }
}

function setRegion(regionID, rowNum, outlinePoints, perspectivePoints, perspectivePoints3D, height, width, cutOuts)
{
    var newRegion = new Region(regionID);
    
    newRegion.RegionID = regionID;
    newRegion.RowNum = rowNum;
    // parse the outline points into an array of 2D points
    var oPoints;
    eval("oPoints = [" + outlinePoints + "]");
    var isX = true;
    for(var i = 0; i < oPoints.length; i++)
    {
        if(isX)
        {
            newRegion.OutlinePointsX[newRegion.OutlinePointsX.length] = oPoints[i];
            isX = false;
        }
        else
        {
            newRegion.OutlinePointsY[newRegion.OutlinePointsY.length] = oPoints[i];
            isX = true;
        }
    }
    //parse the 2d Perspective points
    var pPoints;
    //alert("pPoints = [" + perspectivePoints + "]");
    eval("pPoints = [" + perspectivePoints + "]");
    isX = true;
    for(var i = 0; i < pPoints.length; i++)
    {
        if(isX)
        {
            newRegion.PerspectivePointsX[newRegion.PerspectivePointsX.length] = pPoints[i];
            isX = false;
        }
        else
        {
            newRegion.PerspectivePointsY[newRegion.PerspectivePointsY.length] = pPoints[i];
            isX = true;
        }
    }
    /*
    // parse the perspective points into an array of 3D points
    var pPoints;
    eval("pPoints = [" + perspectivePoints3D + "]");
    var axis = "x";
    newRegion.PerspectivePoints3D = [];
    for(var j = 0; j < oPoints.length; j++)
    {
        switch(axis)
        {
            case "x":
                newRegion.PerspectivePoints3D[newRegion.PerspectivePoints3D.length] = new Point3D();
                newRegion.PerspectivePoints3D[newRegion.PerspectivePoints3D.length-1].X = pPoints[i];
                axis = "y";
                break;
            case "y":
                newRegion.PerspectivePoints3D[newRegion.PerspectivePoints3D.length-1].Y = pPoints[i];
                axis = "z";
                break;
            case "z":
                newRegion.PerspectivePoints3D[newRegion.PerspectivePoints3D.length-1].Z = pPoints[i];
                axis = "x";
                break;
        }
    }
    */
    newRegion.Height = height;
    newRegion.Width = width;
    // parse the cutout points into a jagged array of 2D points
    //newRegion.CutOuts = ;
    //newRegion.isSaved = true;
    
    SelectedRegion = newRegion;
    SelectTool('none');
    //alert("setRegion(" + regionID + ", " + rowNum + ", " + outlinePoints + ", " + perspectivePoints3D + ", " + height + ", " + width + ", " + cutOuts + ")");
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function SelectTool(toolName)
{
    if(toolName != SelectedTool)
    {
        // Need to save current data?
        //if(!SelectedRegion.isSaved)
        //{
            //SaveRegion();
        //}
        
        // set all to off
        document.getElementById("imgOutline").setAttribute("src","images/outline-off.gif");
        document.getElementById("imgCutOut").setAttribute("src","images/cutout-off.gif");
        document.getElementById("imgPerspective").setAttribute("src","images/perspective-off.gif");
        document.getElementById("imgScale").setAttribute("src","images/scale-off.gif");
        
        switch(toolName)
        {
            case 'Outline':
                document.getElementById("imgOutline").setAttribute("src","images/outline-on.gif");
                SelectedTool = 'Outline';
                break;
            case 'CutOut':
                document.getElementById("imgCutOut").setAttribute("src","images/cutout-on.gif");
                SelectedTool = 'CutOut';
                break;
            case 'Perspective':
                document.getElementById("imgPerspective").setAttribute("src","images/perspective-on.gif");
                SelectedTool = 'Perspective';
                break;
            case 'Scale':
                document.getElementById("imgScale").setAttribute("src","images/scale-on.gif");
                SelectedTool = 'Scale';
                break;
            default:
                SelectedTool = 'none';
                break;
        }
        RefreshImage();
    }
}

//////////////////////////////////////////////////////////////////////////////////////////////////////
function setCutOutMode()
{
    SelectTool('CutOut');
    deactivateMenu(currentActiveMenu);
}

///////////////////////////////////////////////////

function setOutlineMode()
{
    SelectTool('Outline');
    deactivateMenu(currentActiveMenu);
}

/////////////////////////////////////////////////////////////////////////////////////////////////////

function saveAndReturn()
{
    SelectedRegion.isSaved = false;
    changeSelectedRegion(999);
    window.location = "SubmitProject.aspx?ImageMapID=" + ImageMapID + "&rand=" + Math.random();
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

function setupPage()
{
}

//////////////////////////////////////////////////////////////////////////////////////////////////////

window.onload = setupPage;