// JavaScript Document

$(function() {
		   
        var unitCount,
        visibleUnits = 5,
        unitWidth = 180,
        spots = 'div#divProductList>div',
        container = 'div#divProductList>div>div',
        elements = 'div#divProductList>div>div>ul>li';
        $(container).scrollLeft(0).css({ overflow: 'hidden' });
        unitCount = $(elements).length;
        if (unitCount > visibleUnits) {
            $('<span class="prev"></span><span class="next"></span>')
        .appendTo(spots)
        .click(function() {
            var t = $(container).scrollLeft();
            if (t % unitWidth == 0) {
                if ($(this).hasClass('prev') && t > 0) {
                    t -= unitWidth;
                    $(container).stop().animate({ scrollLeft: t + 'px' });
                }
                else if ($(this).hasClass('next') && t < (unitCount - visibleUnits) * unitWidth) {
                    t += unitWidth;
                    $(container).stop().animate({ scrollLeft: t + 'px' });
                }
            }
        });
        }
        var overPopup = overElement = false;
        var popup = $('<div class="popup2" id="popup2"></div>')
                  .mouseenter(function() {
                      overPopup = true;
                  })
                  .mouseleave(function() {
                      overPopup = false;
                      window.setTimeout(function() {
                          if (!overElement) {
                              popup.hide();
                          }
                      }, 25);
                  })
                  .appendTo(spots),
        offset = $(spots).offset().left;
        $(elements).mouseenter(function() {
            overElement = true;
            var li = $(this);
            window.setTimeout(function() {
									   
                if (!overPopup) {
					if((li.offset().left - offset) > 180) {
	                    popup.html(li.clone().find('p')).css({ left: (li.offset().left - offset - 180) }).fadeIn(300);
						document.getElementById('popup2').style.backgroundImage = 'url(/product/start/popup.png)';
					
					} else {
	                    popup.html(li.clone().find('p')).css({ left: (li.offset().left - offset + 170) }).fadeIn(300);
						document.getElementById('popup2').style.backgroundImage = 'url(/product/start/popup2.png)';
					}
                }
            }, 25);
        })
		
      .mouseleave(function() {
          overElement = false;
          var li = $(this);
          window.setTimeout(function() {
                 popup.hide();
          }, 25);
      });


    $('.popup').each(function() {
        var k = $(this);
        var k_m = k.innerHeight();
        k_m = k_m * -1 + 30;
        k.css({ top: k_m });
    });
});