/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(OS) {
    /* CONFIG */

    xOffset = 10;
    yOffset = 30;

    var browser;
    if ($.browser.mozilla) {
        browser = "Firefox";
    }
    else if ($.browser.msie) {
        browser = "Internet Explorer";
    }
    else if ($.browser.opera) {
        browser = "Opera";
    }

    else if ($.browser.safari) {
        browser = "Safari";
    }

    else {
        browser = "Unknown";
    }

    if (navigator.userAgent.indexOf('Chrome') != -1) {
        browser = "Chrome";
    }
	
	var touchX = 0;
	var touchY = 0;
	
	document.ontouchstart = function touchStart(event)
	{
		//$("#pre_table").remove();
		//$("#arrow").remove();
		
		var touch = event.touches[0];
		
		//$("<div>" + "Touch x:" + touch.pageX + ", y:" + touch.pageY + "</div>").appendTo(document.body);
		
		touchX = touch.pageX;
		touchY = touch.pageY;
	}	
	
	
    $("a.preview").hover(function(e) {
        this.t = this.title;
        this.title = "";

        //var thisID = this.productID.toString().split("url_")[1];
		
		var productLink = $(this).attr("href");
		
		var thisID = $(this).attr("productID");
		thisID = thisID.toString().split("url_")[1];
		
		//var thisID = $(this).attr("productID");

        var starttop = (jQuery("#img" + thisID).position().top)-4;
        var startleft = (jQuery("#img" + thisID).position().left);

        var main_image_top_offset = 0;
        var main_image_left_offset = 0;
        //var spimg = document.getElementById("#img1");

        var spimg = $("#img" + thisID)
        var spimg_real_width = spimg.width();
        var spimg_real_height = spimg.height();
        var spimg_right_vertical_center = starttop + (spimg_real_height / 2);

        //var mainimg = document.getElementById(this.id).name;
		//var mainimg = document.getElementById($(this).attr("productID")).name;
		var mainimg = $(this).attr("name");


        var newImg = new Image();
        newImg.src = document.getElementById("imgHeight" + thisID).src;

        var mainimg_real_height = newImg.height;


        main_image_top_offset = spimg_right_vertical_center - (mainimg_real_height / 2);

        // now that we know the middle, lets scoot it up 10px so that we will be just above center
        main_image_top_offset = main_image_top_offset - 10;

        main_image_left_offset = startleft + spimg_real_width;

        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;
        }

        var myWidth = 0, myHeight = 0;
        if (typeof (window.innerWidth) == 'number') {
            //Non-IE
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            //IE 4 compatible
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
        }

        var arrow_ver_adjust = -3;

        /// if the image would be displaying below the viewable area, push it up to keep in view
        if (((scrOfY + myHeight) <= (main_image_top_offset + mainimg_real_height + 70))) {
            /// try to keep arrow with spimg
            arrow_ver_adjust = ((scrOfY + myHeight) - (main_image_top_offset + mainimg_real_height) - 95) - arrow_ver_adjust;
            if (myWidth > 1020) {

                // adding 80 px to try and bump it up a little from bottom of browser.
                main_image_top_offset = (scrOfY + myHeight) - (mainimg_real_height + 88);
            }
            /// account for horizontal scrollbar.
            else {

                main_image_top_offset = (scrOfY + myHeight) - (mainimg_real_height + 100);
                arrow_ver_adjust = arrow_ver_adjust - 15;
            }
        }

        //alert(spimg_right_vertical_center - (mainimg_real_height / 2));


        /// if the image would be displaying above the viewable area, set top of image to top of viewable area.
        if (main_image_top_offset <= scrOfY + 35) {
            /// try to keep arrow with spimg
            arrow_ver_adjust = ((scrOfY + 30) - main_image_top_offset) + arrow_ver_adjust;

            main_image_top_offset = scrOfY + 35;

        }
        var arrow_pos = "left";
        // if browser window is too narrow to show popup to left, swap it to the right.
        if ((main_image_left_offset + newImg.width) > (myWidth - 72)) {
            main_image_left_offset = startleft - (newImg.width + 75);
            arrow_pos = "right";
        }

        // Set arrow position to center of popup (with adjustment)
        var arrow_vert_pos = (main_image_top_offset + (mainimg_real_height / 2)) - arrow_ver_adjust;

        // dont let the arrow display above the box
        if (arrow_vert_pos < main_image_top_offset) {
            arrow_vert_pos = main_image_top_offset + 26;

        }

        // dont let the arrow display below the box
        if (arrow_vert_pos > (main_image_top_offset + mainimg_real_height)) {
            arrow_vert_pos = (main_image_top_offset + mainimg_real_height) - 2;

        }

        // account for table padding of 20px (split the difference)
        main_image_top_offset = main_image_top_offset - 25;
       // arrow_vert_pos = arrow_vert_pos - 5;

        // shift quick view 20 px right of spimg
        main_image_left_offset = main_image_left_offset + 20;

        ///////////////////////////////////////////
        //Added by kevin to fix the "undefined" bug
        ///////////////////////////////////////////
        if (this.t == "undefined") {
            var c = "";
        }
        else if (this.t != "undefined" && this.t != "") {
            var c = "<br/>" + this.t;
        }
        else if (this.t == "") {
            var c = "";
        }
        //////////////////////////////////////////////////
        // var c = (this.t != "") ? "<br/>" + this.t : "";
        //////////////////////////////////////////////////
		
		
		//This is for the rounded box version
		//	<table id='pre_table' style='z-index: 2; background-color: #EEEEEE;' border='0'>\
		//		<tr>\
		//			<td id='box'>\
		//				<div id='left-shadow'>\
		//					<div id='right-shadow' style='background-color: #3F3F3F;' class='rounded {7px black}'>\
		//						<div id='mainBox'>\
		//							<div class='quickview_Header' style='position:relative; padding:0px; top:-4px; padding-bottom:5px;'>Click Thru for More Photos</div>\
		//							<div id='content'>\
		//								<span id='preview'><img border='0' src='" + mainimg + "' alt='Image preview' />" + c + "</span>\
		//							</div>\
		//							<div class='quickview_Footer' style='position: relative; top: 6px; background-color: #FFFFFF;'>Quick Zoom</div>\
		//						</div>\
		//					</div>\
		//				</div>\
		//			</td>\
		//		</tr>\
		//	</table>\
		
		var cTable = "\
			<span id='new_div' style=' z-index: 2;'>\
				<div id='left-shadow' style='z-index: 2; position: absolute;'>\
					<div id='mainBox'>\
						<div class='quickview_Header'>&nbsp;&nbsp;Click Thru for More Photos&nbsp;&nbsp;</div>\
						<div id='content' style='background-color: #FFFFFF;'>\
							<span id='preview'><img border='0' src='" + mainimg + "' alt='Image preview' /></span>\
						</div>\
						<div class='quickview_Footer' style='background-color: #FFFFFF;'>Quick Zoom</div>\
					</div>\
				</div>\
			</span>\
			";
			
		//This is for the rounded box version
		//	<table id='pre_table' style=' z-index: 2;' border='0'>\
		//		<tr>\
		//			<td id='box'>\
		//				<div id='left-shadow'>\
		//					<div id='right-shadow' style='background-color: #505151;' class='rounded {8px #505151}'>\
		//						<div id='mainBox' class='rounded {8px #505151}'>\
		//							<div class='quickview_Header'>Click Thru for More Photos</div>\
		//							<div id='content'>\
		//								<span id='preview'><img border='0' src='" + mainimg + "' alt='Image preview' />" + c + "</span>\
		//							</div>\
		//							<div class='quickview_Footer'>Quick Zoom</div>\
		//						</div>\
		//					</div>\
		//				</div>\
		//			</td>\
		//		</tr>\
		//	</table>\
			
		if(OS == "desktop")
		{
			var ffTable = "\
			<span id='new_div' style=' z-index: 2;'>\
				<div id='left-shadow' style='z-index: 2; position: absolute;'>\
					<div id='mainBox'>\
						<div class='quickview_Header'>&nbsp;&nbsp;Click Thru for More Photos&nbsp;&nbsp;</div>\
						<div id='content' style='background-color: #FFFFFF;'>\
							<span id='preview'><img border='0' src='" + mainimg + "' alt='Image preview' /></span>\
						</div>\
						<div class='quickview_Footer' style='background-color: #FFFFFF;'>Quick Zoom</div>\
					</div>\
				</div>\
			</span>\
			";
		}
		else if(OS == "mobile")
		{
			var ffTable = "\
			<span id='new_div' style=' z-index: 2; margin:0px; padding:0px;'>\
				<div id='left-shadow' style='z-index: 2; position: absolute; margin:0px; padding:0px;'>\
					<span id='closeButton' style='position:relative; z-index:99; border:0px solid red; float:right; height:30px; display:block; left:10px; top:-10px;'><img src='/images_bw/easyfinder/closebox.png' border='0' alt='Close Window'/></span>\
					<div id='mainBox' style='margin:0px; padding:0px;'>\
						<div class='quickview_Header'>&nbsp;&nbsp;Touch for More Photos&nbsp;&nbsp;&nbsp;&nbsp;</div>\
						<div id='content' style='background-color: #FFFFFF;'>\
							<span><a id='clickThrough' ontouchstart='window.location=\"" + productLink + "\"'><img border='0' src='" + mainimg + "' alt='Image preview' /></a></span>\
						</div>\
						<div class='quickview_Footer' style='background-color: #FFFFFF;'>Quick Zoom</div>\
					</div>\
				</div>\
			</span>\
			";
		}
			
					
		//This is for the rounded box version
		//	<table id='pre_table' style=' z-index: 2; background-color: #EEEEEE;' border='0'>\
		//		<tr>\
		//			<td id='box'>\
		//				<div id='left-shadow'>\
		//					<div id='right-shadow' style='background-color: #505151; color: #505151;' class='rounded {7px}'>\
		//						<div id='mainBox'>\
		//							<div class='quickview_Header' style='position:relative; padding:0px; top:-4px; padding-bottom:5px;'>Click Thru for More Photos</div>\	
		//							<div id='content'>\
		//								<span id='preview'><img border='0' src='" + mainimg + "' alt='Image preview' />" + c + "</span>\
		//							</div>\
		//							<div class='quickview_Footer' style='position: relative; top: 6px; background-color: #FFFFFF;'>Quick Zoom</div>\
		//						</div>\
		//					</div>\
		//				</div>\
		//			</td>\
		//		</tr>\
		//	</table>\
					
		var ieTable = "\
			<span id='new_div' style=' z-index: 2;'>\
				<table id='pre_table' style=' z-index: 2; background-color: #EEEEEE;' border='0'>\
					<tr>\
						<td id='box'>\
							<div id='left-shadow' style='z-index: 2; position: absolute;'>\
								<div id='mainBox'>\
									<div class='quickview_Header'>&nbsp;&nbsp;Click Thru for More Photos&nbsp;&nbsp;</div>\
									<div id='content' style='background-color: #FFFFFF;'>\
										<span id='preview'><img border='0' src='" + mainimg + "' alt='Image preview' /></span>\
									</div>\
									<div class='quickview_Footer' style='background-color: #FFFFFF;'>Quick Zoom</div>\
								</div>\
							</div>\
						</td>\
					</tr>\
				</table>\
			</span>\
			";
			
					

        if (browser == "Firefox" || browser == 'Safari' || browser == 'Opera') 
		{
            $("body").append(ffTable);
		}
        else if (browser == "Chrome") 
		{
			$('body').append(cTable);
		}
        else 
		{
            $("body").append(ieTable);
		}

        $("#left-shadow").css({'top': main_image_top_offset + 'px', 'left': +main_image_left_offset + 'px' });
		
		
        /*if (arrow_pos == "left") 
		{
            if (browser == "Internet Explorer") 
			{
                $("#left-shadow").dropShadow({ left: 2, top: 2, blur: 2, color: "#8F8F8F" });
            }
            else 
			{
                $("#mainBox").dropShadow({ left: 3, top: 3, blur: 2, color: "#8F8F8F" });
            }
        }
        else 
		{
            if (browser == "Internet Explorer") 
			{
                $("#left-shadow").dropShadow({ left: -3, top: 3, blur: 2, color: "#8F8F8F" });
            }
            else 
			{
                $("#mainBox").dropShadow({ left: -3, top: 3, blur: 2, color: "#8F8F8F" });
            }
        }*/
		
		if(OS == "desktop")
		{
			if(arrow_pos == "left")
			{
				$("#left-shadow").dropShadow({ left: 3, top: 3, blur: 2, color: "#8F8F8F" });
			}
			else
			{
				$("#left-shadow").dropShadow({ left: -3, top: 3, blur: 2, color: "#8F8F8F" });
			}

		}
		else if(OS == "mobile")
		{
			/*if(arrow_pos == "left")
			{
				$("#mainBox").dropShadow({ left: 3, top: 3, blur: 2, color: "#8F8F8F" });
			}
			else
			{
				$("#mainBox").dropShadow({ left: -3, top: 3, blur: 2, color: "#8F8F8F" });
			}*/

		}
		
		
        var movelft = $("#left-shadow").position().left - 11;

        // dynamically add the arrow to page and position it. 
        if (arrow_pos == "left") 
		{
            $("body").append("<span id='arrow' style='z-index: 99; border-right:2px solid #FFFFFF;'><img src='/images_bw/easyfinder/arrow_28_left.gif' border='0' alt='' /></span>");
        }
        else 
		{
            // arrow on right.
			if(OS == "desktop")
			{
				$("body").append("<span id='arrow' style='z-index: 99;'><img src='/images_bw/easyfinder/arrow_28_right.gif' border='0' alt='' /></span>");
			}
			else if(OS == "mobile")
			{
				$("body").append("<span id='arrow' style='z-index: 99;'><img src='/images_bw/easyfinder/arrow_28_right_ipad.gif' border='0' alt='' /></span>");
			}
            
            movelft = movelft + $("#left-shadow").width() + 8;
        }

        var imgcenter = (mainimg_real_height / 2);
        $("#arrow").css({ 'position': 'absolute', 'top': arrow_vert_pos, 'left': movelft});
		

		
		if(OS == "mobile")
		{
			var pageY = e.pageY - 20;
			var spImageHeight = spimg.height() / 2;
			
			pageY -= spImageHeight;
			
			$("#arrow").css("top", pageY + "px");
			//$("#arrow").css("left", moveleft + 1);
			
			var boxHeight = mainimg_real_height + 50;
			pageY -= boxHeight / 2;
			
			$("#left-shadow").css('top', pageY + 'px');
			//window.scrollTo(touchX, touchY);
		}
		

        $("#new_div").show();
        $("#arrow").show();
		
		
		
		
        //$('.rounded').corners();

    },
	function() {
	    this.title = this.t;
	    //$("#preview").remove();
		$("#clickThrough").mousedown(function(event){
			alert('Click Through! ' + $(this).attr("href"));
		});
		
		$("#clickThrough").mouseup(function(event){
			alert('Click Through! ' + $(this).attr("href"));
		});
		
		$("#clickThrough").click(function(event){
			alert('Click Through! ' + $(this).attr("href"));
		});
		
	    $("#new_div").remove();
	    $("#arrow").remove();
	});
	
    /*$("a.preview").mousemove(function(e){
    $("#preview")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
    });		*/
	
	
	
};


// starting the script on page load
$(window).load(function() {	
	
	
	var OS = navigator.platform;
	
	if(OS.toUpperCase() == "IPHONE")
	{
		OS = "mobile";	
	}
	else if(OS.toUpperCase() == "IPAD")
	{
		OS = "mobile";	
	}
	else
	{
		OS = "desktop";	
	}
	
	if(OS == "mobile")
	{		
		$('a.preview').click(function(event){						  
			event.preventDefault();
			//alert($('#pre_table').css('display'));
		});			
	}
	
	imagePreview(OS);
	
});