var divSliderContainer;
//var finalhiddenwidth = 353; // when device images at full size
var finalhiddenwidth = 330; // when clipping device images
var overlaywidth = 100;
var slideOpenDelay = 500;
var slideCloseDelay = 0;
var slidedelay = 5;
var slidefactor = (navigator.userAgent.indexOf('MSIE') > -1 ? 8 : 20);
var sliderItems = new Array();
var SliderItem = function(deviceId,containerId)
{
    this.deviceId = deviceId;
    this.containerId = containerId; // id of div that wraps ascx ctl
    this.sliderCloseTimeout = null;
    this.sliderOpenTimeout = null;
    this.sliderInterval = null;
    this.isOpening = false;
    this.isOpen = false;
    this.isClosing = false;
    this.initialXBeforeSlide = null;
}
function showSliderIfJavaScriptEnabled(containerId,failoverId)
{
    document.getElementById(containerId).style.display='block';
    document.getElementById(failoverId).style.display='none';
}
function getSliderIndex(deviceId)
{
    for (var i=0; i<sliderItems.length; i++)
    {
        if (sliderItems[i].deviceId == deviceId)
            return i;
    }    
}
function cancelSliderOpen(deviceId)
{
    clearTimeout(sliderItems[getSliderIndex(deviceId)].sliderOpenTimeout);
}
function cancelSliderClose(deviceId)
{
    clearTimeout(sliderItems[getSliderIndex(deviceId)].sliderCloseTimeout);    
}
function closeslider(deviceId)
{
    cancelSliderOpen(deviceId);
    sliderItems[getSliderIndex(deviceId)].sliderCloseTimeout = setTimeout("closesliderOnDelay('"+deviceId+"');", slideCloseDelay);
}
function closesliderOnDelay(deviceId)
{
    var hiddencontentdivwidth= getpxInt(document.getElementById('divContent'+deviceId).style.width);            
    if(hiddencontentdivwidth > overlaywidth)
    {
        var ndx = getSliderIndex(deviceId);
        clearInterval(sliderItems[ndx].sliderInterval);
        //sliderItems[ndx].isOpening = true;
        sliderItems[ndx].sliderInterval = setInterval("begincloseslide('" + deviceId + "')",slidedelay);
        sliderItems[ndx].isOpen = true;
        sliderItems[ndx].isClosing = true;
    }
}
function openslider(evt, deviceId)
{
    cancelSliderClose(deviceId);
    var containerId = sliderItems[getSliderIndex(deviceId)].containerId;
    
    // Update the current moused-over item
    var container = getContainer(containerId);
    container.currentDeviceId = deviceId;
    recordMousePosition((evt) ? evt : null,containerId)
    
    // Don't open if another slider is sliding open or closed
    for (var i=0; i<sliderItems.length; i++)
        // If different item is sliding open, ignore current openslider call
        if (sliderItems[i].deviceId != deviceId && sliderItems[i].containerId == containerId && sliderItems[i].isOpening)
        {
            return;
        }
        // If different item is sliding closed, come back to this call to openslider...
        else if (sliderItems[i].deviceId != deviceId && sliderItems[i].containerId == containerId && sliderItems[i].isClosing)
        {
            //setTimeout("openslider(null,'"+deviceId+"');", 300);
            return;
        }
    // Close any currently-expanded sliders    
    for (var i=0; i<sliderItems.length; i++)
        if (sliderItems[i].deviceId != deviceId && sliderItems[i].containerId == containerId &&  (sliderItems[i].isOpen || sliderItems[i].isOpening))
            closeslider(sliderItems[i].deviceId);
        
    sliderItems[getSliderIndex(deviceId)].initialXBeforeSlide = getPageCoords(document.getElementById("divSliderItem"+deviceId)).x;
    sliderItems[getSliderIndex(deviceId)].sliderOpenTimeout = setTimeout("opensliderOnDelay('"+deviceId+"');", slideOpenDelay);
}
function opensliderOnDelay(deviceId)
{
    cancelSliderClose(deviceId);
    // Close any currently-expanded sliders
    var containerId = sliderItems[getSliderIndex(deviceId)].containerId;
    for (var i=0; i<sliderItems.length; i++)
        if (sliderItems[i].deviceId != deviceId && sliderItems[i].containerId == containerId &&  (sliderItems[i].isOpen || sliderItems[i].isOpening))
            closeslider(sliderItems[i].deviceId);

    // Don't open slider if mouse is no longer over item
    var contentDiv = document.getElementById('divContent'+deviceId);
    var contentCoords = getPageCoords(contentDiv);
    var container = getContainer(containerId);
    container.currentDeviceId = deviceId;
    if (container.mousePosition.x + getScrollXY().x < contentCoords.x || container.mousePosition.x + getScrollXY().x > contentCoords.x + overlaywidth)
////TESTING ONLY:
//    {
//        document.getElementById('debug').innerHTML = 
//                'Slider opening cancelled' + 
//                '<br/>container.mousePosition.x = ' + container.mousePosition.x + 
//                '<br/>contentCoords.x = ' + contentCoords.x + 
//                '<br/>overlaywidth = ' + overlaywidth +
//                '<br/>getScrollXY().x = ' + getScrollXY().x;
////END TESTING ONLY
        return;
////TESTING ONLY:
//    }
//    else
//    {
//        document.getElementById('debug').innerHTML = 
//                'Slider opening' + 
//                '<br/>container.mousePosition.x = ' + container.mousePosition.x + 
//                '<br/>contentCoords.x = ' + contentCoords.x + 
//                '<br/>overlaywidth = ' + overlaywidth +
//                '<br/>getScrollXY().x = ' + getScrollXY().x;
//    }
////END TESTING ONLY
    var hiddencontentdivwidth= getpxInt(contentDiv.style.width);
    if(hiddencontentdivwidth < finalhiddenwidth)
    {  
        var ndx = getSliderIndex(deviceId);
        clearInterval(sliderItems[ndx].sliderInterval);
        sliderItems[ndx].isOpening = true;
        sliderItems[ndx].sliderInterval = setInterval("beginslide('" + deviceId + "')",slidedelay);        
        sliderItems[ndx].isOpen = false;
    }
}
function begincloseslide(deviceId)
{
    var hiddencontentdivwidth;
    var internalcontentdivmarginleft;
    var outterdivwidth;
    hiddencontentdivwidth= getpxInt(document.getElementById('divContent'+deviceId).style.width);
    internalcontentdivmarginleft = getpxInt(document.getElementById('divContentInner'+deviceId).style.marginLeft);
    outterdivwidth = getpxInt(document.getElementById('divSliderItem'+deviceId).style.width);
    
    var ndx = getSliderIndex(deviceId);
    sliderItems[ndx].isOpen = false;
    sliderItems[ndx].isOpening = false;
    
    if(hiddencontentdivwidth > overlaywidth)
    {  
        hiddencontentdivwidth= getpxInt(document.getElementById('divContent'+deviceId).style.width);
        internalcontentdivmarginleft = getpxInt(document.getElementById('divContentInner'+deviceId).style.marginLeft);
        outterdivwidth = getpxInt(document.getElementById('divSliderItem'+deviceId).style.width);
    
        document.getElementById('divContent'+deviceId).style.width= (hiddencontentdivwidth - slidefactor) + "px";
        document.getElementById('divSliderItem'+deviceId).style.width = (outterdivwidth - slidefactor) + "px";
        document.getElementById('divContentInner'+deviceId).style.marginLeft=(internalcontentdivmarginleft - slidefactor) + "px";
        sliderItems[ndx].isClosing = true;        
    }
    else
    {        
        clearInterval(sliderItems[ndx].sliderInterval);
        sliderItems[ndx].isClosing = false;        
    }
}
function beginslide(deviceId)
{
    var hiddencontentdivwidth;
    var internalcontentdivmarginleft;
    var outterdivwidth;
    hiddencontentdivwidth= getpxInt(document.getElementById('divContent'+deviceId).style.width);
    internalcontentdivmarginleft = getpxInt(document.getElementById('divContentInner'+deviceId).style.marginLeft);
    outterdivwidth = getpxInt(document.getElementById('divSliderItem'+deviceId).style.width);
    
    var ndx = getSliderIndex(deviceId);
    sliderItems[ndx].isClosed = false;
    sliderItems[ndx].isClosing = false;
    
    if(hiddencontentdivwidth <= finalhiddenwidth)
    {  
        hiddencontentdivwidth= getpxInt(document.getElementById('divContent'+deviceId).style.width);
        internalcontentdivmarginleft = getpxInt(document.getElementById('divContentInner'+deviceId).style.marginLeft);
        outterdivwidth = getpxInt(document.getElementById('divSliderItem'+deviceId).style.width);
    
        document.getElementById('divContent'+deviceId).style.width= (hiddencontentdivwidth + slidefactor) + "px";
        document.getElementById('divSliderItem'+deviceId).style.width = (outterdivwidth + slidefactor) + "px";
        document.getElementById('divContentInner'+deviceId).style.marginLeft= (internalcontentdivmarginleft + slidefactor) + "px";;

        var ndx = getSliderIndex(deviceId);        
        sliderItems[getSliderIndex(deviceId)].isOpen = false;
        var container = document.getElementById(sliderItems[ndx].containerId);
        var content = document.getElementById('divContent'+deviceId);
        var containerX = getPageCoords(container).x;
        var contentX = getPageCoords(content).x;
        var left = parseInt(contentX) + parseInt(content.style.width);
        var right = parseInt(container.scrollLeft) + parseInt(container.style.width) + parseInt(containerX);
        if (left > right)
            container.scrollLeft = contentX + parseInt(content.style.width) - containerX - parseInt(container.style.width);
            
        sliderItems[ndx].isOpening = true;
        sliderItems[ndx].isOpen = false;
    }
    else
    {        
        clearInterval(sliderItems[ndx].sliderInterval);
        sliderItems[ndx].isOpening = false;
        sliderItems[ndx].isOpen = true;
    }
}
function getpxInt(pxstring)
{
    if(pxstring == "")
    {
        pxstring = "0px";
    }
    return parseInt(pxstring.substring(0,pxstring.length-2));
}
function getPageCoords(el) 
{ 
  var coords = {x: 0, y: 0};
  do {
    coords.x += el.offsetLeft;
    coords.y += el.offsetTop;
  }
  while ((el = el.offsetParent));
  return coords;
}
var containers = new Array();
var ContainerInfo = function(containerId)
{
    this.containerId = containerId;
    this.mousePosition = null;
    this.currentDeviceId = null;
}
//function recordMousePosition(containerId)
//{
//    var container = getContainer(containerId);
//    container.mousePosition = {x: event.offsetLeft, y: event.offsetTop};
//    //document.getElementById('debug').innerHTML = 'mouse position:<br/>X: ' + event.offsetLeft + '<br/>Y: ' + event.offsetTop;
//}
function getContainer(containerId)
{
    var ndx = null;
    for (var i = 0; i < containers.length; i++)
    {
        if (containers[i].containerId == containerId)
        {
            ndx = i;
            break;
        }
    }
    if (ndx == null)
    {
        ndx = containers.length;
        containers[ndx] = new ContainerInfo(containerId);
    }
    return containers[ndx];
}
function recordMousePosition(evt,containerId){ 
//alert('ev = ' + ev + '\ncontainerId = ' + containerId);
    var mousePageX, mousePageY; 
    evt = (evt) ? evt : ((window.event) ? event : null);
    if(!evt) return;
//    if(!evt)evt = window.event; 
//    if(!evt) return;
    if(typeof evtpageY == 'number')
    {  //mozilla,  Netscape, Opera 7 
        mousePageX = evt.pageX; 
        mousePageY = evt.pageY; 
    }
    else
    {  // IE, Opera <= 6 
        mousePageX = evt.clientX; 
        mousePageY = evt.clientY; 
//        if(!self.opera)  //not Opera <= 6 
//        {
//            if (document.getElementById(containerId))
//            {
//                alert('document.getElementById(containerId).scrollLeft=' + document.getElementById(containerId).scrollLeft);
//                mousePageX += parseInt(document.getElementById(containerId).scrollLeft);
//                mousePageY += parseInt(document.getElementById(containerId).scrollTop);
//            }
//        }
            
//            if((!document.compatMode)|| 
//              (document.compatMode == 'BackCompat')){ 
//                mousePageX += document.body.scrollLeft; 
//                mousePageY += document.body.scrollTop; 
//            }else{ 
//                mousePageX += document.getElementById(containerId).scrollLeft; 
//                mousePageY += document.getElementById(containerId).scrollTop;
//                
////                mousePageX += document.documentElement.scrollLeft; 
////                mousePageY += document.documentElement.scrollTop; 
//            } 
//        } 
    } 
    if (document.getElementById(containerId))
    {
        mousePageX += parseInt(document.getElementById(containerId).scrollLeft);
        mousePageY += parseInt(document.getElementById(containerId).scrollTop);
    }

    //window.status = "X: " + mousePageX + " Y: " + mousePageY; 
    var container = getContainer(containerId);
    container.mousePosition = {x: mousePageX, y: mousePageY};
    
//alert('mousePageX = ' + mousePageX + '\nmousePageY = ' + mousePageY);
} 
//function showMousePosition(e)
//{
//    document.getElementById('debug').innerHTML = e;
//}
function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  //return [ scrOfX, scrOfY ];
  return { x:scrOfX, y:scrOfY }
}