var hideTimer, showTimer;
var last_opened = '';
function showBubbleList (elem_id, width) {
	var anchor = document.getElementById('infoBubble_popup_'+elem_id);

	last_opened = anchor.id;
			var prodImage = document.getElementById('imagePopup_image_'+elem_id).innerHTML;
			var prodTitle = document.getElementById('imagePopup_title_'+elem_id).innerHTML;
			var prodText = document.getElementById('imagePopup_text_'+elem_id).innerHTML;
			var prodPrice = document.getElementById('imagePopup_price_'+elem_id).innerHTML;
			var prodShopButton = document.getElementById('imagePopup_shop_'+elem_id).innerHTML;
			var prodRating = document.getElementById('imagePopup_rating_'+elem_id).innerHTML;

			var content = '<table cellspacing=0>' +
								'<tr>' +
								'<td rowspan=2 width="30%">' + prodImage + '</td>' +
								'<td width="68%" colspan=2 cellspacing=5 valign="top" class="productTitle"><div style="color: #A75645; font-size: 11px; font-weight: bold; margin: 0; margin-left: 5px;">' + prodTitle + '</div></td>' +
								'<td width="2%" align=right valign=top><img src="http://i.pgcdn.com/images/ulists_bubbleclose.gif" border=0 style="cursor:pointer;"  onClick="Javascript:hideBubble('+elem_id+')"></td>' +
								'</tr>' +
								'<tr>' +
								'<td colspan=2 cellspacing=5 valign="top"><div style="color: #666; font-size: 10px; text-align: left; margin-top: 0px; margin-left: 5px;">' + prodText + '</div></td>' +
								'</tr>' +
								'<tr>' +
								'<td align="center" class="productPrice">' + prodPrice + '</td>' +
								'<td>' + prodRating + '</td>' +
								'<td>' + prodShopButton + '</td>' +
								'</tr>' +
								'</table>';
			var imagePopup = ImagePopup.getInstance();
			var popupEl = document.getElementById(imagePopup.elemId);
			window.addEvent(popupEl, 'mouseover', function() { clearHideBubbleTimer(elem_id, 450, 'list') }, document, true);
			window.addEvent(popupEl, 'mouseout', function() { timerHideBubble(elem_id) }, document, true);
			popupEl.style.width = width + "px";

			ImagePopup.show(anchor, content);

			var dropShadowEl = document.getElementById(imagePopup.dropShadowId);
			var calloutEl = document.getElementById(imagePopup.calloutId);

			// attach clear timer and hide bubble events
			window.addEvent(dropShadowEl, 'mouseover', function() { clearHideBubbleTimer(elem_id, 450, 'list') }, document, true);
			window.addEvent(dropShadowEl, 'mouseout', function() { timerHideBubble(elem_id) }, document, true);
			window.addEvent(calloutEl, 'mouseover', function() { clearHideBubbleTimer(elem_id, 450, 'list') }, document, true);
			window.addEvent(calloutEl, 'mouseout', function() { timerHideBubble(elem_id) }, document, true);
}

function showImageBubbleList (elem_id, width) {
    anchor = document.getElementById('infoBubble_popup_'+elem_id);
	last_opened = anchor.id;
			var prodImage = document.getElementById('imagePopup_image_'+elem_id).innerHTML;
			var content = '<table cellspacing=0  onMouseOver="javascript:clearHideBubbleTimer('+elem_id+', 450, \'list\');" onMouseOut="javascript:timerHideBubble('+elem_id+')">' +
								'<tr>' +
								'<td rowspan=2 width="98%">' + prodImage + '</td>' +
								'<td width="2%" align=right valign=top><img src="http://i.pgcdn.com/images/ulists_bubbleclose.gif" border=0 style="cursor:pointer;"  onClick="Javascript:hideBubble('+elem_id+')"></td>' +
								'</tr>' +
								'</table>';
			document.getElementById(ImagePopup.getInstance().elemId).style.width = width + "px";
	ImagePopup.show(anchor,content);
}

function showBubbleGrid (id, width) {
    // id example: infoBubble_1
    //Although we're passing elem (elem under mouse), we want the popup
    //to always show under the image so as not to cover up the rating / merchant info that's already shown.
    elem = document.getElementById('infoBubble_cell_' + id);
    varX = DomUtils.getElementLeft(elem);
	varY = DomUtils.getElementTop(elem);
	elementWidth = DomUtils.getElementWidth(elem);
	elementHeight = DomUtils.getElementHeight(elem);
	windowWidth = DomUtils.getWindowWidth();
	windowHeight = DomUtils.getWindowHeight();
    if(windowWidth < 800) {
      var small_res = true;
    }
	document.getElementById('infoBubble_' + id).style.display = 'block';
	document.getElementById('infoBubble_' + id).style.position = 'absolute';
	document.getElementById('infoBubbleArrow_' + id).style.position = 'absolute';
  	
    if((varX+width+elementWidth)<windowWidth) {
		arrowX = 'left';
	} 
    else if((varX+width+elementWidth)>windowWidth) {
		arrowX = 'right';
	} else { // Center
		arrowX = 'center';
	}

    if(small_res) {
      if((varX+width)<windowWidth) {
        arrowX = 'left';
      } 
      else if((varX+width)>windowWidth) {
        arrowX = 'right';
      }
    }
	
	if (varY < (windowHeight/3)) { // Top
		arrowY = 'top';
	} else if (varY > ((windowHeight/3) * 2)) { // Bottom
		arrowY = 'bottom';
	} else { // Mid
		arrowY = 'mid';
	}
	var content = document.getElementById('infoBubbleContent_' + id);
    content.style.width = width+ 'px';
	content.style.padding = '4px 7px 0 5px';
	if (DomUtils.browser.isIE() == false) content.style.display = 'table';
	var footer = document.getElementById('infoBubbleFooter_' + id);
    footer.style.padding = '0 7px 0 5px';
    var contentImgSrc = 'http://i.pgcdn.com/images/infoBubble_' + width + 'px.png';
    var footerImgSrc = 'http://i.pgcdn.com/images/infoBubble_' + width + 'px_footer.png';
	content.style.backgroundImage = 'url('+contentImgSrc+')';
	footer.style.backgroundImage = 'url('+footerImgSrc+')';
    fixBubblePNG(content, contentImgSrc);
    fixBubblePNG(footer, footerImgSrc);
	footer.style.height = '14px';
	footer.style.width = width + 'px';
	document.getElementById('infoBubble_' + id).style.position = 'absolute';
	if (arrowX == 'right') {
        if(DomUtils.browser.isIE() == false) {
            document.getElementById('infoBubble_' + id).style.left = (varX - width) + 'px';
        }
        else if(DomUtils.browser.isIE() == true) {
          if(small_res) {
             document.getElementById('infoBubble_' + id).style.left = varX - 1.6*width + 'px';
          }
          else {
             document.getElementById('infoBubble_' + id).style.left = varX - (elementWidth/.45) + 'px';
          }
        }
   	    var arrow = document.getElementById('infoBubbleArrow_' + id);
        var arrowImgSrc = 'http://i.pgcdn.com/images/infoBubble_arrow_right.png';
        arrow.style.backgroundImage = 'url('+arrowImgSrc+')';
        fixBubblePNG(arrow, arrowImgSrc);
        document.getElementById('infoBubbleArrow_' + id).style.width = '18px';
        document.getElementById('infoBubbleArrow_' + id).style.height = '31px';
        document.getElementById('infoBubbleArrow_' + id).style.right = '-8px';
	    document.getElementById('infoBubbleArrow_' + id).style.top = '31px';
	} 
    else if(arrowX == 'left') {
        if(DomUtils.browser.isIE() == false) {
            document.getElementById('infoBubble_' + id).style.left = varX + elementWidth + 'px';
        }
        else if(DomUtils.browser.isIE() == true) {
          if(small_res) {
            document.getElementById('infoBubble_' + id).style.left = width - (2*elementWidth) + 'px';
          }
          else {
            document.getElementById('infoBubble_' + id).style.left = varX + (elementWidth/6) + 'px';
          }
        }
   	    var arrow = document.getElementById('infoBubbleArrow_' + id);
        var arrowImgSrc = 'http://i.pgcdn.com/images/infoBubble_arrow_left.png';
        arrow.style.backgroundImage = 'url('+arrowImgSrc+')';
        fixBubblePNG(arrow, arrowImgSrc);
        arrow.style.width = '14px';
        arrow.style.height = '31px';
        arrow.style.left = '-9px';
	    arrow.style.top = '31px';
	}
    if(DomUtils.browser.isIE() == false) {
        document.getElementById('infoBubble_' + id).style.top = varY + (2*(elementHeight/16)) + 'px'; 
    }
    else if(DomUtils.browser.isIE() == true) {
        document.getElementById('infoBubble_' + id).style.top = varY - (.9*elementHeight) +  'px'; 
    }
}

function hideBubble (id) {
	document.getElementById('infoBubble_' + id).style.display = 'none';
		ImagePopup.getInstance().hide();
}

function timerShowBubble(anchor, id, width, type ) {
	if(type=='image_list'){
		clearTimeout(hideTimer);
        showTimer = setTimeout(function() { showImageBubbleList(id, width); },450);
	}
	if(type=='image_grid'){
	}
    if(type=="list") {
		clearTimeout(hideTimer);
        showTimer = setTimeout(function() { showBubbleList(id, width); },450);
    }
    if(type=="grid") {
         showTimer = setTimeout(function() { showBubbleGrid(id, width); },450);      
    }
}

function timerHideBubble(id) {
    clearTimeout(showTimer);  
    hideTimer=setTimeout(function() { hideBubble(id); }, 450);
}

function clearHideBubbleTimer(id, width, type) {
	clearTimeout(hideTimer);
	if(type=="grid") {
		pausecomp(1000);
	}
    if(type=="grid") {
        showBubbleGrid(id, width);
    }
}

function pausecomp(millis) {
  var date = new Date();
  var curDate = null;

  do { curDate = new Date(); }
  while(curDate-date < millis);
}

function fixBubblePNG(elem, imgSrc) {
  var arVersion = navigator.appVersion.split("MSIE");
  var version = 0.0;
  if (arVersion && arVersion.length > 1) version = parseFloat(arVersion[1]);
  if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
    elem.style.backgroundImage = '';
    elem.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader" 
      + "(src=\'"+imgSrc+"\', sizingMethod='scale');";
  }

}