var divSliderContainer;
//var finalhiddenwidth = 353; // when device images at full size
var finalhiddenwidth = 370; // when clipping device images
var overlaywidth = 175;
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 showProductSlider(containerId)
{
   document.getElementById(containerId).style.display = 'block';
   
   if (navigator.userAgent.indexOf("Opera") != -1)
   {
      document.getElementById("divProductSlider").style.overflow = "scroll";
   } 
}

function showProductSliderSpecs(evt, specButtonId, specContentId)
{
   var mousePageX, mousePageY;
   evt = (evt) ? evt : ((window.event) ? event : null);
   
   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;
   }
   //window.status = "showProductSliderSpecs - X: " + mousePageX + " Y: " + mousePageY;
   
   o = document.getElementById(specContentId);
   o1 = document.getElementById('productSliderSingleSpec-1');
   if (o != null)
   {
      pos = findProductSliderSpecsImagePos(document.getElementById(specButtonId));

      o1.innerHTML = o.innerHTML;
      o1.style.left = mousePageX + "px";
      //o1.style.left = pos[0] - 15 + "px";
      o1.style.top = pos[1] + 25 + "px";
      o1.style.display = "block";
   }
}

function hideProductSliderSpecs(specContentId)
{
   o1 = document.getElementById('productSliderSingleSpec-1');
   o = document.getElementById(specContentId);
   if (o != null)
   {
      //o.style.display = "none";
      o1.style.display = "none";
   }
}

function findProductSliderSpecsImagePos(obj)
{
   var curleft = curtop = 0;
   if (obj.offsetParent)
   {
      curleft = obj.offsetLeft
      curtop = obj.offsetTop
      while (obj = obj.offsetParent)
      {
         curleft += obj.offsetLeft
         curtop += obj.offsetTop
      }
   }
   return [curleft, curtop];
}


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('divProductContent' + 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("divProductSliderItem" + 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('divProductContent' + 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('divProductContent' + deviceId).style.width);
   internalcontentdivmarginleft = getpxInt(document.getElementById('divProductContentInner' + deviceId).style.marginLeft);
   outterdivwidth = getpxInt(document.getElementById('divProductSliderItem' + deviceId).style.width);

   var ndx = getSliderIndex(deviceId);
   sliderItems[ndx].isOpen = false;
   sliderItems[ndx].isOpening = false;

   if (hiddencontentdivwidth > overlaywidth)
   {
      hiddencontentdivwidth = getpxInt(document.getElementById('divProductContent' + deviceId).style.width);
      internalcontentdivmarginleft = getpxInt(document.getElementById('divProductContentInner' + deviceId).style.marginLeft);
      outterdivwidth = getpxInt(document.getElementById('divProductSliderItem' + deviceId).style.width);

      document.getElementById('divProductContent' + deviceId).style.width = (hiddencontentdivwidth - slidefactor) + "px";
      document.getElementById('divProductSliderItem' + deviceId).style.width = (outterdivwidth - slidefactor) + "px";
      document.getElementById('divProductContentInner' + 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('divProductContent' + deviceId).style.width);
   internalcontentdivmarginleft = getpxInt(document.getElementById('divProductContentInner' + deviceId).style.marginLeft);
   outterdivwidth = getpxInt(document.getElementById('divProductSliderItem' + deviceId).style.width);

   var ndx = getSliderIndex(deviceId);
   sliderItems[ndx].isClosed = false;
   sliderItems[ndx].isClosing = false;

   if (hiddencontentdivwidth <= finalhiddenwidth)
   {
      hiddencontentdivwidth = getpxInt(document.getElementById('divProductContent' + deviceId).style.width);
      internalcontentdivmarginleft = getpxInt(document.getElementById('divProductContentInner' + deviceId).style.marginLeft);
      outterdivwidth = getpxInt(document.getElementById('divProductSliderItem' + deviceId).style.width);

      document.getElementById('divProductContent' + deviceId).style.width = (hiddencontentdivwidth + slidefactor) + "px";
      document.getElementById('divProductSliderItem' + deviceId).style.width = (outterdivwidth + slidefactor) + "px";
      document.getElementById('divProductContentInner' + 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('divProductContent' + 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)
{
   //if (el == null)
   //{
   //   el = document.getElementById("divProductSliderItemctl0691");
   //}
   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; 
      //            } 
      //        } 
   }
   //window.status = "X: " + mousePageX + " Y: " + mousePageY; 
   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 }
}