var arrowImageHeight = 35;      // Height of arrow image in pixels;
var arrowImageWidth = 124;      // Height of arrow image in pixels;
var displayWaitMessage=false;   // Display a please wait message while images are loading?

var previewElementWidth = 204;

var scrollBarMinOffset = 62;
var scrollBarMaxOffset = 628;
var scrollBarWidth = scrollBarMaxOffset - scrollBarMinOffset;
var scrollBarActive = false;
var scrollBarMousePos = 0;

var previewImage = false;
var previewImageParent = false;
var slideSpeed = 0;
var previewImagePane = false;
var slideEndMarker = false;
var galleryContainer = false;


function stopSlide() {
  slideSpeed = 0;
//  document.getElementById('arrow_up_image').src='/img/bn_left.gif';
//  document.getElementById('arrow_down_image').src='/img/bn_right.gif';

  var scrollBar = document.getElementById('scroll_bar');
  if (scrollBar.offsetLeft == scrollBarMaxOffset) {document.getElementById('arrow_down_image').src='/site/img/bn_right-dis.gif';document.getElementById('arrow_up_image').src='/site/img/bn_left.gif';}
    else if (scrollBar.offsetLeft == scrollBarMinOffset) {document.getElementById('arrow_up_image').src='/site/img/bn_left-dis.gif'; document.getElementById('arrow_down_image').src='/site/img/bn_right.gif';}
    else {
      document.getElementById('arrow_up_image').src='/site/img/bn_left.gif';
      document.getElementById('arrow_down_image').src='/site/img/bn_right.gif';
    }
}

function disableScrollBar(e) {
        e = e || window.event;
        scrollBarActive = false;
        scrollBarMousePos = e.clientX;
        if (e.stopPropagation) e.stopPropagation();
        if (e.preventDefault) e.preventDefault();
        return false;
}
function enableScrollBar(e) {
        var mouseBtn;
        if (document.all && !window.opera) { // MSIE
                e = window.event;
                mouseBtn = 1;
        } else mouseBtn = 0;
        if (e.button == mouseBtn) {
                scrollBarActive = true;
                scrollBarMousePos = e.clientX;
        }
        if (e.stopPropagation) e.stopPropagation();
        if (e.preventDefault) e.preventDefault();
        return false;
}

function slidePreviewPane() {
        if (slideSpeed != 0) {
                if(slideSpeed < 0 && previewImageParent.scrollLeft == 0 || slideSpeed > 0 && previewImageParent.scrollLeft == previewImageParent.scrollWidth)
                        slideSpeed = 0;

                previewImageParent.scrollLeft += slideSpeed*3;
                setScrollBarPos();
                window.setTimeout('slidePreviewPane()', 20);
        }
}

function scrollPreviewPane(scrollPos) {
        if (scrollBarActive) {
                var scrollBar = document.getElementById('scroll_bar');
                if (scrollBar.offsetLeft + scrollPos < scrollBarMinOffset) scrollPos = scrollBar.offsetLeft - scrollBarMinOffset;
                if (scrollBar.offsetLeft + scrollPos > scrollBarMaxOffset) scrollPos = scrollBarMaxOffset - scrollBar.offsetLeft;
                scrollBar.style.left = scrollBar.offsetLeft + scrollPos + 'px';

    if (scrollBar.offsetLeft == scrollBarMaxOffset) {document.getElementById('arrow_down_image').src='/site/img/bn_right-dis.gif';}
    else if (scrollBar.offsetLeft == scrollBarMinOffset) {document.getElementById('arrow_up_image').src='/site/img/bn_left-dis.gif';}
    else {
      document.getElementById('arrow_up_image').src='/site/img/bn_left.gif';
      document.getElementById('arrow_down_image').src='/site/img/bn_right.gif';
    }

                previewImageParent.scrollLeft += Math.round(scrollPos/scrollBarWidth*(previewImageParent.scrollWidth-previewImageParent.clientWidth));
                //setScrollBarPos();
        }
}


window.onload = function() {
        previewImageParent = document.getElementById('theImages');
        previewImagePane = previewImageParent.getElementsByTagName('div').item(0);
        galleryContainer  = document.getElementById('galleryContainer');

        previewImagePane.style.width = previewImagePane.getElementsByTagName('div').length * previewElementWidth +'px';

        var arrowUpImg = document.getElementById('arrow_up_image');
        var arrowDownImg = document.getElementById('arrow_down_image');
        var scrollBarImg = document.getElementById('scroll_bar_image');

  var scrollBar = document.getElementById('scroll_bar');
  if (scrollBar.offsetLeft == scrollBarMaxOffset) {document.getElementById('arrow_down_image').src='/site/img/bn_right-dis.gif';}
    else if (scrollBar.offsetLeft == scrollBarMinOffset) {document.getElementById('arrow_up_image').src='/site/img/bn_left-dis.gif';}
    else {
      document.getElementById('arrow_up_image').src='/site/img/bn_left.gif';
      document.getElementById('arrow_down_image').src='/site/img/bn_right.gif';
    }

        if (previewImageParent.clientWidth < previewImageParent.scrollWidth) {

                arrowUpImg.onmousedown = function() {slideSpeed = -3; document.getElementById('arrow_up_image').src='/site/img/bn_left-hover.gif'; document.getElementById('arrow_down_image').src='/site/img/bn_right.gif';slidePreviewPane(); }
    arrowUpImg.onmouseover = function() {if (document.getElementById('arrow_up_image').src.match(/bn_left-dis/)==null) {document.getElementById('arrow_up_image').src='/site/img/bn_left_h.gif'}};
                arrowUpImg.onmouseup = stopSlide;
                arrowUpImg.onmouseout = stopSlide;

                arrowDownImg.onmousedown = function() {slideSpeed = 3; document.getElementById('arrow_down_image').src='/site/img/bn_right-hover.gif'; document.getElementById('arrow_up_image').src='/site/img/bn_left.gif'; slidePreviewPane();}
    arrowDownImg.onmouseover = function() {if (document.getElementById('arrow_down_image').src.match(/bn_right-dis/)==null) {document.getElementById('arrow_down_image').src='/site/img/bn_right_h.gif'}};
                arrowDownImg.onmouseup = stopSlide;
                arrowDownImg.onmouseout = stopSlide;

                document.body.onmousemove = function(e) {
                        e = e || window.event;
                        if (scrollBarActive) {
                                scrollPreviewPane(e.clientX-scrollBarMousePos);
                                scrollBarMousePos = e.clientX;
                        }
                        if (e.stopPropagation) e.stopPropagation();
                        if (e.preventDefault) e.preventDefault();
                        return false;
                }
                scrollBarImg.onmousedown = enableScrollBar;
                scrollBarImg.onmouseup = disableScrollBar;
                document.body.onmouseup = function() {if (scrollBarActive) scrollBarActive = false;}

                var previewElements = previewImagePane.getElementsByTagName('div');
                for (var i = 0; i < previewElements.length; i++) {
                        var el = previewElements.item(i);
                        if (el.className.indexOf('active') != -1) {
                                previewImageParent.scrollLeft = Math.round(el.offsetLeft-(previewImageParent.clientWidth-previewElementWidth)/2);
                                setScrollBarPos();
                                break;
                        }
                }
        }
        else {
                arrowUpImg.parentNode.style.display = 'none';
                arrowDownImg.parentNode.style.display = 'none';
                scrollBarImg.parentNode.style.display = 'none';
        }

        slidePreviewPane();
}


function setScrollBarPos(relativePos) {
        if (relativePos === undefined) relativePos = previewImageParent.scrollLeft/(previewImageParent.scrollWidth-previewImageParent.clientWidth);
        var scrollBar = document.getElementById('scroll_bar');
        var newOffset = scrollBarMinOffset + Math.round(relativePos*scrollBarWidth);
        if (newOffset <= scrollBarMinOffset) { newOffset = scrollBarMinOffset; document.getElementById('arrow_up_image').src='/site/img/bn_left-dis.gif'; }
        if (newOffset >= scrollBarMaxOffset) { newOffset = scrollBarMaxOffset; document.getElementById('arrow_down_image').src='/site/img/bn_right-dis.gif'; }
        scrollBar.style.left = newOffset + 'px';
}