var DIY = {
    scrollHorizontal: function() {
      var e = $('scrollable');
      var left = Math.round(slider4.value*(e.scrollWidth-$('track1').getDimensions().width));
      e.scrollLeft = left;
    },
    GoNext : function () {
      var newValue = slider4.value + 0.2;
      if (newValue>1) {
        newValue = 1;
      }
      slider4.setValue(newValue);
    },
    GoPrevious: function () {
      var newValue = slider4.value - 0.2;
      if (newValue<0) {
        newValue = 0;
      }
      slider4.setValue(newValue);
    },
    isMouseOver : function(element, event) {
        var cos = Element.cumulativeOffset(element);
        return (event.pageX - cos[0]) > 0 &&
               (event.pageY - cos[1]) > 0 &&
               (event.pageX - cos[0]) < Element.getWidth(element) &&
               (event.pageY - cos[1]) < Element.getHeight(element)
    },

    showQuickLookButton : function() {
        var element = $(this);

        if (!$('quickLookElement')) {return; /*not initialized yet*/}
        if (DIY.quickLookElement == null) {
            DIY.quickLookElement = $('quickLookElement');
            DIY.quickLookElement.parentNode.removeChild(DIY.quickLookElement);
            document.body.appendChild(DIY.quickLookElement);
            DIY.quickLookElement.onmouseout = DIY.hideQuickLookButton;
        }

        var pos = element.cumulativeOffset()
        DIY.quickLookElement.setStyle({
            left: (pos.left+18 - $('scrollable').scrollLeft) + 'px',
            top: (pos.top + 50) + 'px'});

        DIY.quickLookElement.currentDiv = element;
        Element.show(DIY.quickLookElement);
    },

    hideQuickLookButton : function(event) {
        if (null==DIY.quickLookElement) {
          // we don't have the quicklook button showing yet
          return;
        }
        if (event == null) {
            event = window.event;
        }
        if (DIY.isMouseOver(DIY.quickLookElement, event) || DIY.isMouseOver(DIY.quickLookElement.currentDiv, event)) {
            //do nothing
        } else {
            DIY.quickLookElement.style.display = 'none';
        }
    },

    quickLook : function() {
        if (DIY.quickLookElement.currentDiv) {
            var offsets = document.viewport.getScrollOffsets();
            var container = $$('.container')[0];

            var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
            var x = (container.getWidth() - 500)/2;
            var y = offsets.top + (height/2) - 250;
            if (y<90) {y=90}

            $('quickLookBody').innerHTML = $('infoPopup_' + DIY.quickLookElement.currentDiv.id).innerHTML;
            $('rolloverHolder').setStyle({
              display: 'block',
              left: x + 'px',
              top: y + 'px'
            });
        }
    }
}


var slider4 = new Control.Slider('handle1', 'track1', {
  onSlide: DIY.scrollHorizontal,
  onChange: DIY.scrollHorizontal
});

$$('#scrollable .diy').each(function(objThis) {
   objThis.onmouseover = DIY.showQuickLookButton;
   Event.observe(objThis, 'mouseout',DIY.hideQuickLookButton);
});