var myImages = new Array(); // Populated with preloaded images. Reference this array source to avoid "blank" images.

var myImagesBig = new Array();

var transformFilterType = 'Fade'; // IE activeX image transitions

var currentSelectionIndex = 0; // Current index of visible medium image
var dealerPixelsToMove = 8; // How many pixels to move each iteration
var dealerSpeed = 0; // How fast to execute each iteration in milliseconds
var dealerPixelsPerClick = 360; // How far to move layer on each click - width of image block of 9.
var dealerLefttime, dealerRighttime; // Timeout containers
var leftEdgeOfThumbLayer = 0; // The value of the left edge of the thumbnail layer (current or sliding toward)
var currentTopLeftThumb = 0; // Current visible top left thumbnail - ex: 0,8,17, etc.
var pages = 9; // How many pages of 9 thumbnails available - get's set in JSP based on image array list length.

// field ids
var bigimg = "ctl00_ctl00_cphBaseTemplate_cphPublicSecondary_img1";
var bigimglink = "img1Link";

//var bigimglink = "ctl00_ctl00_cphBaseTemplate_cphPublicSecondary_img1Link";

var pagingmsg = "ctl00_ctl00_cphBaseTemplate_cphPublicSecondary_lbl_paging";
var rightarrow = "ctl00_ctl00_cphBaseTemplate_cphPublicSecondary_dealerRightArrowImg";
var leftarrow = "ctl00_ctl00_cphBaseTemplate_cphPublicSecondary_dealerLeftArrowImg";

function swapImg(img) {
    if (currentSelectionIndex != img) {
        var ele = document.getElementById('thumb' + currentSelectionIndex);
        ele.style.borderColor = '#CCCCCC';
    }
    currentSelectionIndex = img;
    if (document.images[bigimg].filters) {
        document.images[bigimg].filters['DXImageTransform.Microsoft.' + transformFilterType].apply();
    }
    document.images[bigimg].src = myImages[img].src;
    if (document.images[bigimg].filters) {
        document.images[bigimg].filters['DXImageTransform.Microsoft.' + transformFilterType].play();
    }

    document.getElementById(bigimglink).href = "javascript: popit('" + myImagesBig[img].src + "', 'lgimg', '700', '600');";
    
    var ele = document.getElementById('thumb' + img);
    ele.style.borderColor = '#FE0000';
}

function hoverState(img, active) {
    if (currentSelectionIndex != img) {
        if (img == 'img1') {
            var ele = document.getElementById(img);
        } else {
            var ele = document.getElementById('thumb' + img);
        }
        if (active) {
            ele.style.borderColor = '#FE0000';
        } else {
            ele.style.borderColor = '#CCCCCC';
        }
    }
}

function dealerMoveRight() {
    if (dealerLefttime) clearTimeout(dealerLefttime);
    var ele = document.getElementById('thumbRow');
    if (parseInt(ele.style.left) < leftEdgeOfThumbLayer) {
        if (parseInt(ele.style.left) + dealerPixelsToMove > leftEdgeOfThumbLayer) {
            ele.style.left = leftEdgeOfThumbLayer + 'px';
            if (dealerRighttime) clearTimeout(dealerRighttime);
        } else {
            ele.style.left = (parseInt(ele.style.left) + dealerPixelsToMove) + 'px';
            dealerRighttime = setTimeout("dealerMoveRight()", dealerSpeed);
        }
    } else if (dealerRighttime) {
        clearTimeout(dealerRighttime);
    }
}

function dealerMoveLeft() {
    if (dealerRighttime) clearTimeout(dealerRighttime);
    var ele = document.getElementById('thumbRow');

    if (parseInt(ele.style.left) > leftEdgeOfThumbLayer) {
        if (parseInt(ele.style.left) - dealerPixelsToMove < leftEdgeOfThumbLayer) {
            ele.style.left = leftEdgeOfThumbLayer + 'px';
            if (dealerLefttime) clearTimeout(dealerLefttime);
        } else {
            ele.style.left = (parseInt(ele.style.left) - dealerPixelsToMove) + 'px';
            dealerLefttime = setTimeout("dealerMoveLeft()", dealerSpeed);
        }
    } else if (dealerLefttime) {
        clearTimeout(dealerLefttime);
    }
}

function leftButton() {
    var ele = document.getElementById('thumbRow');
    if (currentTopLeftThumb - 4 >= 0) {
        currentTopLeftThumb -= 4;
        leftEdgeOfThumbLayer += dealerPixelsPerClick;
        dealerMoveRight();
        document.getElementById(pagingmsg).innerHTML = '<strong>' + (currentTopLeftThumb + 1) + '-' + (((currentTopLeftThumb + 4) < mediumImageList.length) ? currentTopLeftThumb + 4 : mediumImageList.length) + ' of ' + mediumImageList.length + '<\/strong>';

    }
    setArrows();
}

function rightButton() {
    var ele = document.getElementById('thumbRow');
    if (currentTopLeftThumb + 4 < (pages * 9)) {
        currentTopLeftThumb += 4;
        leftEdgeOfThumbLayer -= dealerPixelsPerClick;
        dealerMoveLeft();
        document.getElementById(pagingmsg).innerHTML = '<strong>' + (currentTopLeftThumb + 1) + '-' + (((currentTopLeftThumb + 4) < mediumImageList.length) ? currentTopLeftThumb + 4 : mediumImageList.length) + ' of ' + mediumImageList.length + '<\/strong>';
    }
    setArrows();
}

function setArrows() {

    if (myImages.length > 4) {

        if (document.images[rightarrow]) {

            if (currentTopLeftThumb + 1 <= (pages * 9) - 4) {
                document.images[rightarrow].src = 'images/det_next_ro.jpg';
            } else {
            document.images[rightarrow].src = 'images/det_next.jpg';
            }

        }

        if (document.images[leftarrow]) {

            if (currentTopLeftThumb > 0) {
                document.images[leftarrow].src = 'images/det_prev_ro.jpg';
            } else {
            document.images[leftarrow].src = 'images/det_prev.jpg';
            }

        }
    }
}

function preloadImages() {
    var arrow = new Image();
    arrow.src = 'images/det_prev_ro.jpg';
    var arrow2 = new Image();
    arrow2.src = 'images/det_next.jpg';
    var arrow3 = new Image();
    arrow3.src = 'images/det_prev.jpg';
    var arrow4 = new Image();
    arrow4.src = 'images/det_next_ro.jpg';

    for (var i = 0; i < mediumImageList.length; i++) {
        myImages[i] = new Image();
        myImages[i].src = mediumImageList[i];
    }

    for (var i = 0; i < bigImageList.length; i++) {
        myImagesBig[i] = new Image();
        myImagesBig[i].src = bigImageList[i];
    }
}