//Global Variables
var eThumb = null;
var eThumbImg = null;
var _scrollStep = 200;
var _scrollNewPos;
var _stepLeft_ = -20;
var _stepRight_ = 20;
var _scrollStepTimer = null;
var _scrollSlideDelay = 50; //ms

//Portfolio Gallery Functions
function popupThumbnanil(eImage, imgPath)
{
    //Variables
    var scalerPrefix = "../picScaler.ashx?imgWidth=150&height=99&image=";
    var imgPos = findPos(eImage);
    var picturePanel = document.getElementById("picturePanel");
    var leftOffStep = (162 - 50)/2;
    var topOffStep = 115;
    
    //Change Opacity
    eImage.style.opacity = 1;
    
    //Load Image
    if(eThumb == null)
    {
        eThumb = document.createElement("div");
        eThumbImg = document.createElement("img");
        eThumb.appendChild(eThumbImg);
    }
    
    eThumbImg.onload = popupThumb_load;
//    eThumbImg.onmouseover = eThumbImg_mouseover;
//    eThumbImg.onmouseout = hideThumbnail;
    
    eThumbImg.src = scalerPrefix + imgPath; //Image Path
    eThumb.style.background="#000 url(../images/thumbNailLoading.gif) no-repeat center center";
    //eThumb.style.background =+ "  no-repeat center center;";
    eThumb.style.display = "block";
    eThumb.style.position = "absolute";
    eThumb.style.width = "150px";
    eThumb.style.height = "99px";
    eThumb.style.left = (imgPos[0] - leftOffStep) + "px";
    eThumb.style.top = (imgPos[1] - topOffStep) + "px";
    eThumb.style.border = "solid 6px #FFF";
    
    picturePanel.appendChild(eThumb); //Add Image to page
    
}


//Hide Active Thumbnail
function hideThumbnail(eImage)
{
    if(eThumb)
    {
        eThumbImg.style.display = 
        eThumb.style.display="none";
    }
        
    if(eImage)
        eImage.style.opacity = 0.5;
}



///Shows thumb image
function popupThumb_load()
{
    eThumbImg.style.display="block";
}

function eThumbImg_mouseover(e)
{
    var target;
    if(document.all)
    {
        target = window.event.srcElement;
    }
    else if(e)
    {
        target = e.target;
    }
    
    if(target == eThumbImg)
    {
        eThumbImg.style.display="block";
    }
}

/*SCROLL METHODS*/
function scrollPanelRight()
{
    var picPanel = document.getElementById("picturePanel");
    var curLeft = 0;
    var panelScrollWidth;
    var panelWidth;
    
    if(picPanel)
    {
        panelWidth = parseInt(picPanel.clientWidth);
        panelScrollWidth = parseInt(picPanel.scrollWidth); 
        curLeft = parseInt(picPanel.scrollLeft);
        _scrollNewPos = (curLeft + _scrollStep)>  panelScrollWidth - panelWidth?
                        panelScrollWidth - panelWidth :
                        (curLeft + _scrollStep);

        if(curLeft != _scrollNewPos)
            _scrollStepTimer = setInterval("scrollStep(" + _stepRight_ + ")", _scrollSlideDelay)
    }
    
    return false;
}


function scrollPanelLeft()
{
    var picPanel = document.getElementById("picturePanel");
    
    if(picPanel)
    {
        curLeft = picPanel.scrollLeft;
        _scrollNewPos = (curLeft < _scrollStep)?0:(curLeft - _scrollStep);
        
        if(curLeft != _scrollNewPos)
            _scrollStepTimer = setInterval("scrollStep(" + _stepLeft_ + ")", _scrollSlideDelay)
    }
    
    return false;
}

function scrollStep(stepDirection)
{
    var picPanel = document.getElementById("picturePanel");
    var curLeft = 0;
    
    curLeft = picPanel.scrollLeft;
    picPanel.scrollLeft = curLeft + stepDirection;

    if(
        (stepDirection == _stepLeft_) && picPanel.scrollLeft <= _scrollNewPos
        || (stepDirection == _stepRight_) && picPanel.scrollLeft >= _scrollNewPos
        )
    {
        clearInterval(_scrollStepTimer);
    }
}

//Find Element Position
function findPos(obj) {
	var curleft = curtop = 0;
	var origObj = obj;
	var picPanel = document.getElementById("picturePanel");
	
    if (obj.offsetParent) {
	do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
	    } while (obj = obj.offsetParent);
	}
	
	if(document.all)
	{
	    curleft = origObj.offsetLeft;
	}
	
	parseInt(picPanel.clientWidth)
	curleft= curleft - parseInt(picPanel.scrollLeft);
	
	return [curleft,curtop];
}