var intHLPosBox1='3px';
var intHLPosBox2='124px';
var intHLPosBox3='245px';
var intHLPosBox4='365px';
var intHLPosBox5='485px';
var intHLPosBox6='605px';
var intHLPosBox7='725px';
var intHLPosBox8='845px';
var intContPosBox1='0px';
var intContPosBox2='120px';
var intContPosBox3='240px';
var intContPosBox4='360px';
var intContPosBox5='480px';
var intContPosBox6='600px';
var intContPosBox7='720px';
var intContPosBox8='840px';
var intLeftPos1=0;
var intLeftPos2=120;
var intLeftPos3=240;
var intLeftPos4=360;
var intLeftPos5=480;
var intLeftPos6=600;
var intLeftPos7=720;
var intLeftPos8=840;

var intCurrentBox=0;
var strCurrentClassName='grey';
var intCurrentLeft='0px';
var intCurrentLeftNo=0;

var intCurrentOpenBox=0;

var boolMoving=false;
var boolFading=false;

var boolHighlightVisible=false;


function SetIndexes(){
    document.getElementById("divMargin5").style.zIndex=12;    
    document.getElementById("divMargin6").style.zIndex=12;    
    document.getElementById("divMargin7").style.zIndex=12;    
    //document.getElementById("divMargin8").style.zIndex=12;    
}

function ChangeZIndex(intBoxToBringToFront){
    document.getElementById("divContent1").style.zIndex=8;    
    document.getElementById("divContent2").style.zIndex=7;    
    document.getElementById("divContent3").style.zIndex=6;    
    document.getElementById("divContent4").style.zIndex=5;    
    document.getElementById("divContent5").style.zIndex=4;    
    document.getElementById("divContent6").style.zIndex=3;    
    document.getElementById("divContent7").style.zIndex=2;    
    //document.getElementById("divContent8").style.zIndex=1;

    if (intBoxToBringToFront==1){
        document.getElementById("divContent1").style.zIndex=9;    
    }else if (intBoxToBringToFront ==2){
        document.getElementById("divContent2").style.zIndex=9;    
    }else if (intBoxToBringToFront ==3){
        document.getElementById("divContent3").style.zIndex=9;    
    }else if (intBoxToBringToFront ==4){
        document.getElementById("divContent4").style.zIndex=9;    
    }else if (intBoxToBringToFront ==5){
        document.getElementById("divContent5").style.zIndex=9;    
    }else if (intBoxToBringToFront ==6){
        document.getElementById("divContent6").style.zIndex=9;    
    }else if (intBoxToBringToFront ==7){
        document.getElementById("divContent7").style.zIndex=9;    
    }else if (intBoxToBringToFront ==8){
        //document.getElementById("divContent8").style.zIndex=9;    
    }
}


function MoveHighlight(intBox){
    if (boolMoving!=true && boolFading!=true){
        var intNewLeft = '0px';
        var strClassName = 'grey';
        
        intCurrentBox = intBox;
        
        if (intBox == 1){
            intNewLeft = intHLPosBox1;
            intCurrentLeft = intContPosBox1;
            intCurrentLeftNo = intLeftPos1;
            strClassName = 'grey';
        }else if (intBox == 2){
            intNewLeft = intHLPosBox2;
            intCurrentLeft = intContPosBox2;
            intCurrentLeftNo = intLeftPos2;
            strClassName = 'yellow';
        }else if (intBox == 3){
            intNewLeft = intHLPosBox3;
            intCurrentLeft = intContPosBox3;
            intCurrentLeftNo = intLeftPos3;
            strClassName = 'cyan';
        }else if (intBox == 4){
            intNewLeft = intHLPosBox4;
            intCurrentLeft = intContPosBox4;
            intCurrentLeftNo = intLeftPos4;
            strClassName = 'green';
        }else if (intBox == 5){
            intNewLeft = intHLPosBox5;
            intCurrentLeft = intContPosBox5;
            intCurrentLeftNo = intLeftPos5;
            strClassName = 'purple';
        }else if (intBox == 6){
            intNewLeft = intHLPosBox6;
            intCurrentLeft = intContPosBox6;
            intCurrentLeftNo = intLeftPos6;
            strClassName = 'red';
        }else if (intBox == 7){
            strClassName = 'blue';
            intCurrentLeft = intContPosBox7;
            intCurrentLeftNo = intLeftPos7;
            intNewLeft = intHLPosBox7;
        }else if (intBox == 8){
            intNewLeft = intHLPosBox8;
            intCurrentLeft = intContPosBox8;
            intCurrentLeftNo = intLeftPos8;
            strClassName = 'pink';
        }

        if (boolHighlightVisible==false){
            document.getElementById("divLTVert").style.visibility='visible';
            document.getElementById("divLTHoriz").style.visibility='visible';
            document.getElementById("divRTVert").style.visibility='visible';
            document.getElementById("divRTHoriz").style.visibility='visible';
            document.getElementById("divLBVert").style.visibility='visible';
            document.getElementById("divLBHoriz").style.visibility='visible';
            document.getElementById("divRBVert").style.visibility='visible';
            document.getElementById("divRBHoriz").style.visibility='visible';
            boolHighlightVisible = true;
        }

        strCurrentClassName = strClassName;
        document.getElementById("divLTVert").className=strClassName;
        document.getElementById("divLTHoriz").className=strClassName;
        document.getElementById("divRTVert").className=strClassName;
        document.getElementById("divRTHoriz").className=strClassName;
        document.getElementById("divLBVert").className=strClassName;
        document.getElementById("divLBHoriz").className=strClassName;
        document.getElementById("divRBVert").className=strClassName;
        document.getElementById("divRBHoriz").className=strClassName;
        
        document.getElementById("divLTVert").style.left=intCurrentLeftNo + 'px';
        document.getElementById("divLTHoriz").style.left=intCurrentLeftNo + 'px';
        document.getElementById("divRTVert").style.left=(intCurrentLeftNo + 118) + 'px';
        document.getElementById("divRTHoriz").style.left=(intCurrentLeftNo + 108) + 'px';
        document.getElementById("divLBVert").style.left=intCurrentLeftNo + 'px';
        document.getElementById("divLBHoriz").style.left=intCurrentLeftNo + 'px';
        document.getElementById("divRBVert").style.left=(intCurrentLeftNo + 118) + 'px';
        document.getElementById("divRBHoriz").style.left=(intCurrentLeftNo + 108) + 'px';
        
    }
}

function ReturnLeftPositionOfBox(intBox){
    var intRet;
    if (intBox == 1){
        intRet = intLeftPos1;
    }else if (intBox == 2){
        intRet = intLeftPos2;
    }else if (intBox == 3){
        intRet = intLeftPos3;
    }else if (intBox == 4){
        intRet = intLeftPos4;
    }else if (intBox == 5){
        intRet = intLeftPos5;
    }else if (intBox == 6){
        intRet = intLeftPos6;
    }else if (intBox == 7){
        intRet = intLeftPos7;
    }else if (intBox == 8){
        intRet = intLeftPos8;
    }    
    return intRet;
}


function ProcessClick(intBox){
    if (boolMoving!=true && boolFading!=true){
        if (intCurrentOpenBox>0){
            //close the box and then open the new one
            CloseThenOpenBox(intBox);
        }else{
            OpenBox(intBox);
        }
    }
}


function CloseThenOpenBox(intBox){
    var strCloseContentName = 'divContent' + intCurrentOpenBox;
    var strCloseContentContainer = 'divContent' + intCurrentOpenBox + 'Text';
    var strCloseGo = 'divContent' + intCurrentOpenBox + 'Go';
    var strImage = 'divContent' + intCurrentOpenBox + 'Image';
    var intStartPosition = 0;

    if (intCurrentOpenBox>0){
        //close the box
        if (boolMoving != true && boolFading != true){
            boolMoving = true;
            var intStartAt=0;
            //intStartAt = ReturnLeftPositionOfBox(intCurrentOpenBox);
            
            FadeOutItems(strCloseContentContainer, strCloseGo, strImage);
            //FadeOutItemFast(strCloseContentContainer);
            
            if (intCurrentOpenBox>4){
                if (intCurrentOpenBox==5){
                    intStartPosition = intLeftPos5;
                }else if (intCurrentOpenBox==6){
                    intStartPosition = intLeftPos6;
                }else if (intCurrentOpenBox==7){
                    intStartPosition = intLeftPos7;
                }else if (intCurrentOpenBox==8){
                    intStartPosition = intLeftPos8;
                }
                var t3;
                
                t3 = new Tween(document.getElementById(strCloseContentName).style,'left',Tween.regularEaseInOut,(intStartPosition - 220),intStartPosition,.2,'px');
                t3.onMotionStarted = function(){};        
                t3.onMotionFinished = function(){};
                t3.start();
                t3=null;
                                
                if (intBox>4){
                    var strMarginName = 'divMargin' + intBox;
                    var t4;
                    t4 = new Tween(document.getElementById(strMarginName).style,'height',Tween.regularEaseInOut,335,220,.2,'px');
                    t4.onMotionStarted = function(){};        
                    t4.onMotionFinished = function(){};
                    t4.start();
                    t4=null;                
                }                
            }
            
            t = new Tween(document.getElementById(strCloseContentContainer).style,'width',Tween.regularEaseInOut,210,120,.2,'px');
            t.onMotionStarted = function(){};        
            t.onMotionFinished = function(){};
            t.start();
            t=null;
            

            var t;
            t = new Tween(document.getElementById(strCloseContentName).style,'width',Tween.regularEaseInOut,340,120,.2,'px');
            t.onMotionStarted = function(){};        
            t.onMotionFinished = function(){};
            t.start();
            t=null;

            var t2;
            t2 = new Tween(document.getElementById(strCloseContentName).style,'height',Tween.regularEaseInOut,335,220,.2,'px');
            t2.onMotionStarted = function(){};        
            t2.onMotionFinished = function(){
                if (intCurrentOpenBox==intBox){
                    boolMoving=false;
                }else{
                    //now open the new box
                    OpenBox(intBox);                
                }
                intCurrentOpenBox=0;
            };
            t2.start();
            t2=null;
        }        
        
    }
}



function OpenBox(intTargetBox){
    boolMoving=false;
    ChangeZIndex(intTargetBox);
    if (intTargetBox>4){
        ExpandBoxLeft(intTargetBox);
    }else{
        ExpandBoxRight(intTargetBox);
    }
}


function ExpandBoxRight(intBox){
    var strContentName = 'divContent' + intBox;
    var strOpenContentContainer = 'divContent' + intBox + 'Text';
    var strOpenGo = 'divContent' + intBox + 'Go';
    var strImage = 'divContent' + intBox + 'Image';
        
    if (boolMoving != true && boolFading!=true){
        boolMoving = true;
        var t;
        t = new Tween(document.getElementById(strContentName).style,'width',Tween.regularEaseInOut,120,360,.5,'px');
        t.onMotionStarted = function(){};        
        t.onMotionFinished = function(){};
        t.start();
        t=null;

        t = new Tween(document.getElementById(strOpenContentContainer).style,'width',Tween.regularEaseInOut,120,210,.5,'px');
        t.onMotionStarted = function(){};        
        t.onMotionFinished = function(){};
        t.start();
        t=null;


        var t2;
        t2 = new Tween(document.getElementById(strContentName).style,'height',Tween.regularEaseInOut,220,335,.5,'px');
        t2.onMotionStarted = function(){};        
        t2.onMotionFinished = function(){FadeUpItem(strOpenContentContainer); FadeUpItem(strOpenGo); FadeUpItem(strImage); intCurrentOpenBox=intBox; boolMoving=false;};
        t2.start();
        t2=null;
    }
}

function ExpandBoxLeft(intBox){
    var strContentName = 'divContent' + intBox;
    var strMarginName = 'divMargin' + intBox;
    var strOpenContentContainer = 'divContent' + intBox + 'Text';
    var strOpenGo = 'divContent' + intBox + 'Go';
    var strImage = 'divContent' + intBox + 'Image';
    var intStartPosition = 0;
    
    if (intBox==5){
        intStartPosition = intLeftPos5;
    }else if (intBox==6){
        intStartPosition = intLeftPos6;
    }else if (intBox==7){
        intStartPosition = intLeftPos7;
    }else if (intBox==8){
        intStartPosition = intLeftPos8;
    }
        
    if (boolMoving != true && boolFading!=true){
        boolMoving = true;
        var t3;
        t3 = new Tween(document.getElementById(strContentName).style,'left',Tween.regularEaseInOut,intStartPosition,(intStartPosition-240),.5,'px');
        t3.onMotionStarted = function(){};        
        t3.onMotionFinished = function(){};
        t3.start();
        t3=null;

        var t;
        t = new Tween(document.getElementById(strContentName).style,'width',Tween.regularEaseInOut,120,360,.5,'px');
        t.onMotionStarted = function(){};        
        t.onMotionFinished = function(){};
        t.start();
        t=null;

        t = new Tween(document.getElementById(strOpenContentContainer).style,'width',Tween.regularEaseInOut,120,210,.5,'px');
        t.onMotionStarted = function(){};        
        t.onMotionFinished = function(){};
        t.start();
        t=null;

        var t2;
        t2 = new Tween(document.getElementById(strContentName).style,'height',Tween.regularEaseInOut,220,335,.5,'px');
        t2.onMotionStarted = function(){};        
        t2.onMotionFinished = function(){FadeUpItem(strOpenContentContainer); FadeUpItem(strOpenGo); FadeUpItem(strImage); intCurrentOpenBox=intBox; boolMoving=false;};
        t2.start();
        t2=null;

        var t4;
        t4 = new Tween(document.getElementById(strMarginName).style,'height',Tween.regularEaseInOut,220,335,.5,'px');
        t4.onMotionStarted = function(){};        
        t4.onMotionFinished = function(){};
        t4.start();
        t4=null;
        
    }
}

function ShowContentLeft(){
    document.getElementById("divInfo").innerHTML = document.getElementById("divContent").style.left;
}


function CloseThenOpenBox_old(intBox){
    //document.getElementById("divInfo").innerHTML = 'intCurrentLeft=' + intCurrentLeft;
    if (intCurrentOpenBox>0){
        //close the box
        if (boolMoving != true){
            boolMoving = true;
            var intStartAt=0;
            intStartAt = ReturnLeftPositionOfBox(intCurrentOpenBox);
            if (intCurrentOpenBox>4){
                var t3;
                
                t3 = new Tween(document.getElementById('divContent').style,'left',Tween.regularEaseInOut,(intStartAt - 360),intStartAt,.2,'px');
                t3.onMotionStarted = function(){};        
                t3.onMotionFinished = function(){};
                t3.start();
                t3=null;
            }

            var t;
            t = new Tween(document.getElementById('divContent').style,'width',Tween.regularEaseInOut,480,120,.2,'px');
            t.onMotionStarted = function(){};        
            t.onMotionFinished = function(){};
            t.start();
            t=null;

            var t2;
            t2 = new Tween(document.getElementById('divContent').style,'height',Tween.regularEaseInOut,335,220,.2,'px');
            t2.onMotionStarted = function(){};        
            t2.onMotionFinished = function(){
                intCurrentOpenBox=0;
                //now open the new box
                OpenBox(intBox);
            };
            t2.start();
            t2=null;
        }        
        
    }
}


function FadeUpItem(strItem){
    boolFading=true;
    document.getElementById(strItem).style.visibility='visible';
    t1 = new OpacityTween(document.getElementById(strItem),Tween.regularEaseInOut, 0, 100, .5);
    t1.onMotionStarted = function(){
    }            
    t1.onMotionFinished = function(){
        boolFading = false;
    }
    t1.start();
    t1=null;
}

function FadeOutItem(strItem){
    boolFading = true;
    t1 = new OpacityTween(document.getElementById(strItem),Tween.regularEaseInOut, 100, 0, .2);
    t1.onMotionStarted = function(){
    }            
    t1.onMotionFinished = function(){
        boolFading = false;
    }
    t1.start();
    t1=null;    
}


function FadeOutItemFast(strItem){
    boolFading = true;
    t1 = new OpacityTween(document.getElementById(strItem),Tween.regularEaseInOut, 100, 0, .1);
    t1.onMotionStarted = function(){
    }            
    t1.onMotionFinished = function(){
        boolFading = false;
    }
    t1.start();
    t1=null;    
}


function FadeOutItems(strItem1, strItem2, strItem3){
    boolFading = true;
    t1 = new OpacityTween(document.getElementById(strItem1),Tween.regularEaseInOut, 100, 0, .1);
    t1.onMotionStarted = function(){
    }            
    t1.onMotionFinished = function(){
    }
    t1.start();
    t1=null;    
    t2 = new OpacityTween(document.getElementById(strItem2),Tween.regularEaseInOut, 100, 0, .1);
    t2.onMotionStarted = function(){
    }            
    t2.onMotionFinished = function(){
        boolFading = false;
    }
    t2.start();
    t2=null;    
    t3 = new OpacityTween(document.getElementById(strItem3),Tween.regularEaseInOut, 100, 0, .1);
    t3.onMotionStarted = function(){
    }            
    t3.onMotionFinished = function(){
        boolFading = false;
    }
    t3.start();
    t3=null;    

}


function OpenBoxOld(intTargetBox){
//    document.getElementById("divInfo").innerHTML = 'intCurrentLeft=' + intCurrentLeft + '<br/>';
//    document.getElementById("divInfo").innerHTML += document.getElementById("divContent").style.left;
    boolMoving=false;
    //set the left position of the box
    document.getElementById("divContent").style.left = ReturnLeftPositionOfBox(intTargetBox) + 'px';;
    document.getElementById("divContent").left = ReturnLeftPositionOfBox(intTargetBox) + 'px';;
    document.getElementById("divContent").className = strCurrentClassName;
    document.getElementById("divInfo").innerHTML = document.getElementById("divContent").left;
    if (intTargetBox>4){
        ExpandBoxLeft(intTargetBox);
    }else{
        ExpandBoxRight(intTargetBox);
    }
}


function ProcessClick_old(){
    if (intCurrentOpenBox>0){
        //close the box and then open the new one
        CloseThenOpenBox();
    }else{
        OpenBox();
    }
}