//***********************************************************************************************************************************/
//	ThumbBox v1.0.1
//
//added image increase on mouse over

//	 Author: Timothy Camuti
//  Website: http://www.camuti.com/thumbox
//	   Date: April 1, 2008 
//  Copyright 2008 Timothy Camuti
//	License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
// Browsers: Tested successfully** on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES):
//				* Firefox: 1.0.7
//				* Internet Explorer: 7.0, 6.0 SP2
//              ** Keep in mind it is a 1.0 version. 
//              DocType Strict is recommended

//   Credits:   ThumBox uses LyteBox v3.22 to deleiver full images from the thumbnail viewer.
//	            LyteBox v3.22 Author is Markus F. Hay
//              Website: http://www.dolem.com/lytebox
//              LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more
//			    information please visit http://huddletogether.com/projects/lightbox2/
//              Their code and product was exacly what I was looking to build. It was my fortune that I found their work. 
//              These resources were very useful when making this code. Many thanks:
//              http://www.w3schools.com
//              http://www.quirksmode.org/

//***********************************************************************************************************************************/

// Global Variables
    var IntervalId = 0;
    var aHdivs = [] ;
    var divContainer;
    var divParentContainer;
    var parentDiv;
    var parentHeight;
    var stripTable;
    var nextArrow;
    var prevArrow;
    var stripHeight=0;  // Do not change
    var thumbCount = 4; // Do not change.
    var stripMax = 3;   // changable, sets number of rows visible
    var strXml;
    var xmlRoot = "/xml/";
    var imagesRoot = "/images/";
    var xmlFile = '';
    var scrollX;
    var scrollY;
    var gEvent;
    var thumbMouseover;
    
    window.onload = function()
    { 
    // This allows user to specify the xml page via the local page or the querystring tb.
        if (!getQueryString('tb') && xmlFile == '')
            xmlFile = "thumbox.xml";
        else
            xmlFile =(getQueryString('tb')) ? getQueryString('tb') : xmlFile ;

        createFramework();
        displayResult();
        initGlobals();
        setVArrows();
        initLytebox();
        
    // add Key press event for the up/down scroll
        if(window.event)
            document.body.onkeydown = function() {detectKeyEvent(event)};
        else
            document.addEventListener("keypress",detectKeyEvent,true); 

     }
    function createFramework()
    {
    // Create the base HTML code to be populted by the xsl
        htmlStr = "<div class='stripInfoDiv' id='stripInfoDiv'></div>";
        htmlStr += "<div id='consoleTop' class='consoleTop'><div>";
        htmlStr += "<img class='imagebutton' id='upButton' src='" + imagesRoot + "thumbox/arrow_up.gif' onclick='gEvent=false;startDown();' /><img class='imagebutton' id='downButton' src='" + imagesRoot + "thumbox/arrow_down.gif' onclick='gEvent=false;startUp();' /></div></div>";
        htmlStr += "<div id='divParentContainer' class='divParentContainer'><div id='divlevel1Container' class='divlevel1Container'></div></div>";
        htmlStr += "<h3 id='loading'>Loading Portfolio...</h3>";
        
        document.getElementById("thumbox").innerHTML = htmlStr ;
    }

    function displayResult()
    {
        strXml=loadXMLDoc(xmlRoot + xmlFile);
        xsl=loadXMLDoc(xmlRoot + "thumbox.xsl");
        // code for IE
        if (window.ActiveXObject)
          {
              ex=strXml.transformNode(xsl);
              document.getElementById("divlevel1Container").innerHTML=ex;
          }
          
        // code for Mozilla, Firefox, Opera, etc.
        else if (document.implementation && document.implementation.createDocument)
          {
              xsltProcessor=new XSLTProcessor();
              xsltProcessor.importStylesheet(xsl);
              resultDocument = xsltProcessor.transformToFragment(strXml,document);
              document.getElementById("divlevel1Container").innerHTML = ""
              document.getElementById("divlevel1Container").appendChild(resultDocument);
          }
        document.getElementById("loading").style.display = "none";
    }
    
    function initGlobals()
    {
        divContainer = document.getElementById("divlevel1Container");
        divParentContainer = document.getElementById("divParentContainer");
        
        stripCount = 0;
        parentHeight = 0;
        
        for(i=0; i< document.getElementsByTagName("div").length; i++)
        {
            if(document.getElementsByTagName("div")[i].className == "divlevel2Container")
            {
                stripCount += 1; 
                if (stripCount <= stripMax)
                    parentHeight += document.getElementsByTagName("div")[i].offsetHeight;
                else
                    break;
            }
        }
        
        divParentContainer.style.height = parentHeight + "px";

       // Set StripHeight for establishing the base height of all strips so that vertical scrolling is not disturbed mid scroll
        stripCompare = (stripCount < stripMax)? stripCount : stripMax;
      
      // stripHeight = (stripHeight == 0)? parentHeight/stripCompare : stripHeight;
        stripHeight = parentHeight/stripCompare;
    }
  
    function startUp()
    {
        var divTop = divContainer.offsetTop;
        var divHeight = divContainer.offsetHeight;
        var parentHeight = divParentContainer.offsetHeight;
        
        // quit if its clicked or stroked during a move
        if(parseInt(divTop/-1)%stripHeight != 0) 
            return;
           
        // set initial
        var moveAmount = (parentHeight - divHeight) - (divTop);
        
        //if greater than parent div then it equals parent div
        if ((moveAmount / -1) > parentHeight)
            moveAmount = (parentHeight*-1);
            
        if(( moveAmount) != 0)
        {
            /*if(gEvent) // if there was a keypress
                document.documentElement.style.overflow = "hidden";
            */
        //alert(divTop + "\n" + divHeight + "\n" + parentHeight + "\n" + moveAmount)
            var newY = moveAmount + divTop;
            IntervalId = setInterval ( "moveUp(" + newY + ");", 1);
        }
    }
    
    function startDown()
    {
        var divTop = divContainer.offsetTop;
        var divHeight = divContainer.offsetHeight;
        var parentHeight = divParentContainer.offsetHeight;
        
        // set initial move condition
        var moveAmount = (divHeight - parentHeight) ;

        // quit if its clicked or stroked during a move
        if(parseInt(divTop/-1)%stripHeight != 0) 
            return;    
            
        // regulate to height of parentcontainer
        if (moveAmount > parentHeight)
            moveAmount = parentHeight;
        
        // regulate to y attribute if its less than the move condition
        if((divTop/-1) < moveAmount)
            moveAmount = divTop/-1;
        
        //divContainer.style.top = (divTop + moveAmount) +  "px";
        var newY = divTop + moveAmount;

       /* if(gEvent && moveAmount != 0) // if there was a keypress
            document.documentElement.style.overflow = "hidden"; */

        IntervalId = setInterval ( "moveDown(" + newY + ");", 1);
    }
    
    function moveUp(newY)
    {
        divContainer.style.top = (divContainer.offsetTop + Math.round((newY - divContainer.offsetTop)/10))-1 + "px";
        //document.getElementById("_HDivCount").innerHTML = "divlevel1Container top: " + divContainer.offsetTop;
        if(divContainer.offsetTop == newY)
        {
            clearInterval(IntervalId);
            setVArrows();
        }
    }
    
    function moveDown(newY)
    {
        if(divContainer.offsetTop < 0)
        {
            divContainer.style.top = (divContainer.offsetTop + Math.round((newY - divContainer.offsetTop)/10))+1 + "px";
        //  document.getElementById("_HDivCount").innerHTML = "divlevel1Container top: " + divContainer.offsetTop;
        }
        if(divContainer.offsetTop == newY)
        {
            clearInterval(IntervalId);
            setVArrows();
        }
    }
    
    function startHorizontal(el, whichway)
    {
        // Common Settings
        // prev Arrow
        if(el.parentNode.cells[1].childNodes[0].tagName == null)
            prevArrow = el.parentNode.cells[1].childNodes[1];
        else
            prevArrow = el.parentNode.cells[1].firstChild;
        
        // next arrow    
        if(el.parentNode.cells[2].childNodes[0].tagName == null)
            nextArrow = el.parentNode.cells[2].childNodes[1];
        else
            nextArrow = el.parentNode.cells[2].firstChild;

        // sets the main tables first cell as the intial parent
        if(el.parentNode.cells[0].childNodes[0].tagName == null)
            parentDiv = el.parentNode.cells[0].childNodes[1];
        else
            parentDiv = el.parentNode.cells[0].firstChild;

        // sets the strip table as the table inside the div that houses it
        if(parentDiv.childNodes[0].tagName == null)
            stripTable = parentDiv.childNodes[1];
        else
            stripTable = parentDiv.firstChild;
        
        // Gets The Cell Array
        if(stripTable.childNodes[0].tagName == null)
            var astripCells = stripTable.childNodes[1].firstChild.cells;
        else
            var astripCells = stripTable.childNodes[0].firstChild.cells;
       
       
       // Next/Previous Branch
        if(whichway == 'left')
        {
            var stripTableWidth = stripTable.offsetWidth;
            var cellsTotal = astripCells.length;
            var cellWidth = stripTableWidth/cellsTotal;
          
        // quit if its clicked or stroked during a move
            if(parseInt(stripTable.offsetLeft/-1)%cellWidth != 0) 
            {
            //  alert("too fast");
                return;
            }
                
            if (stripTable.offsetLeft < 0)
                cellsToMove = (cellsTotal - ((stripTable.offsetLeft/-1)/cellWidth)) - thumbCount
            else
               cellsToMove = cellsTotal - thumbCount;
            
            if (cellsToMove > thumbCount)
               cellsToMove = thumbCount;
            
            //  alert("cells Total: " + cellsTotal +"\nofsetLeft: "+ stripTable.offsetLeft + "\nCells behind:" + ((stripTable.offsetLeft/-1)/cellWidth) + "\ncells To Move:" + cellsToMove)
            //  alert(cellWidth+"\n" +cellsToMove)
            
             if (cellsToMove > 0)
             {
               newX = stripTable.offsetLeft - (cellsToMove * cellWidth)
               IntervalId = setInterval ( "moveLeft(" + newX + ");", 1);
             }
        }
        else
        {
            var stripTableWidth = stripTable.offsetWidth;
            var cellsTotal = astripCells.length;
            var cellWidth = stripTableWidth/cellsTotal;
            var moveAmount = cellWidth * thumbCount;
            var cellsToMove = (stripTable.offsetLeft/cellWidth)/-1
            
            if(parseInt(stripTable.offsetLeft/-1)%cellWidth != 0) 
            {
            //  alert("too fast");
                return;
            }

            if (stripTable.offsetLeft < 0)
            {
                if ((stripTable.offsetLeft/-1) < moveAmount)
                    moveAmount = (stripTable.offsetLeft/-1);
            
                newX = stripTable.offsetLeft + moveAmount;
                //alert("cells Total: " + cellsTotal +"\nofsetLeft: "+ stripTable.offsetLeft + "\nCells behind:" + ((stripTable.offsetLeft/-1)/cellWidth) + "\nNewX:" + newX)
                IntervalId = setInterval ( "moveRight(" + newX + ");", 1);
            }
        }
        
    }
    
    function moveLeft(newX, el)
    {
        stripTable.style.left = (stripTable.offsetLeft + Math.round((newX - stripTable.offsetLeft)/12))-1 + "px";
        if(stripTable.offsetLeft == newX)
        {
            clearInterval(IntervalId);
            setHArrows();
        }
    }
    
    function moveRight(newX, el)
    {
        if(stripTable.offsetLeft < 0)
        stripTable.style.left = (stripTable.offsetLeft + Math.round((newX - stripTable.offsetLeft)/12))+1 + "px";
        if(stripTable.offsetLeft == newX )
        {
            clearInterval(IntervalId);
            setHArrows();
        }
    }
     
     function setVArrows(){
     // Down
         if (divContainer.offsetTop == 0) 
         {
            document.getElementById("upButton").src= imagesRoot + "thumbox/arrow_upOff.gif";
            document.getElementById("upButton").title = "Top of the strips.";     
         }
         else
         {
            document.getElementById("upButton").src= imagesRoot + "thumbox/arrow_up.gif";
            document.getElementById("upButton").title = "Move the strips up. (Up Arrow)";
         }    
  
     // up
        if((divContainer.offsetTop/-1) + divParentContainer.offsetHeight == divContainer.offsetHeight)
        {
            document.getElementById("downButton").src = imagesRoot + "thumbox/arrow_downOff.gif";
            document.getElementById("downButton").title = "Bottom of the strips.";
            }
        else
        {
            document.getElementById("downButton").src = imagesRoot + "thumbox/arrow_down.gif";
            document.getElementById("downButton").title = "Move the strips down. (Down Arrow)";
        }
        // resets pagescroll to auto
        document.documentElement.style.overflow = "auto";
     }
     
     function setHArrows()
     {
        if(stripTable.offsetLeft == 0)
        {
             prevArrow.src = imagesRoot + "thumbox/arrow_previousOff.gif";
             prevArrow.title = "Beginning of the strip";
        }
        else
        {
            prevArrow.src = imagesRoot + "thumbox/arrow_previous.gif";
            prevArrow.title = "Move the strip back.";
        }
        if((stripTable.offsetLeft/-1) + parentDiv.offsetWidth == stripTable.offsetWidth)
        {
             nextArrow.src = imagesRoot + "thumbox/arrow_nextOff.gif"
             nextArrow.title = "End of Strip"
        }    
        else
        {  
            nextArrow.src = imagesRoot + "thumbox/arrow_next.gif"
            nextArrow.title = "Move the strip ahead."
        }
        
     }
     
     
    function detectKeyEvent(e)
    {
	    e = (window.event)? event : e;
	    gEvent = e;
	    {
            if(e.keyCode == 40 && document.getElementById("stripInfoDiv").style.display != "block")
            {   
                startUp();
            }
            if(e.keyCode == 38 && document.getElementById("stripInfoDiv").style.display != "block")
            {
                startDown();
            }
        }
        return e.keyCode;   
    }   
    
    function showStripInfo(e, whichIcon, whatDivText)
    {
        e = (window.event)? event : e;
        var posx = 0;
    	var posy = 0;
	    var oSrcElement;
	     oSrcElement = (e.srcElement)? e.srcElement : e.target;
         obj = oSrcElement.parentNode.parentNode
        // divlevel2Container
        
        if (obj.offsetParent) {
		    do {
			    posx += obj.offsetLeft;
			    posy += obj.offsetTop;
		        }
		    while (obj = obj.offsetParent);
        }

      //  alert("x" + posx + "\n" + "Y" + posy)
        posx -= 20
        posy += oSrcElement.parentNode.offsetHeight;

        document.getElementById("stripInfoDiv").style.left = posx + "px";
        document.getElementById("stripInfoDiv").style.top = posy + "px";
        document.getElementById("stripInfoDiv").innerHTML = document.getElementById(whatDivText).innerHTML ;
        document.getElementById("stripInfoDiv").style.display = "block";
        document.getElementById("stripInfoDiv").focus();
    }
    
    function hideStripInfo()
    {
        document.getElementById("stripInfoDiv").style.display = "none";
    }
    
    function showImage(thumbclicked)
    {
        var thumbPath = thumbclicked.src;
        var thumbFile = thumbPath.substring(thumbPath.lastIndexOf('/')+1,thumbPath.length);
        var fullImage = thumbFile.substring(thumbFile.indexOf('_')+1,thumbFile.length);
    }
    
    
    function loadXMLDoc(fname)
    {
    	// this was changed to XMLHttpRequest from dom parser
    	var xmlDoc;
    	if (window.XMLHttpRequest)
    	  xhttp=new XMLHttpRequest();
    	else 
    	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");

    	xhttp.open("GET", fname, false);
    	xhttp.send("");
    	xmlDoc=xhttp.responseXML; 
    return xmlDoc ;
    }
    
    function getQueryString(strName)
    {
        QueryStr = window.location.search.substring(1);
        allStrings = QueryStr.split("&");
        for (i=0;i<allStrings.length;i++) 
        {
            strValue = allStrings[i].split("=");
            if (strValue[0] == strName)
                return strValue[1];
        }
    }
    function setMouseOverImage(e)
    {
    return;
    
        e = (window.event)? event : e;
        if(!window.event)
            return;

        var oSrcElement = (e.srcElement)? e.srcElement : e.target;
	    
	    var moimage = document.getElementById("thumbMouseover")
	    
	    moimage.setAttribute("href", oSrcElement.parentNode.getAttribute("href"));
	    moimage.setAttribute("rel",oSrcElement.parentNode.getAttribute("rel"));
	   
	    var posx = 0;
    	var posy = 0;

       	obj = oSrcElement.parentNode.parentNode;
       	if (obj.offsetParent) {
		    do {
			    posx += obj.offsetLeft;
			    posy += obj.offsetTop;
		        }
		    while (obj = obj.offsetParent);
        }
	    moimage.style.left = posx + "px";
	    moimage.style.top = posy + "px";
        moimage.style.width =  '148px';
	    moimage.style.height=  '106px';
	    moimage.style.border =  '1px dashed #ff0000';
	    moimage.style.display = 'block';
        
    }