var currentActiveMenu = null;
var nextActiveMenu = null;
var imageSpecifier = "";
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 Region(regionID)
{
    this.RegionID = regionID;
    this.RowNum = null;
    this.OutlinePointsX = [];
    this.OutlinePointsY = [];
    this.CutOuts = [];
    this.PerspectivePointsX = [];
    this.PerspectivePointsY = [];
    this.Height = 1;
    this.Width = 1;
    this.isSaved = true;
}

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

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 SaveRegion()
{
    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 += "&Height=" + SelectedRegion.Height.toString();
            regionListURL += "&Width=" + SelectedRegion.Width.toString();
        //}
        
        //alert(regionListURL);
        AJAXReplace("RegionList",regionListURL);
}

function setRegion(regionID, rowNum, outlinePoints, perspectivePoints, 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;
        }
    }
    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 ClearAllPoints()
{
    // Which mode are we in?
    switch(SelectedTool)
    {
        case "Outline":
            SelectedRegion.OutlinePointsX.length = 0;
            SelectedRegion.OutlinePointsY.length = 0;
            SelectedRegion.isSaved = false;
            break;
        case "CutOut":
            //SelectedRegion.
            break;
        case "Perspective":
            //SelectedRegion.PerspectivePointsX.length = 0;
            //SelectedRegion.PerspectivePointsY.length = 0;
            //SelectedRegion.isSaved = false;
            break;
    }
    RefreshImage();
}

function RemoveLastPoint()
{
    // "pop" the last element from the points array
    // Which mode are we in?
    switch(SelectedTool)
    {
        case "Outline":
            SelectedRegion.OutlinePointsX.pop();
            SelectedRegion.OutlinePointsY.pop();
            SelectedRegion.isSaved = false;
            break;
        case "CutOut":
            //SelectedRegion.
            break;
        case "Perspective":
            //SelectedRegion.PerspectivePointsX.pop();
            //SelectedRegion.PerspectivePointsY.pop();
            //SelectedRegion.isSaved = false;
            break;
    }
    RefreshImage();
}

function SelectTool(toolName)
{
    if(toolName != SelectedTool)
    {        
        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');
    // TODO: populate help button
}

function setOutlineMode()
{
    SelectTool('Outline');
    // TODO: populate help button
}

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

function IsNumeric(sText)
{
    var ValidChars = "0123456789.";
    var Char;
 
    for (i = 0; i < sText.length && IsNumber == true; i++) 
    { 
        Char = sText.charAt(i); 
        if (ValidChars.indexOf(Char) == -1) 
        {
            return false;
        }
    }
    return true;
}

var ShowProduct = true;
function ToggleProductSample()
{
    if(ShowProduct)
    {
        document.getElementById("ImageRender").style.display = 'none';
        ShowProduct = false;
    }
    else
    {
        document.getElementById("ImageRender").style.display = 'block';
        ShowProduct = true;
    }
}

var ShowPerspective = true;
function TogglePerspective()
{
    if(ShowPerspective)
    {
        SelectTool('none');
        RefreshImage();
        ShowPerspective = false;
    }
    else
    {
        SelectTool('Perspective');
        RefreshImage();
        ShowPerspective = true;
    }
}

function ToggleExamples(index)
{
    document.getElementById("Ex1").style.display="none";
    document.getElementById("Ex2").style.display="none";
    document.getElementById("Ex3").style.display="none";
    switch(index)
    {
        case 1:
            document.getElementById("Ex1").style.display="block";
            break;
        case 2:
            document.getElementById("Ex2").style.display="block";
            break;
        case 3:
            document.getElementById("Ex3").style.display="block";
            break;
    }
}

function setupPage()
{
}

window.onload = setupPage;