var vhtid = 0;
var mainRoomCodeID = 0;

var posLeft = 0;
var clipLeft = 0;
var clipTop = 0;
var clipRight = 0;
var clipBottom = 0;

var thumbSpacer = 3;
var thumbWidth = 70;

var timeFunc
var scrollIncrement = 8;
var scrollDirection = 0;
var pixelsToShiftEachTime = 0;
var timeDelay = 20;
var posLeftFinal = 0;


var scrollIsInitted = false;

var currentThumbCol = 1;
var maxThumbCol = 0;
var currentSceneID = 0;

var imageObjArray = new Array();

function SetMaxThumbCol(theVal) {
    maxThumbCol = theVal;
}

function ScrollRight() {
    var targetColumn = currentThumbCol + 5;
    if (targetColumn > maxThumbCol) {
        targetColumn = maxThumbCol;
    }
    ScrollThumbs(targetColumn);
}

function ScrollLeft() {
    var targetColumn = currentThumbCol - 5;
    if (targetColumn < 1) {
        targetColumn = 1;
    }
    ScrollThumbs(targetColumn);
}

function InitScroll() {
    //var wndo = new dw_scrollObj('PhotoGallery', 'ThumbArea', 'Thumbs');
    
    posLeft = 0;
    var lyr = document.getElementById('Thumbs');
    clipRight = 362;
    clipBottom = 110;
    var clipString = 'rect('+clipTop+'px,'+clipRight+'px,'+clipBottom+'px,'+clipLeft+'px)';
    lyr.style.clip = clipString;
    scrollIsInitted = true;
    lyr.style.visibility = 'visible';
}

function ScrollThumbs(targetColumn) {
    if (timeFunc) return;  //Check if a scroll operation is already in progress, if so do nothing
    
    //Setup the scrolling variables if needed
    if (!scrollIsInitted) {
        InitScroll();
    }
    
    //The number of thumbs does not take into account the direction of the shift
    var numOfThumbs = Math.abs(targetColumn - currentThumbCol); 
    
    //Scroll direction is defined by which way the div is moving.  
    //If the user clicks the right arrow, the scroll direction is to the left (i.e. a negative value)
    scrollDirection = (targetColumn - currentThumbCol) / Math.abs(targetColumn - currentThumbCol) * -1;
    
    //Update the current Thumb Column and prepare to scroll the layer
    var pixelsToShiftTotal = (thumbWidth + thumbSpacer) * numOfThumbs;
    posLeftFinal = posLeft + pixelsToShiftTotal * scrollDirection;
    currentThumbCol = targetColumn;
    
    //Start the recurring scrolling function
    timeFunc = setTimeout('DoScrollWork()',timeDelay);
    UpdateScrollArrows();
}

function DoScrollWork() {
    //Scroll in a small increment
    var lyr = document.getElementById('Thumbs');
    var pixelsToShift = scrollIncrement * scrollDirection;
    var absPixelsRemainingToShift = Math.abs(posLeft - posLeftFinal);
    if (absPixelsRemainingToShift < scrollIncrement) {
        pixelsToShift = absPixelsRemainingToShift * scrollDirection;
    }

    posLeft += pixelsToShift;
    lyr.style.left = posLeft + "px";
    // The clip window moves in the opposite direction as the shift
    clipLeft -= pixelsToShift;
    clipRight -= pixelsToShift;
    lyr.style.clip = 'rect('+clipTop+'px,'+clipRight+'px,'+clipBottom+'px,'+clipLeft+'px)';
    
    //Set another scroll timeout if we haven't reached the final position
    if (posLeft == posLeftFinal) {
        timeFunc = null;
        UpdateScrollArrows();
    }
    else {
        timeFunc = setTimeout('DoScrollWork()',timeDelay);
    }
}

function UpdateScrollArrows() {
    //Change visibility of arrows based on position
    var leftArrowObj = document.getElementById('LeftArrow');
    var rightArrowObj = document.getElementById('RightArrow');
    if (timeFunc) {
        leftArrowObj.style.visibility = 'hidden';
    }
    else if (currentThumbCol == 1) {
        leftArrowObj.style.visibility = 'hidden';
    }
    else {
        leftArrowObj.style.visibility = 'visible';
    }
    
    var rightArrowObj = document.getElementById('RightArrow');
    if (timeFunc) {
        rightArrowObj.style.visibility = 'hidden';
    }
    else if (currentThumbCol == maxThumbCol) {
        rightArrowObj.style.visibility = 'hidden';
    }
    else {
        rightArrowObj.style.visibility = 'visible';
    }
}

function ShowImage(imgIdx) {
	try {
		var imgContainer = imageObjArray[imgIdx];
		var img = document.getElementById('MainImage');
		img.src = imgContainer.ImageData.src;
		img.alt = imgContainer.Descr;
		img.style.visibility = 'visible';
		var caption = document.getElementById('PhotoCaption')
		caption.innerHTML = imgContainer.Descr;
		caption.style.visibility = 'visible';
		currentSceneID = imgContainer.SceneID;
	}
	catch (e) {
		setTimeout("window.location.reload(true);",500);
	}
}

function InitMainImage() {
    ShowImage(mainRoomCodeID);
}

function InitPhotoGallery() {
    InitScroll();
    UpdateScrollArrows();
    InitMainImage();
}

function ShowIW() {
    window.open('IW.aspx?listingid=' + vhtid + '&sceneid=' + currentSceneID,'IW','')
}


function ImageContainer(url, descr, sceneID) {
    this.ImageData = new Image();
    this.ImageData.src = url;
    this.ImageData.alt = descr;
    this.Descr = descr;
    this.SceneID = sceneID
}

function DisplayImageSaveWarning() {
    //alert("Thumbnail should not be saved.");
    var msgWin = document.createElement('div');
    msgWin.setAttribute('id', 'divMessageWin');
    msgWin.className = 'PopUpWindow';
    msgWin.innerHTML = 
        '<div id="divMessageWinHeader">Thumbnail Message</div><br />' +
        '<span id="lblMessageWinMessage">Thumbnail should not be saved.</span>' +
        '<p><button id="btnMessageWin" onclick="RemoveImageSaveWarning()">OK</button></p>';
    document.body.appendChild(msgWin);
    var btnMsgWin = document.getElementById('btnMessageWin');
    if (btnMsgWin) {
        btnMsgWin.focus();
    }
}

function RemoveImageSaveWarning(ele) {
    var msgWin = document.getElementById('divMessageWin');
    if (msgWin) {
        document.body.removeChild(msgWin);
    }
}