var imageUrl="/images/options/imagecharts";

var activeId=0;
var activeState="hide";
var swatchVisible=false;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;
var swatchPanelX = 700;
var swatchPanelY = 0;
var swatchBuilt=false;

// Main function to retrieve mouse x-y pos.s
function getPageX(o) {
    return o.offsetParent ? o.offsetLeft + getPageX(o.offsetParent) : o.offsetLeft;
}
function getPageY(o) {
    return o.offsetParent ? o.offsetTop + getPageY(o.offsetParent) : o.offsetTop;
}

function getCoordinates(){

    var divLbl="img_lbl_"+activeId;
    
    var activeDiv=document.getElementById(divLbl);
    activeDiv.style.position = "relative";
    tempY=activeDiv.offsetTop;
    
    tempX=getFreeSampleX();
    
}
function getFreeSampleX(){

    var freeSampleX=false;
    var divLbl="free_sample_"+activeId;
    
    var activeDiv=document.getElementById(divLbl);
    activeDiv.style.position = "relative";  
    
    freeSampleX=getPageX(activeDiv);
    
    return freeSampleX;    
}
function getFreeSampleY(){

    var freeSampleY=false;
    var divLbl="free_sample_"+activeId;
    
    var activeDiv=document.getElementById(divLbl);
    activeDiv.style.position = "relative";  
    
    freeSampleY=getPageY(activeDiv);
    
    return freeSampleY;    
}

function getSwatchPanelHeight() {
    var topDiv=document.getElementById("div_swatchNumColumns");
    topDiv.style.position = "relative";
    var topY=topDiv.offsetTop;

    var bottomDiv=document.getElementById("div_swatchPanelHeight");
    bottomDiv.style.position = "relative";
    var bottomY=bottomDiv.offsetTop;
    
    var height=bottomY - topY;
   
    return height;
}
function getSwatchPanelWidth() {
    var linkClose=document.getElementById("div_swatchClosePanel");
    linkClose.style.position = "relative";
    var closeX=linkClose.offsetLeft + 8;
    
    return closeX;
}
function calcLargeImageOffsetX() {
    var $x=getFreeSampleCoordinates();
    
    var $offset=(($x + 76)/2) - (55/2);

    return $offset;
}

function determineSwatchPanelCoordinates() {
    if(tempX > 0 || tempY > 0) {
        swatchPanelX=getFreeSampleX()-(getSwatchPanelWidth()/2) + 50;
        swatchPanelY=getFreeSampleY() - getSwatchPanelHeight() - 100;
    }
}
function isSwatchPanelVisible() {
    var o=document.getElementById("swatchPanel");
    if(!o) {
        return false;
    }
    if(document.getElementById("swatchPanel").style.visibility!="visible") {
        return false;
    } else {
        return true;
    }
}
function smallSwatchSwitch(img) {
    swatchImg=document.getElementById("smallSwatchImage");
    swatchImg.src=img.src;
    
    swatchLbl=document.getElementById("smallSwatchLabel");
    swatchLbl.innerHTML=img.alt;
    
    return false;    
}
function syncSmallSwatch(url,lbl) {
    
    swatchImg=document.getElementById("smallSwatchImage");
    swatchImg.src=url;
    
    swatchLbl=document.getElementById("smallSwatchLabel");
    swatchLbl.innerHTML=lbl;
    
}
function showSwatchPanel() {
    if(isSwatchPanelVisible()) {
        return false;
    }  

    getCoordinates();
    determineSwatchPanelCoordinates();
    
    var sp=document.getElementById("swatchPanel");    
    sp.style.visibility="visible";

    var my_item = dd.elements["swatchPanel"];
    my_item.moveTo(swatchPanelX, swatchPanelY);

    if(!swatchBuilt) {
        var height=getSwatchPanelHeight();
        var width=getSwatchPanelWidth();
    
        if(navigator.appName != "Microsoft Internet Explorer") {
            my_item.resizeTo(width,height);    
        }
        
        
        my_item.setZ(35);
        swatchBuilt=true;
    }    
}
function hideSwatchPanel() {
    document.getElementById("swatchPanel").style.visibility="hidden";
}
function getShowLargeOffsetX() {
    numCols=parseInt(document.getElementById("div_swatchNumColumns").innerHTML);
    var offset=-12 + ((7-numCols) * 10) + ((7-numCols)+1) ;
    

//    return offset+"pt";    

    //alert(numCols);

    switch(numCols)
    {
        case 1:
          offset-=0;
          break;    
        case 2:
          offset-=0;
          break;
        case 3:
          offset-=4;
          break;
        case 4:
          offset-=9;
          break;
        case 5:
          offset-=10;
          break;
        case "6":
          offset-=0;
          break;
        case "7":
          offset-=0;
          break;

        default:
          
    }
    return offset+"pt";
}
function ShowLarge(id) {

    if(activeId!=id && activeId>0) { HideLarge(activeId); }
    
    var div, divLbl;
    div="div_showLarge_" + id;
    divLbl="div_showLargeLbl_" + id;    

    var obj, objLbl;
    obj = document.getElementById(div);
    objLbl = document.getElementById(divLbl);    

    var url;
    url = imageUrl+"/image_"+id+".jpg";
    
    if(isSwatchPanelVisible()) {
        objLbl.style.visibility="hidden";
    } else {
        objLbl.style.visibility="visible";        
    }

    obj.style.backgroundImage="url("+url+")"; 
    obj.style.visibility = "visible";

    obj.style.left=getShowLargeOffsetX();
    
    activeId=id;
    activeState="show";

    //- Sync the small swatch div
    lbl=document.getElementById("img_lbl_"+id).innerHTML;   
    syncSmallSwatch(url,lbl);
    
}

function HideLarge(id) {

    var curElement = document.activeElement;
     
    var div, divLbl;
    div="div_showLarge_" + id;
    divLbl="div_showLargeLbl_" + id;    

    var obj;

    obj = document.getElementById(div);
    obj.style.visibility = "hidden";

    objLbl = document.getElementById(divLbl);
    objLbl.style.visibility = "hidden";

    activeState="hide";
}