//Areas
var dvArtwork;
var dvCouch;
var dvTable;
var dvLamp;
var dvDoor;
var dvCanvas;
var dvFloorColor;
var dvWallColor;

//Notice text
var dvNotice;

//Swatch
var dvSwatch;
var dvCurrentColors;

//Arrows
var tblWidthArrow;

//Elements
var imgArtwork;
var imgCouch;
var imgTable;
var imgLamp;
var imgDoor;

//Spans
var spHeight;
var spWidth;

//Inputs
var txtWallHeight;
var txtWallWidth;

//Length
var iArtCount = 0;

//Window Types
// 1 - W X H where Width is Larger
// 2 - W X H where the are the same
// 3 - W X H where Height is larger

var arrElements = new Array();
var arrDimension = new Array();

var m_DefaultWidthPx = 525;
var m_DefaultHeightPx = 350;

var m_WidthPx = 525;
var m_HeightPx = 350;

var m_WidthFt = 14;
var m_HeightFt = 9;

var m_DefaultWallColor = "#E3B23E";
var m_DefaultFloorColor = "#475871";

var arrSwatches = new Array();

var ie=(document.all);
var opac = 100;

function InitializeViewWall()
{    
    //Pulls all objects that are needed        
    SetupGlobalParameters();
    
    var initHeight = m_HeightPx;
    var initWidth = m_WidthPx;        
    
    //Setups width and heights from cookie if they are available
    if( getCookie("UGallery_WallWidthFt") != null &&
        getCookie("UGallery_WallHeightFt") != null )
    {
        initHeight = parseFloat(getCookie("UGallery_WallHeightFt")) * (m_HeightPx/m_HeightFt);
        initWidth = parseFloat(getCookie("UGallery_WallWidthFt")) * (m_WidthPx/m_WidthFt);
        
        txtWallWidth.value = parseFloat(getCookie("UGallery_WallWidthFt"));
        txtWallHeight.value = parseFloat(getCookie("UGallery_WallHeightFt"));
        
        spWidth.innerHTML = txtWallWidth.value;
        spHeight.innerHTML = txtWallHeight.value;        
    }    
    else
    {
        txtWallWidth.value = m_WidthFt;
        txtWallHeight.value = m_HeightFt;
    }
    
    //Set up colors if we have it
    if(getCookie("UGallery_WallColor") != null)
    {
        tdWallColor.style.backgroundColor = getCookie("UGallery_WallColor");
        dvWallColor.style.backgroundColor = getCookie("UGallery_WallColor");        
    }
    
    if(getCookie("UGallery_FloorColor") != null)
    {
        tdFloorColor.style.backgroundColor = getCookie("UGallery_FloorColor");
        dvFloorColor.style.backgroundColor = getCookie("UGallery_FloorColor");        
    }
    
    SetupCanvas(spWidth.innerHTML, spHeight.innerHTML);        
    SizeElements(initWidth, initHeight);            
 
    //Load any new pieces of artwork 
    LoadArtwork(initWidth, initHeight);
    
    //Setup Drag and Drop
    SetupCanvasBD();
    
    //Load from Cookie saved positions
    LoadSavedPositions();    
    BaseLineDoor();    
    //InitializeSwatch();
    
    dvCanvas.style.visibility = "visible";
    spWidth.style.visibility = "visible";
    spHeight.style.visibility = "visible";
}

function InitializeSwatch()
{
    if(arrSwatches.length > 0)
    {
        //Default to first swatch
        var cSwatch = null;
        
        for(var i=0; i < arrSwatches.length; i++)
        {
            if( arrSwatches[i] != null )
            {
                SwitchSwatch(i);
                break;
            }            
        }
    
        dvSwatch.style.visibility = "visible";
        dvCurrentColors.style.visibility = "visible";
    }
}

function SwitchSwatch( iColorType )
{
    var cSwatch = arrSwatches[iColorType];
    
    //No swatch no colors.
    if(cSwatch == null)
        return;

    for(var i=1; i <= 25; i++)
    {
        var cItem = document.getElementById("p" + i);
    
        if( cSwatch[i-1] != null )
            cItem.style.backgroundColor = cSwatch[i-1];
        else
            cItem.style.backgroundColor = "#FFFFFF";
    }
}

function LoadSavedPositions()
{
    var arrItemCollection = ["dvArtwork", "dvCouch", "dvLamp", "dvTable", "dvDoor"];
    var arrImageCollection = ["imgArtwork", "imgCouch", "imgLamp", "imgTable", "imgDoor"];
    
    for(var i=0; i < arrItemCollection.length; i++)
    {
        var sPosition = getCookie("UGallery_ItemPos_" + arrItemCollection[i]);
        
        if( sPosition != null )
        {
           var arrItem = sPosition.split(":");
           var objCurrentDiv = document.getElementById(arrItemCollection[i]);
           var objCurrentImg = document.getElementById(arrImageCollection[i]);
           
           if(objCurrentDiv != null && objCurrentImg != null)
           {
                objCurrentDiv.style.left = arrItem[1];
                objCurrentDiv.style.top = arrItem[2];
                
                objCurrentImg.style.left = arrItem[1];
                objCurrentImg.style.top = arrItem[2];
           }
        }
    }
    
    //load up arwork positions
    var arrArtwork = GetArtWork();
    
    for( var i=0; i < arrArtwork.length; i++ )
    {
        var arrArtImage = arrArtwork[i].split("#");        
        var imgObj = document.getElementById("Art_" + arrArtImage[0]);                        
        
        //Set up artwork as dragable
        var sPosition = getCookie("UGallery_ItemPos_Art_" + arrArtImage[0]);                
        
        if( sPosition != null )
        {
            var arrItem = sPosition.split(":");            
            imgObj.style.left = arrItem[1];
            imgObj.style.top = arrItem[2];
        }
    }
}

var bIsFading = false;

//This is so we can call fadeout only once
function InitiateFadeOut()
{
    if(!bIsFading)
    {
        bIsFading = true;
        fadeOut();
    }
}

function fadeOut() {	
	
	if( !dvNotice || dvNotice.style.visibility == "hidden")
	    return;
	
	if(opac > 0){
		opac-= 7;
		if(ie) 
		    dvNotice.style.filter = "alpha(opacity=" + opac + ")";
		else
		    dvNotice.style.MozOpacity = opac/100;		    
		    
		setTimeout('fadeOut()', 25);
	}
	else
	{
		dvNotice.style.visibility = "hidden";
		opac = 0;
	}
}

function LoadArtwork(fWidth, fHeight)
{
    var arrArtwork = GetArtWork();
    opac = 100;
    
    if(arrArtwork.length > 0)
    {
        dvArtwork.style.display = "none";
        dvNotice.innerHTML = "Please click and drag artwork and furniture to desired location.";
    }
    else
    {
        dvArtwork.style.display = "inline";
        dvNotice.innerHTML = "Add artwork by clicking 'View on Wall' on any artwork detail page.";
    }
    
    for( var i=0; i < arrArtwork.length; i++ )
    {        
        var arrArtImage = arrArtwork[i].split("#");        
        var imgObj = document.getElementById("Art_" + arrArtImage[0]);
    
        try
        {                        
            var fLengthFt = parseFloat(arrArtImage[1])/12;
            var fWidthFt = parseFloat(arrArtImage[2])/12;
                                                    
            imgObj.style.width = fWidthFt * (m_WidthPx/m_WidthFt);
            imgObj.style.height = fLengthFt * (m_HeightPx/m_HeightFt);
                    
            StoreElements(imgObj);
            
            var iOrigWidth = parseFloat(imgObj.style.width);
            var iOrigHeight = parseFloat(imgObj.style.height);
            var iNewWidth = parseFloat(dvWallColor.style.width) * ( iOrigWidth / fWidth );
            var iNewHeight = iNewWidth * (iOrigHeight / iOrigWidth  );
                    
            imgObj.style.width = iNewWidth;
            imgObj.style.height = iNewHeight;
            imgObj.width = iNewWidth;
            imgObj.height = iNewHeight;
            imgObj.style.zIndex = arrArtwork.length + 3;
            
            imgObj.style.left = (m_DefaultWidthPx/2) - (iNewWidth/2);
            imgObj.style.top = (m_DefaultHeightPx/2) - (iNewHeight/2);
            imgObj.alt = (Math.round((arrArtImage[1])*100)/100) + "\" x " + (Math.round((arrArtImage[2])*100)/100) + "\"";
            imgObj.title = (Math.round((arrArtImage[1])*100)/100) + "\" x " + (Math.round((arrArtImage[2])*100)/100) + "\"";
        }
        catch(e)
        {
            if(imgObj)
                imgObj.style.visibility = "hidden";
        }
    }
}

function GetArtWork()
{
    var sDataSet = getCookie("UGallery_ViewOnWall_WallItems");
    
    if(sDataSet == null)
        return new Array();
    
    var arrArtwork = sDataSet.split("#!#");
    
    return arrArtwork;
}

function RefreshWall()
{    
    if(!txtWallWidth)
        return;

    InitiateFadeOut();

    var fWidthFt = parseFloat(txtWallWidth.value);
    var fHeightFt = parseFloat(txtWallHeight.value);        
    
    if(isNaN(fWidthFt))
    {
        alert("Error: Width must be a Number");
        return;
    }
    
    if(isNaN(fHeightFt))
    {
        alert("Error: Height must be a Number");
        return;
    }                
    
    //Check bounds
    if(fWidthFt > 30 || fWidthFt < 8)
    {
        alert("Error: Width must be 8 to 30 ft");
        return;
    }
    
    
    if(fHeightFt > 30 || fHeightFt < 8)
    {
        alert("Error: Height must be 8 to 30 ft");
        return;
    }
        
    //Ok I'm lying to the user here. It's actually 1.56 is the ratio. They shouldn't mess up that aspect.
    
    if(fWidthFt > fHeightFt)
    { 
        if( (fWidthFt / fHeightFt) > 1.8 )
        {
            var iDiff = ((fWidthFt / fHeightFt) - 1.8) * fHeightFt;
            iDiff = Math.ceil(iDiff);
            alert("The width entered is too large for the specified height.  Please width reduce it by " + iDiff + " ft.");
            return;
        }
    }
    else if(fWidthFt < fHeightFt)
    {            
        if( (fHeightFt / fWidthFt) > 1.8 )
        {
            var iDiff = ((fHeightFt / fWidthFt) - 1.8) * fWidthFt;            
            iDiff = Math.ceil(iDiff);
            alert("The height entered is too large for the specified width.  Please height reduce it by " + iDiff + " ft.");
            return;
        }
    }        
    
    //No resize necessary        
    if( spHeight.innerHTML == fHeightFt &&
        spWidth.innerHTML == fWidthFt)
        return;
     
    //Valid so we set the size
    setCookie("UGallery_WallWidthFt", fWidthFt);
    setCookie("UGallery_WallHeightFt", fHeightFt);
     
    dvCanvas.style.visibility = "hidden";
               
    ResetElements(false);
    ResizeWall(fHeightFt, fWidthFt);
    
    dvCanvas.style.visibility = "visible";
}

function ResizeWall(fHeightFt, fWidthFt)
{
    spHeight.innerHTML = fHeightFt;
    spWidth.innerHTML = fWidthFt;
    
    //Now lets convert Inches to pixels come here
    m_WidthPx = fWidthFt * (m_WidthPx/m_WidthFt);
    m_HeightPx = fHeightFt * (m_HeightPx/m_HeightFt);
    
    //Setups width and heights        
    SetupCanvas(fWidthFt, fHeightFt);        
    SizeElements(m_WidthPx, m_HeightPx);            
    
    //Setup Drag and Drop
    SetupCanvasBD();    
    BaseLineDoor();
}

function BaseLineDoor()
{           
    dvDoor.style.top = GetDoorBaseLine();
}

function GetDoorBaseLine()
{
    var defaultFt = 36;
    var doorSize = 272;
    
    var newDoorSize = parseFloat(dvDoor.style.height);
    var newFt = (defaultFt * newDoorSize) / doorSize;
    
    return parseFloat(dvWallColor.style.height) - newDoorSize + newFt;
}

function SetupCanvas( fWidthFt, fHeightFt)
{
    var fAspectRatio = parseFloat(fWidthFt)/parseFloat(fHeightFt);                        
    
    if(fAspectRatio > 1)
    {            
        dvFloorColor.style.width = 525;
        dvWallColor.style.width = 525;
        
        tblWidthArrow.style.width = 525;        
        tblWidthArrow.width = 525;
        
        dvFloorColor.style.left = 0;
        dvWallColor.style.left = 0;
    }
    else if(fAspectRatio < 1)
    {
        dvFloorColor.style.width = 200;
        dvWallColor.style.width = 200;
        
        tblWidthArrow.style.width = 200;
        tblWidthArrow.width = 200;
        
        dvFloorColor.style.left = 324;
        dvWallColor.style.left = 324;
    }
    else
    {
        dvFloorColor.style.width = 350;
        dvWallColor.style.width = 350;
        
        tblWidthArrow.style.width = 350;
        tblWidthArrow.width = 350;
        
        dvFloorColor.style.left = 174;
        dvWallColor.style.left = 174;
    }
}

function SetupGlobalParameters()
{
    //Inputs
    txtWallHeight = document.getElementById("txtWallHeight");
    txtWallWidth = document.getElementById("txtWallWidth");
    
    //Arrows
    tblWidthArrow = document.getElementById("tblWidthArrow");
    
    //Spans    
    spHeight = document.getElementById("spHeight");
    spWidth = document.getElementById("spWidth");

    //Divs
    dvCanvas = document.getElementById("dvCanvas");    
    dvFloorColor = document.getElementById("dvFloorColor");        
    dvWallColor = document.getElementById("dvWallColor");    
    
    dvNotice = document.getElementById("dvNotice");
    
    dvArtwork = document.getElementById("dvArtwork");
    StoreElements(dvArtwork);
    dvCouch = document.getElementById("dvCouch");
    StoreElements(dvCouch);    
    dvTable = document.getElementById("dvTable");
    StoreElements(dvTable);
    dvLamp = document.getElementById("dvLamp");
    StoreElements(dvLamp);
    dvDoor = document.getElementById("dvDoor");
    StoreElements(dvDoor);
 
    //Image
    imgArtwork = document.getElementById("imgArtwork");
    StoreElements(imgArtwork);
    imgCouch = document.getElementById("imgCouch");    
    StoreElements(imgCouch);    
    imgTable = document.getElementById("imgTable");
    StoreElements(imgTable);
    imgLamp = document.getElementById("imgLamp");
    StoreElements(imgLamp);
    imgDoor = document.getElementById("imgDoor");
    StoreElements(imgDoor);
    
    //Swatch     
    dvSwatch = document.getElementById("dvSwatch");
    dvCurrentColors = document.getElementById("dvCurrentColors");
    
    //Default submits
    SetDefaultSubmit();
}

function SetDefaultSubmit()
{
    if(ie)
    {
        txtWallWidth.onkeydown = fnTrapKD
        txtWallHeight.onkeydown = fnTrapKD
    }
    else
    {        
        txtWallWidth.addEventListener("keydown", ffxTrapKD, true);
        txtWallHeight.addEventListener("keydown", ffxTrapKD, true);        
    }
}

function DefaultRefreshWall()
{    
    RefreshWall();    
    return false;
}

function StoreElements( objItem )
{
    arrElements.push(objItem);
    
    //Store the OriginalDimensions
    var objDimensions = new Object();
    objDimensions.width = objItem.style.width;
    objDimensions.height = objItem.style.height;
    objDimensions.top = objItem.style.top;
    objDimensions.left = objItem.style.left;
    arrDimension.push(objDimensions);
}

function ClearWall()
{
    if(!dvArtwork)
        return;

    InitiateFadeOut();
    
    //Clear all the different cookies
    deleteCookie("UGallery_WallWidthFt");
    deleteCookie("UGallery_WallHeightFt");
    deleteCookie("UGallery_WallColor");
    deleteCookie("UGallery_FloorColor");
    
    var arrItemCollection = ["dvArtwork", "dvCouch", "dvLamp", "dvTable", "dvDoor"];
    var arrImageCollection = ["imgArtwork", "imgCouch", "imgLamp", "imgTable", "imgDoor"];
    
    for(var i=0; i < arrItemCollection.length; i++)
        deleteCookie("UGallery_ItemPos_" + arrItemCollection[i]);
     
    var arrArtwork = GetArtWork();   
    for( var i=0; i < arrArtwork.length; i++ )
    {
        var arrArtImage = arrArtwork[i].split("#");
        var imgObj = document.getElementById("Art_" + arrArtImage[0]);
        imgObj.style.display = "none";
        
        deleteCookie("UGallery_ItemPos_Art_" + arrArtImage[0]);                
    }
        
    deleteCookie("UGallery_ViewOnWall_WallItems");

    //All the other artwork should be gone now
    dvArtwork.style.display = "inline";

    spHeight.innerHTML = m_HeightFt;
    spWidth.innerHTML = m_WidthFt;
    
    txtWallHeight.value = m_HeightFt;
    txtWallWidth.value = m_WidthFt;
    
    tdWallColor.style.backgroundColor = m_DefaultWallColor;
    tdFloorColor.style.backgroundColor = m_DefaultFloorColor;    
    
    dvWallColor.style.backgroundColor = m_DefaultWallColor;
    dvFloorColor.style.backgroundColor = m_DefaultFloorColor;        
    
    ResetElements(true);
    SetupCanvasBD();
}

function ResetElements( bReposition )
{
    m_WidthPx = m_DefaultWidthPx;
    m_HeightPx = m_DefaultHeightPx;
    
    dvFloorColor.style.width = m_DefaultWidthPx;
    dvWallColor.style.width = m_DefaultWidthPx;
    tblWidthArrow.style.width = m_DefaultWidthPx;
    tblWidthArrow.width = m_DefaultWidthPx;
    
    dvFloorColor.style.left = 0;
    dvWallColor.style.left = 0;

    for( var i=0; i < arrElements.length; i++ )
    {   
        if(bReposition)
        {
            arrElements[i].style.top = arrDimension[i].top;
            arrElements[i].style.left = arrDimension[i].left;
        }
                    
        arrElements[i].style.width = arrDimension[i].width;
        arrElements[i].style.height = arrDimension[i].height;
        arrElements[i].width = arrDimension[i].width;
        arrElements[i].height = arrDimension[i].height;
    }
}

function SizeElements( fWidth, fHeight )
{   
    for( var i=0; i < arrElements.length; i++ )
    {   
        var iOrigWidth = parseFloat(arrElements[i].style.width);
        var iOrigHeight = parseFloat(arrElements[i].style.height);
        var iNewWidth = parseFloat(dvWallColor.style.width) * ( iOrigWidth / fWidth );
        var iNewHeight = iNewWidth * (iOrigHeight / iOrigWidth  );
        
        /*
        var dHeight = iOrigHeight - iNewHeight;
        try
        {
            if(iOrigHeight != iNewHeight)
            {                
                var cTopOffset = parseFloat(arrElements[i].style.top);            
                arrElements[i].style.top = cTopOffset + dHeight;                
            }
        }
        catch(e)
        {
            //nothing
        } 
        */               
        
        arrElements[i].style.width = iNewWidth;
        arrElements[i].style.height = iNewHeight;
        arrElements[i].width = iNewWidth;
        arrElements[i].height = iNewHeight;
        //arrElements[i].title = "Input: (" + fWidth + ", " + fHeight + ") Wall: " + dvWallColor.style.width + " Orig: (" + iOrigWidth + "," + iOrigHeight + ") New: (" + iNewWidth + "," + iNewHeight + ")";
    }
}

function SetupCanvasBD()
{
    Drag.init(dvArtwork, null, 0, parseInt(dvCanvas.style.width) - parseInt(dvArtwork.style.width) - 2, 0, parseInt(dvCanvas.style.height) - parseInt(dvArtwork.style.height) - 2, null, null, null, null, SaveFinalPoint);
    Drag.init(dvCouch, null, 0, parseInt(dvCanvas.style.width) - parseInt(dvCouch.style.width) + 4, 0, parseInt(dvCanvas.style.height) - parseInt(dvCouch.style.height) + 4, null, null, null, null, SaveFinalPoint);
    Drag.init(dvTable, null, 0, parseInt(dvCanvas.style.width) - parseInt(dvTable.style.width) + 4, 0, parseInt(dvCanvas.style.height) - parseInt(dvTable.style.height) + 4, null, null, null, null, SaveFinalPoint);
    Drag.init(dvLamp, null, 0, parseInt(dvCanvas.style.width) - parseInt(dvLamp.style.width) + 4, 0, parseInt(dvCanvas.style.height) - parseInt(dvLamp.style.height) + 4, null, null, null, null, SaveFinalPoint);
    Drag.init(dvDoor, null, 0, parseInt(dvCanvas.style.width) - parseInt(dvDoor.style.width), GetDoorBaseLine(), GetDoorBaseLine(), null, null, null, null, SaveFinalPoint);
    
    var arrArtwork = GetArtWork();
    for( var i=0; i < arrArtwork.length; i++ )
    {
        var arrArtImage = arrArtwork[i].split("#");        
        var imgObj = document.getElementById("Art_" + arrArtImage[0]);                        
        
        //Set up artwork as dragable
        Drag.init(imgObj, null, 0, parseInt(dvCanvas.style.width) - parseInt(imgObj.style.width) - 2, 0, parseInt(dvCanvas.style.height) - parseInt(imgObj.style.height) - 2, null, null, null, null, SaveFinalPoint);
    }
}

function SaveFinalPoint(objID, x, y)
{
    setCookie("UGallery_ItemPos_" + objID, objID + ":" + x + ":" + y);
}

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}

function GetColor( iIndex )
{
    InitiateFadeOut();

    var colorCell = document.getElementById("p" + iIndex);
    var tdWallColor = document.getElementById("tdWallColor");
    var tdFloorColor = document.getElementById("tdFloorColor");
    
    var rbWall = document.getElementById("rbWall");
    var rbFloor = document.getElementById("rbFloor");
    
    if(rbWall.checked)
    {
        tdWallColor.style.backgroundColor = colorCell.style.backgroundColor;
        dvWallColor.style.backgroundColor = colorCell.style.backgroundColor;
        
        setCookie("UGallery_WallColor", colorCell.style.backgroundColor);
    }
    else
    {
        tdFloorColor.style.backgroundColor = colorCell.style.backgroundColor;
        dvFloorColor.style.backgroundColor = colorCell.style.backgroundColor;        
        
        setCookie("UGallery_FloorColor", colorCell.style.backgroundColor);
    }
}

function initializePage()
{
    correctPNG();    
    setTimeout("InitializeViewWall();", 1000);
}

window.onload = initializePage;