
<!--  

var isIE = (document.all)? true : false;
var isDOM = (document.getElementById && !document.all)? true : false;

var myimage = '<span class="pic"><a href="javascript:loadFullImage(\'image1\')"><img src="resources/portfolio/homes_pic1.gif" width="100" height="100" alt="" border="0"></a></span>';
myimage += '<span class="pic"><a href="javascript:loadFullImage(\'image2\')"><img src="resources/portfolio/homes_pic1.gif" width="100" height="100" alt="" border="0"></a></span>';


// set image arrays for thumbnails here
var extArray = new Array("ext_01", "ext_02", "ext_03", "ext_04", "ext_05", "ext_06", "ext_07", "ext_08", "ext_09", "ext_10", "ext_11", "ext_12", "ext_13", "ext_14", "ext_15", "ext_16");
var intArray = new Array("int_01", "int_02", "int_03", "int_04", "int_05", "int_06", "int_07", "int_08", "int_09", "int_10", "int_11", "int_12", "int_13", "int_14", "int_15");
var devArray = new Array("dev_03", "dev_08", "dev_09", "dev_01", "dev_04", "dev_06", "dev_07", "dev_11", "dev_02", "dev_05", "dev_10");
var conArray = new Array("con_01", "con_02", "con_03", "con_04", "con_05", "con_06", "con_07", "con_08", "con_09", "con_10", "con_11", "con_12", "con_13", "con_14");

// this variable is used to see whether we can rollout of the mouseover on the current thumbnail
var noRollOut = 0;


//preload image arrays
var pOver = new Array();
var pNormal = new Array();



function preloadPortfolio()
{

    for (var i = 0; i < this.imgArray.length; i++)
    {
        pOver[this.imgArray[i]] = new Image();
        pOver[this.imgArray[i]].src = "resources/portfolio/"+ this.galleryPath +"/" + this.imgArray[i] + "_thumb_on.jpg";
        pNormal [this.imgArray[i]] = new Image();
        pNormal [this.imgArray[i]].src = "resources/portfolio/"+ this.galleryPath +"/" + this.imgArray[i] + "_thumb_off.jpg";
    }
    
}  

function rollOver(imgName)
{
    if (document.images)
    {
        document.images[imgName].src = pOver[imgName].src;
    }    
}


function rollOut(imgName, picIndex)
{    
    if (document.images && (noRollOut != picIndex))
    {
        document.images[imgName].src = pNormal[imgName].src;
    }    
}   


function scrollMore()
{    
    var currentX = xOffsetLeft(this.contentID);   
    var newX = currentX - this.scrollOffset;
    if (this.allowClick && newX > this.getMaxScroll())
    {
        xSlideTo(this.contentID, newX, 0, this.scrollSpeed);
        this.allowClick = false;
        this.setClickTrue();    
    }
}

function scrollLess()
{    
    var currentX = xOffsetLeft(this.contentID);   
    var  newX = currentX + this.scrollOffset;
    if (this.allowClick && (newX <= this.maxOffset) )
    {        
        xSlideTo(this.contentID, newX, 0, this.scrollSpeed);
        this.allowClick = false;            
        this.setClickTrue();   
    }
}

function scrollDown()
{    
    var currentY = xOffsetTop(this.contentID);   
    var newY = currentY - this.scrollOffset;
    if (this.allowClick)
    {
        xSlideTo(this.contentID, 0,  newY, this.scrollSpeed);
        this.allowClick = false;
        this.setClickTrue();    
    }
}

function scrollUp()
{    
    var currentY = xOffsetTop(this.contentID);   
    var  newY = currentY + this.scrollOffset;
    if (this.allowClick && (newY <= this.maxOffset) )
    {        
        xSlideTo(this.contentID, 0, newY, this.scrollSpeed);
        this.allowClick = false;            
        this.setClickTrue();   
    }
}


function scrollReset()
{    
    if (this.allowClick)
    {        
        xSlideTo(this.contentID, this.maxOffset, 0, 666);
        this.allowClick = false;            
        this.setClickTrue();   
    }
}

// concatenate thumbnails string and write to the scroller div
function loadGallery()
{
    var myString = "";    
    for (var i = 0; i < this.imgArray.length; i++)
    {
        myString += "<span class=\"pic\"><a onmouseover=\"rollOver('"+ this.imgArray[i] +"')\" onmouseout=\"rollOut('"+ this.imgArray[i] +"', "+ i +")\" href=\"javascript:gallery.loadFullImage(" + [i] + ")\"><img id='"+ this.imgArray[i] +"' name='"+ this.imgArray[i] +"' src=\"resources/portfolio/" + this.galleryPath + "/" + this.imgArray[i] + "_thumb_off.jpg\" width=\"100\" height=\"75\" alt=\"\" border=\"0\"></a></span>";
    }    

    document.write(myString);      

}


//set state on thumbnails to "on"
function setThumbOn()
{
    
    if (isDOM)
    {        
        document.getElementById(this.imgArray[this.currentIdx]).src = "resources/portfolio/" + this.galleryPath + "/" + this.imgArray[this.currentIdx] + "_thumb_on.jpg";         
    }
    else if (isIE)
    {
        document.all[this.imgArray[this.currentIdx]].src = "resources/portfolio/" + this.galleryPath + "/" + this.imgArray[this.currentIdx] + "_thumb_on.jpg";      
    } 
      
}

// set state on thumbnail to "off"
function setThumbOff()
{
    
    if (isDOM)
    {        
        document.getElementById(this.imgArray[this.currentIdx]).src = "resources/portfolio/" + this.galleryPath + "/" + this.imgArray[this.currentIdx] + "_thumb_off.jpg";         
    }
    else if (isIE)
    {
        document.all[this.imgArray[this.currentIdx]].src = "resources/portfolio/" + this.galleryPath + "/" + this.imgArray[this.currentIdx] + "_thumb_off.jpg";      
    } 
      
}

//load the large image 
function loadFullImage(picIndex)
{

    if (isDOM)
    {
        document.getElementById('placeHolder').src = "resources/portfolio/" + this.galleryPath + "/" + this.imgArray[picIndex] + ".jpg";
    }
    else if (isIE)
    {
        document.all['placeHolder'].src = "resources/portfolio/" + this.galleryPath + "/" + this.imgArray[picIndex] + ".jpg";
    }
    
    this.setThumbOff();  // set thumb to off state
    this.setCurrentIdx(picIndex); // change the currentIdx var to track the current image used 
    this.setThumbOn(); // set thumb to on state
    this.setRolloutDefeat();  // disable the rollOut function to maintain state on the new "on" thumb  
    this.updateMessageDiv();
        
}

// return the index of the next pic in imgArray (note:"wraps" around to first array element)
function getNextIdx()
{
    if (this.currentIdx < this.totalPics -1)
    {
        return this.currentIdx +1;
    }
    else
    {
        return 0;
    }
}

//return the index of the previous pic in imgArray (note: "wraps" back around to last array element)
function getPrevIdx()
{
    if (this.currentIdx > 0)
    {
        return this.currentIdx -1;
    }
    else
    {
        return this.totalPics -1;//subtract to account for array counting starting at 0
    }
}

function setClickTrue()
{   
    setTimeout("gallery.allowClick = true", this.scrollSpeed);
}

// set the currentIdx tracking variable to the index number of the the current image 
function setCurrentIdx(picIndex)
{
    this.currentIdx = picIndex;
}

// update the rollout defeat variable
function setRolloutDefeat()
{
    return noRollOut = this.currentIdx;    
}

// update the message counting string when viewing sequentially
function updateMessageDiv()
{
    if (isDOM)
    {
        document.getElementById('messageDiv').innerHTML = parseInt(this.currentIdx +1) + " of " + parseInt(this.totalPics) + " images";
    }
    else if (isIE)
    {
        /*
        FROM quirksmode.org
        When setting the innerHTML of an element in Explorer 5 Mac, the element may become much larger than it was at first. 
        Solve this by first setting innerHTML to an empty string and then setting it to the new value.
        */
        var theMessage = document.all['messageDiv'];
        theMessage.innerHTML = ''; 
        theMessage.innerHTML = parseInt(this.currentIdx +1) + " of " + parseInt(this.totalPics) + " images";
    }
}

//used to calculate "the end" of scrollable thumbnails to allow disabling to occur when that end is reached
function getMaxScroll()
{
    var maxScroll = (this.totalPics - this.numPicsShown) * -this.scrollOffset;
    return maxScroll;
}

function scroller(maxOffset, minOffset, scrollOffset, scrollSpeed, contentID, imgArray, galleryPath)
{       
    //variables
    this.maxOffset = maxOffset;
    this.minOffset = minOffset;
    this.scrollOffset = scrollOffset;
    this.scrollSpeed = scrollSpeed; 
    this.contentID = contentID;
    this.allowClick = true;
    this.totalPics = imgArray.length;
    this.imgArray = imgArray;
    this.currentIdx = 0;
    this.galleryPath = galleryPath;
    this.getNextIdx = getNextIdx;
    this.getPrevIdx = getPrevIdx;
    this.numPicsShown = 6;

    
    //methods
    this.loadGallery = loadGallery;
    this.loadFullImage = loadFullImage;
    this.scrollMore = scrollMore;
    this.scrollLess = scrollLess;
    this.scrollDown = scrollDown;
    this.scrollUp = scrollUp;
    this.scrollReset = scrollReset;
    this.setCurrentIdx = setCurrentIdx;
    this.loadFullImage = loadFullImage;
    this.updateMessageDiv = updateMessageDiv;
    this.setThumbOn = setThumbOn;
    this.setThumbOff = setThumbOff;
    this.preloadPortfolio = preloadPortfolio;
    this.setRolloutDefeat = setRolloutDefeat;
    this.setClickTrue = setClickTrue;
    this.getMaxScroll = getMaxScroll;

}


//create new gallery object
//gallery = new scroller(0, -900, 101, 345, 'scrollDiv', extArray, 'exteriors'); 

//preload the rollover images
//gallery.preloadPortfolio();



//-->
