// JavaScript Document
(function($){
$.fn.fancyZoom = function(options){
  var options   = options || {};
  var directory = options && options.directory ? options.directory : 'images';
  var zooming   = false;
  if ($('#zoom').length == 0) {
    var ext = $.browser.msie ? 'gif' : 'png';
    if ($.browser.msie)
	{
			var html = '<div id="zoom" title="Click or Esc to close image." style="display:none; height: 100%; width: 100%; zoom: 1;" onmouseover="setMinus(this);"> \
				<div class="roundify_out" style="text-align: center;"> \
					<div id="zoom_content" class="roundify"> \
					</div> \
					<div id="zoom_footer" class="Text_ProductOneLineDesc" style="display: none; font-size: 12px; text-align: center; vertical-align: top; position: relative; left: 10px; background-color: #ffffff;"> \
				</div> \
				</div> \
				<a href="#" title="Close" id="zoom_close" style="position:absolute; top:-2; left:-2;"> \
                    <img src="' + directory + '/closebox.' + ext + '" alt="Close" style="border:none; margin:0; padding:0;" /> \
                  </a> \
				<a href="#" id="moreInfo" class="Text_Zoom_MoreInfo" onclick="document.frm_moreInfo.submit();" title="More Info"> \
                    <img src="' + directory + '/see_more_details.' + ext + '" alt="See More Details" border="0" /> \
                  </a> \
			</div>';
	}
	else
	{
		var html = '<div id="zoom" title="Click or Esc to close image." style="display:none;" onmouseover="setMinus(this);"> \
                  <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
                    <tbody> \
                      <tr> \
                        <td class="tl" style="background:url(' + directory + '/tl.' + ext + ') 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                        <td class="tm" style="background:url(' + directory + '/tm.' + ext + ') 0 0 repeat-x; height:20px; overflow:hidden;" /> \
                        <td class="tr" style="background:url(' + directory + '/tr.' + ext + ') 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                      </tr> \
                      <tr> \
                        <td class="ml" style="background:url(' + directory + '/ml.' + ext + ') 0 0 repeat-y; width:20px; overflow:hidden; padding-bottom: 5px;" /> \
                        <td class="mm" style="background:#fff; padding:42px 10px 5px 10px;"> \
                          <div id="zoom_content" style="padding: 0px 0px 0px 1px;"> \
                          </div> \
						  <div id="zoom_footer" class="Text_ProductOneLineDesc" style="padding: 0px 0px 0px 0px; font-size: 12px; vertical-align: middle; text-align: center;"> \
                          </div> \
                        </td> \
                        <td class="mr" style="background:url(' + directory + '/mr.' + ext + ') 100% 0 repeat-y;  width:20px; overflow:hidden;" /> \
                      </tr> \
                      <tr> \
                        <td class="bl" style="background:url(' + directory + '/bl.' + ext + ') 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                        <td class="bm" style="background:url(' + directory + '/bm.' + ext + ') 0 100% repeat-x; height:20px; overflow:hidden;" /> \
                        <td class="br" style="background:url(' + directory + '/br.' + ext + ') 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                      </tr> \
                    </tbody> \
                  </table> \
                  <a href="#" title="Close" id="zoom_close" style="position:absolute; top:1; left:1;"> \
                    <img src="' + directory + '/closebox.' + ext + '" alt="Close" style="border:none; margin:0; padding:0;" /> \
                  </a> \
				  <a href="#" id="moreInfo" class="Text_Zoom_MoreInfo" onclick="document.frm_moreInfo.submit();" title="See More Details"> \
                    <img src="' + directory + '/see_more_details.' + ext + '" alt="See More Details" style="border:none; margin:0; padding:0;" /> \
                  </a> \
                </div>';
	}

    $('body').append(html);

    $('html').click(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();});
    $(document).keyup(function(event){
        if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
    });

    $('#zoom_close').click(hide);
	$('#moreInfo').click(hidequick);
	$('#zoom_close').mousedown(hide);
  }

  var zoom          = $('#zoom');
  var zoom_table    = $('#zoom_table');
  var zoom_close    = $('#zoom_close');
  var zoom_moreinfo    = $('#moreInfo');
  var zoom_content  = $('#zoom_content');
  var zoom_footer 	= $('#zoom_footer');
  var middle_row    = $('td.ml,td.mm,td.mr');
  
  this.each(function(i) {
   // $($(this).attr('href')).hide();
    $(this).click(show);
  });

  return this;

  function show(e) {
    if (zooming) return false;
		zooming         = true;
		
		//var content_div = $($(this).attr('href'));
  		var zoom_width  = options.width;
		var zoom_height = options.height;
		
		var browser=navigator.userAgent.toLowerCase();
		var img = this.id.toString().split("spn_")[1];
		var deviceid = jQuery("#hdn_deviceId").val();

		var mloc = jQuery("#url_"+img).attr('href');

		document.frm_moreInfo.action = mloc;
		
		var starttop = (jQuery("#img"+img).position().top);
		var startleft = (jQuery("#img"+img).position().left);
		
		/// GET LARGE IMAGE CONTAINER
		var content_div = jQuery("#img_"+img);
		
		var productTitle = (jQuery("#title_"+img).html());

		var titleHeight = (productTitle.length / 1.8);
		
		if(titleHeight < 25)
		{
			 titleHeight = 25;
		}
		else if(titleHeight < 38.5)
		{
			titleHeight = 39;
		}
		else if(titleHeight < 53)
		{
			titleHeight = 53;
		}
		else if(titleHeight < 66)
		{
			titleHeight = 67;
		}
		else
		{
			titleHeight = 81;
		}

		if ($.browser.msie)
		{
			
			zoom_footer.css({height: titleHeight, width: "84%"});
			titleHeight = titleHeight + 10;
		}
		else
		{
			zoom_footer.css({height: titleHeight});	
		}
		
		
		var smimage = document.getElementById("img"+img);
		var smimage_pos = (jQuery("#img"+img).position());
		
		var newImg = new Image();
		newImg.src = smimage.src;
		
		var smimage_center_height = smimage_pos.top - (newImg.height/2);
		var smimage_center_width = smimage_pos.left + (newImg.width/2);
	
		
		var lgimage = document.getElementById("imgHeight"+img);
		var newImg = new Image();
		newImg.src = lgimage.src;
		
		var lgimage_height = smimage.height;
		var lgimage_width = smimage.width;
		
		if((parseFloat(newImg.height) == parseInt(newImg.height)) && !isNaN(parseInt(newImg.height)) && newImg.src.indexOf(".") != -1)
		{
			lgimage_height = newImg.height;
			lgimage_width = newImg.width;
		}
		else
		{
			/// If large image is not available, use the regular image info.
			document.getElementById("imgHeight"+img).src = smimage.src;
		}
		
		var rightPad = document.getElementById('last_'+img).value;
	
		var isCategoryView = document.getElementById('hdn_catid').value;
		
		
		var leftAdjust = -28;
		var endpos = $("#right_"+img).position();  
  		var endwidth = $("#right_"+img).width();
		
		var finalleft = (endpos.left + endwidth) - lgimage_width + leftAdjust;
		
		
		/// if this is the third column (rightPad will be zero), then reduce left padding to scoot image left.
		var leftpad = 72;
		if(browser.indexOf('chrome') > -1 || browser.indexOf('safari') > -1)
		{
			leftpad = 80;
		}
		if ($.browser.msie)
		{
			leftAdjust = -22;
			leftpad = 80;
			finalleft = (endpos.left + endwidth) - lgimage_width + leftAdjust;
		}
		
		if(rightPad == 0)
		{
			leftpad = 62;
			if(browser.indexOf('chrome') > -1 || browser.indexOf('safari') > -1)
			{
				leftpad = 70;
			}
		}
		
		//// If single column layout, just position floating div's left edge 20px right of regular image.
		if (isCategoryView != "")
		{
			finalleft = smimage_pos.left + smimage.width + 20;
			/// IE doesnt have a real image border so add 5px to compensate and move right more.
			if ($.browser.msie){
				finalleft = smimage_pos.left + smimage.width + 25;
			}
		}
		
		var width              = lgimage_width ;
		var height             = lgimage_height;

		var curTop             = smimage_pos.top - (lgimage_height/2) + 20;
		var curLeft            = startleft + leftpad;

    $('#zoom').hide().css({
			position	: 'absolute',
			top				: curTop + 'px',
			left			: curLeft + 'px',
			width     : '1px',
			height    : '1px'
		});

    fixBackgroundsForIE();
    zoom_close.hide();
	zoom_moreinfo.hide();
	
	var image_start_adjust_top = 1;
	var image_start_adjust_left = 5;
	
	zoom_close.attr('curTop', smimage_pos.top + ((smimage.height - titleHeight)/8) + image_start_adjust_top);
	zoom_close.attr('curLeft', smimage_pos.left - (image_start_adjust_left));
	zoom_close.attr('curHeight', smimage.height);
	zoom_close.attr('curWidth', smimage.width/1.5);
	zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');
	
	// START POSITION FOR IMAGE TO APPEAR!
	$('#zoom').css({top: smimage_pos.top + ((smimage.height - titleHeight)/8) + image_start_adjust_top, left: smimage_pos.left - (image_start_adjust_left), height: smimage.height, width: smimage.width/1.5});
	//$('#zoom').css({top: smimage_pos.top + image_start_adjust_top, left: smimage_pos.left - (image_start_adjust_left + 15), height: smimage.height, width: smimage.width/1.5});

    if (options.closeOnClick) {
      $('#zoom').click(hide);
    }
	
	zoom_footer.html('');
	zoom_content.html(content_div.html());


	if ($.browser.msie && parseFloat($.browser.version) >= 6) {
			$('#zoom_content').append('<img src="/images_bw/dot_trans.gif" height="'+titleHeight+'" width="1"><br>');
			$('#zoom_footer').css({bottom: titleHeight + 9, 'padding-bottom' : '5px'});
			jQuery("#zoom_footer").stop().animate({opacity: '1.0'},"fast");
			}
	
	if ($.browser.msie && parseFloat($.browser.version) == 6) {
		$('#zoom_close').css({top:'-6', left:'-6'});
	}
			
			
			
	var zoom_width_pad = 65;
	var zoom_height_pad = 105 + titleHeight;
	var topPosPad = 10;
	
	if ($.browser.msie)
	{
		topPosPad = 0;
		zoom_width_pad = 57;
		zoom_height_pad = 150 + titleHeight;
	}
	if ($.browser.msie && parseFloat($.browser.version) == 6)
	{
		topPosPad = -5;
		zoom_width_pad = 57;
		zoom_height_pad = 160 + titleHeight;
	}
    $('#zoom').animate({
      top: smimage_pos.top - ((lgimage_height/2) + (titleHeight/15) + topPosPad), 
	  left: finalleft,
      opacity : "show",
      width   : width + zoom_width_pad,
      height  : height + zoom_height_pad
    }, 500, 'swing', function() {
      if (options.scaleImg != true) {
    		zoom_content.html(content_div.html());
  		}
			unfixBackgroundsForIE();
			zoom_close.show();
			zoom_moreinfo.show();
			$('#zoom_footer').append(productTitle).css({'vertical-align' : 'top'});
			if ($.browser.msie && parseFloat($.browser.version) >= 6) {
			$('#zoom_footer').css({display: ''});
			}
			zooming = false;
    })
    return false;
  }

  function hide() {
    if (zooming) return false;
		zooming         = true;
	  $('#zoom').unbind('click');
		fixBackgroundsForIE();
		if (zoom_close.attr('scaleImg') != 'true') {
  		zoom_content.html('');
		}
		zoom_close.hide();
		zoom_moreinfo.hide();
		zoom_footer.html('');
		hideTitle();
		
		if ($.browser.msie && parseFloat($.browser.version) >= 6) {
			$('#zoom_footer').css({display: 'none'});
			}
			
		var thetop = zoom_close.attr('curTop');
		var newTop =  parseInt(thetop);
		
		var theleft = zoom_close.attr('curLeft');
		var newLeft =  parseInt(theleft);
		
		$('#zoom').animate({
      top     : newTop +  'px',
      left    : newLeft + 'px',
      opacity : "hide",
      width   : zoom_close.attr('curWidth') + 'px',
      height  : zoom_close.attr('curHeight') + 'px'
    }, 500, 'swing', function() {
      if (zoom_close.attr('scaleImg') == 'true') {
    		zoom_content.html('');
  		}
      	unfixBackgroundsForIE();
		zooming = false;
		var theID = document.getElementById('hdn_restore').value;
		if(theID != 'undefined' && theID != "")
		{
			document.getElementById(theID).style.visibility = '';
			jQuery("#"+theID).addClass("quickViewButton");
		}
    });
    return false;
  }

function hidequick() {
    if (zooming) return false;
		zooming         = true;
	  $('#zoom').unbind('click');
		fixBackgroundsForIE();
		if (zoom_close.attr('scaleImg') != 'true') {
  		zoom_content.html('');
		}
		zoom_close.hide();
		zoom_moreinfo.hide();
		zoom_footer.html('');
		hideTitle();
		
		if ($.browser.msie && parseFloat($.browser.version) >= 6) {
			$('#zoom_footer').css({display: 'none'});
			}
			
		var thetop = zoom_close.attr('curTop');
		var newTop =  parseInt(thetop);
		
		var theleft = zoom_close.attr('curLeft');
		var newLeft =  parseInt(theleft);
		
		$('#zoom').animate({
      top     : newTop +  'px',
      left    : newLeft + 'px',
      opacity : "hide",
      width   : zoom_close.attr('curWidth') + 'px',
      height  : zoom_close.attr('curHeight') + 'px'
    }, 5, 'swing', function() {
      if (zoom_close.attr('scaleImg') == 'true') {
    		zoom_content.html('');
  		}
      	unfixBackgroundsForIE();
		zooming = false;
		var theID = document.getElementById('hdn_restore').value;
		if(theID != 'undefined' && theID != "")
		{
			document.getElementById(theID).style.visibility = '';
			jQuery("#"+theID).addClass("quickViewButton");
		}
    });
    return false;
  }

  function switchBackgroundImagesTo(to) {
   // $('#zoom_table td').each(function(i) {
     // var bg = $(this).css('background-image').replace(/\.(png|gif|none)\"\)$/, '.' + to + '")');
     // $(this).css('background-image', bg);
   // });
    var close_img = zoom_close.children('img');
    var new_img = close_img.attr('src').replace(/\.(png|gif|none)$/, '.' + 'png');
    close_img.attr('src', new_img);
  }

  function fixBackgroundsForIE() {
	 //$('#zoom_table').addClass('testing');
    if ($.browser.msie && parseFloat($.browser.version) >= 7) {
      switchBackgroundImagesTo('gif');
    }
	}

  function unfixBackgroundsForIE() {
	//$('#zoom_table').removeClass('testing');
    if ($.browser.msie && $.browser.version >= 7) {
      switchBackgroundImagesTo('png');
    }
	}
}
})(jQuery);