/*
 * Tooltip 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.tooltip = function(x){	
	/* CONFIG */	
		//Numbers passed in: 1=Mens Tops, 2=Mens Shorts, 3= Womens, 4=Kid's Tops, 5=Kids shorts 6=Socks

		xOffset = 95;
		yOffset = -470;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
if($("#tooltip")) $('#tooltip').remove();
switch(x)
{
case 1:
	$("body").append("<div id='tooltip'><table border='0' cellpadding='0' cellspacing='0' id='tooltipTable'><tr bgcolor='#7f7e7c'><th>SIZE</th><th>XS</th><th>S</th><th>M</th><th>L</th><th>XL</th><th>XXL</th></tr><tr bgcolor='#45413f'><td></td><td>34/36</td><td>36/38<td>38/40<td>41/43</td><td>44/46</td><td>47/49</td></tr></table></div>");
  break;
case 2:
	$("body").append("<div id='tooltip'><table border='0' cellpadding='0' cellspacing='0' id='tooltipTable'><tr bgcolor='#7f7e7c'><th>SIZE</th><th>S</th><th>M</th><th>L</th><th>XL</th><th>XXL</th></tr><tr bgcolor='#45413f'><td></td><td>28/29<td>30/32</td><td>33/35</td><td>36/38</td><td>39/41</td></tr></table></div>");
  break;
case 3:
	$("body").append("<div id='tooltip'><table border='0' cellpadding='0' cellspacing='0' id='tooltipTable'><tr bgcolor='#7f7e7c'><th>SIZE</th><th>XS</th><th>S</th><th>M</th><th>L</th><th>XL</th></tr><tr bgcolor='#45413f'><td></td><td>6/8<td>8/10</td><td>10/12</td><td>14/16</td><td>16/18</td></tr></table></div>");
  
  break;  
case 4:
	$("body").append("<div id='tooltip'><table border='0' cellpadding='0' cellspacing='0' id='tooltipTable'><tr bgcolor='#7f7e7c'><th>SIZE</th><th>XS</th><th>S</th><th>M</th><th>L</th><th>XL</th></tr><tr bgcolor='#45413f'><td></td><td>22/24*<td>25/27*</td><td>28/30*</td><td>31/33*</td><td>34/36</td></tr></table></div>");
  break;  
case 5:
	$("body").append("<div id='tooltip'><table border='0' cellpadding='0' cellspacing='0' id='tooltipTable'><tr bgcolor='#7f7e7c'><th>SIZE</th><th>XS</th><th>S</th><th>M</th><th>L</th><th>XL</th></tr><tr bgcolor='#45413f'><td></td><td>20/21*<td>22/23*</td><td>24/25*</td><td>26/27*</td><td>28/29</td></tr></table></div>");
  break; 
case 6:
	$("body").append("<div id='tooltip'><table border='0' cellpadding='0' cellspacing='0' id='tooltipTable'><tr bgcolor='#7f7e7c'><th>SIZE</th><th>S</th><th>M</th><th>L</th></tr><tr bgcolor='#45413f'><td></td><td>12-2<td>2-7</td><td>7-12</td></tr></table></div>");
  break; 

  
default:
  //code to be executed if n is different from case 1 and 2
}

		

		
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};



// starting the script on page load
$(document).ready(function(){
	tooltip();
});