// JavaScript Document

$(document).ready(function(){
						//do stuff to certain pages so get filename and case each one we want to
					var href = jQuery(location).attr('href');
					var fileName = getFilename(href);

//testing pls removee this


switch(fileName)
 {
	 
	 case "index":
	navSetUp();
	$('#channels').fadeTo(1000, 1);
	$('.transp').fadeTo(4000, .3);
	
    break;
	 
	case "products_site":
	navSetUp();
	$('.transp').fadeTo(4000, .3);
	
	$('img[class^="subShot"]').click(function(){
								  var $tt = $(this).attr('src');
								 // alert ($tt);
								  $('#mainShotHolder')
								  .fadeTo(100, 0, function() 
																{ 
    															$(this).css('background-image', 'url(' + $tt + ')')
																.fadeTo(300,1); 
																})
								  });
	
	$('.groovybutton').hover(function() {
										 $(this).stop().fadeTo(200, 1, 'easeInExpo')
										 .animate({
												  width: '115%',
												  fontSize: '12px'
												  });
										 },
								function(){
										$(this).fadeTo(200, .8, 'linear')
										.animate({
												  width: '100%',
												  fontSize: '10px'
												  });
									});
   break;
case "products_shopping":
	navSetUp();
	$('.transp').fadeTo(4000, .3);
	
	$('img[class^="subShot"]').click(function(){
								  var $tt = $(this).attr('src');
								 // alert ($tt);
								  $('#mainShotHolder')
								  .fadeTo(100, 0, function() 
																{ 
    															$(this).css('background-image', 'url(' + $tt + ')')
																.fadeTo(300,0); 
																})
								  });
	
	
	$('.groovybutton').hover(function() {
										 $(this).stop().fadeTo(200, 1, 'easeInExpo')
										 .animate({
												  width: '115%',
												  fontSize: '12px'
												  });
										 },
								function(){
										$(this).fadeTo(200, .8, 'linear')
										.animate({
												  width: '100%',
												  fontSize: '10px'
												  });
									});
   break;


 case "haircare":
  navSetUp();
  $('.transp').fadeTo(4000, 0);
  
  $(".gSection").hover(function() {
	
	$(this).stop().animate({			
			marginLeft: '-5px', 
			top: '0', 
			left: '-5'
		}, 400, 'easeInOutExpo');
	$(this).children().children('.dibbs').animate({		
			width: '80px', 
			height: '13px'
		}, 400, 'easeInOutExpo');
	
	} , function() {
	$(this).stop().animate({			
			marginLeft: '0',
			top: '0', 
			left: '0'
		}, 400, 'easeInOutExpo');
	$(this).children().children('.dibbs').animate({			
			width: '60px', 
			height: '10px'
		}, 400, 'easeInOutExpo');
});


$('.tipInner').hover(function() {
							  		$thisHeight = 50; //$(this).height();
									$(this).css("height","100%");
									$thisHeight = $(this).height();
									$(this).css("height","2.2em");
									$thisHeight = $thisHeight + 'px';
									
										 $(this).stop()
										 .animate({
												  height: $thisHeight
												  });
										 },
								function(){
										$(this).stop()
										.animate({
												  height: '2.2em'
												  });
									});  
   break;
   
 case "funhouse":
  navSetUp();
  imageFolMouse();
  setFunSocials();
  $('.transp').fadeTo(4000, .20);
  $("div[id='trigger1']").css('background-image', 'url(images/products/bgTransPinkOrig.png)');
  $("div[id='trigger2']").css('background-image', 'url(images/products/bgTransPinkCS.png)');
  $("div[id='trigger3']").css('background-image', 'url(images/products/bgTransPinkFP.png)');
  $("div[class='prodItems']").css('background-image', 'url(images/products/bgTransPink.png)');
  $("div[class='textDetailNav'],div[class='hairAdviceTrig']").css('background-image', 'url(images/products/bgTransPink.png)');
  
  //,div[class='textDetailNav'],div[class='prodItems'],div[class]='hairAdviceTrig'

			$("div[class='hairAdviceTrig'],	div [class='productsTrig']").hover(
					  function(){
							   $(this).addClass('itemHovered');
							    },
					function() {
								$(this).removeClass('itemHovered');
								});
			$('.navBox').hover(
					  function(){
							   $(this).addClass('navBoxHoveredClub');
							    },
					function() {
								$(this).removeClass('navBoxHoveredClub');
								});
   break;

 case "matty":
  navSetUp();
  imageFolMouse();
  setFunSocials();
  $('.transp').fadeTo(4000, .20);
  document.onmousemove=mouse; //sparkles
    $("div[class='productsTrig'],div[class='textDetailNav'],div[class='prodItems'],div[class]='hairAdviceTrig'").css("background-image", "url(images/products/bgTransOj.png)");
			
			$("div[class='hairAdviceTrig'],div [class='productsTrig']").hover(
					  function(){
							   $(this).addClass('itemHovered');
							    },
					function() {
								$(this).removeClass('itemHovered');
								});
			$('.navBox').hover(
					  function(){
							   $(this).addClass('navBoxHoveredClub');
							    },
					function() {
								$(this).removeClass('navBoxHoveredClub');
								});
   break;
   
 case "ukSalons":
  navSetUp();
    $('.transp').fadeTo(4000, .1);							
   break;
 
 case "global":
 navSetUp();
    $('.transp').fadeTo(1000, .1);
break;

case "mens":
 navSetUp();
 
 			$('a[id="tipTitle1"]').css("color","#ccc");
			$('#mensTip1').show();
    $('a[id^="tipT"]').click(function(){
								 $('a[id^="tipT"]').css("color","red");
								 $('#mensBotText').css("background-color","#999");
									  
									  			
													$('.mensTips').hide();							
												//alert($(this).attr('id').substr(-1));
												  
								  var $thisTipId = $(this).attr('id');								  
								  var $last = $thisTipId.substr($thisTipId.length - 1); 
								  var $tipId = '#mensTip' + $last;
								  
								  $($tipId).show();
								  $(this).css("color","#ccc");
								  });		
	
break;
case "contactUs":

$.fn.copyTo = function(to) {
    var to = $(to);
    for ( var i = 1; i < arguments.length; i++ )
        to.set( arguments[i], this.get(0)[ arguments[i] ] );
    return this;
};

new function() {
       // $.fn.validate = validate() {};
    $.fn.validate = {
        init: function(o) {
          if(o.name == 'username') { this.username(o) };
          if(o.name == 'password') { this.password(o) };
          if(o.name == 'email') { this.email(o) };
          if(o.name == 'dob') { this.dob(o) };
        },
        username: function(o) {
          var user = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
           if (!o.value.match(user)) {
             doValidate(o);
            } else {
             doError(o,'no special characters allowed');
            };
        },
        password: function(o) {
          var pass = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
           if (!o.value.match(pass)) {
             doValidate(o);
            } else {
             doError(o,'no special characters allowed');
            };
        },
        email: function(o) {
          var email  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
           if (o.value.match(email)) {
              doSuccess(o);
            } else {
              doError(o,'not a valid email');
            };
        },
        dob: function(o) {
          var dob  = /(0[1-9]|1[012])+\/(0[1-9]|[12][0-9]|3[01])+\/(19|20)\d\d/;
            if (o.value.match(dob)) {
              doSuccess(o);
            } else {
              doError(o,'not a valid date');
            };
        }
     };

     function doSuccess(o) {
              $('#' + o.id + '_img').html('<img src="images/accept.gif" border="0" style="float:left;" />');
              $('#' + o.id + '_li').removeClass("error");
              $('#' + o.id + '_msg').html("");
              $('#' + o.id + '_li').addClass("success");
     }

     function doError(o,m) {
              $('#' + o.id + '_img').html('<img src="images/exclamation.gif" border="0" style="float:left;" />');
              $('#' + o.id + '_li').addClass("error");
              $('#' + o.id + '_msg').html(m);
              $('#' + o.id + '_li').removeClass("success");
     }
     //private helper, validates each type after check
     function doValidate(o) {
        	$('#' + o.id + '_img').html('<img src="images/loading.gif" border="0" style="float:left;" />');
        	$.post('ajax.php', { id: o.id, value: o.value }, function(json) {
                  	eval("var args = " + json);
                        if (args.success == true)
                  	{
                  	  doSuccess(args);
                  	}
                  	else
                  	{
                          doError(args,args.msg);
                  	}
                  });
    };

};
$.fn.match = function(m) {
	$('#' + this.get(0).id + '_img').html('<img src="images/loading.gif" border="0" style="float:left;" />');
	if ($(this).get(0).val() == $(m.match).val()) {
          $('#' + this.get(0).id + '_img').html('<img src="images/accept.gif" border="0" style="float:left;" />');
          $(m.error).removeClass("error");
          $(m.error).addClass("success");
          $('#' + this.get(0).id + '_msg').html("");
        } else {
          $('#' + this.get(0).id + '_img').html('<img src="images/exclamation.gif" border="0" style="float:left;" />');
          $(m.error).addClass("error");
          $(m.error).removeClass("success");
          $('#' + this.get(0).id + '_msg').html("The passwords don't match, please try again");
        };
};
break;
 default:
 		$('.transp').fadeTo(100, 0.2);
	navSetUp();
	
							//alert ('default');
   //code to be executed if n is different from case 1 and 2
 }					
		<!--$('#channels').fadeTo(4000, .8); -->

/////NAV////////////////////////
//PRODUCTS//////////////////////
function navSetUp() {
	
$('#productsNav').hide();
$('#hairAdviceNav').hide();

//
$('#productsNav').mouseenter(function(){
  								window.clearTimeout(timeoutMenuUp);
							});
$('#hairAdviceNav').mouseenter(function(){
  								window.clearTimeout(timeoutMenuUp);
							});

$('#productsNav').mouseleave(function(){					  
  								timeoutMenuUp = window.setTimeout(slowAlert, 2500);								
								});
$('#hairAdviceNav').mouseleave(function(){					  
  								timeoutMenuUp = window.setTimeout(slowAlert, 2500);								
								});

function slowAlert()
{
  		$('#productsNav').slideUp();
		$('#hairAdviceNav').slideUp();
}
$('a[id$="Link"]').mouseover(function(){
									  //
									  var $thisMenu = this.id.slice(0, -4); //get name of menu item
									 // alert ($thisMenu);
									 var $thisMenuObject = 'div[id^="'+$thisMenu+'"]';
									  //alert ($thisMenu + 'XXXX' + $thisMenuObject);
								$('div[id$="Nav"]').hide();	  //hide all menus
								$($thisMenuObject).slideDown();	//slide down the hovered one
								  });

$('.navBox').click(function(){
								  $('.productTrig').removeClass('active').slideUp();
								  $('.acc_container').slideUp();
								  $('.hairAdviceTrig').removeClass('active').slideUp();
								  $('.acc_container2').slideUp();
								  $('#productsNav').slideUp();
								  $('#hairAdviceNav').slideUp();
								  $('#productsLink').click(function(){
								  $('.productsTrig').slideDown();
								  });
								  $('#hairAdviceLink').click(function(){
								  $('.hairAdviceTrig').slideDown();
								  });
								  });
$('.navBox').hover(
					  function(){
							   $(this).addClass('navBoxHovered');
							    },
					function() {
								$(this).removeClass('navBoxHovered');
								});


$('.prodItems').hover(
					  function(){
							   $(this).addClass('itemHovered');
							    },
					function() {
								$(this).removeClass('itemHovered');
								});


				//get bg images stored
		$trig1BgImg = $('#trigger1').css('background-image');
		$trig2BgImg = $('#trigger2').css('background-image');
		$trig3BgImg = $('#trigger3').css('background-image');
		
		//Set default open/close settings
$('.acc_container').hide(); $('.acc_container2').hide(); //Hide/close all containers
//On Click     $('img[class^="subShot"]')
$('div[id^="trigger"]').click(function(){
	if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
		$('.productsTrig').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
		
		
		//alert($trig1BgImg);
		//$(this).css("background-image","none")
		//$('div.acc_trigger:first').
		$(this).toggleClass('active').next().slideDown('fast'); //Add "active" state to clicked trigger and slide down the immediate next container
	}
	return false; //Prevent the browser jump to the link anchor
});

}

$("div#fm-submit","").append('<img src="images/story/formSubmitArrow.png" style = "position:relative; top:3px;">'); //add arrow to submit button contact page
$("span#salonSearch").append('<img src="images/story/formSubmitArrow.png" style = "position:relative; top:3px;">');

});


function setFunSocials() {$('.socialIcons').each(function(index) {
								var socialSrc = $(this).attr('src');
    							var strSocial = socialSrc.substring(socialSrc.lastIndexOf('/') + 1);
								$(this).attr('src', "images/clubhouse/specific/" + strSocial);
								$('#twitterIcon').attr("src","images/clubhouse/specific/Twitter.png");
								$('#facebookLink').attr("href", "http://www.facebook.com/pages/Magic-Flowerpot-by-Tangle-Teezer/186599494709406");
								$('#twitterLink').attr("href", "http://twitter.com/magicflowerpot");
																	});}
//$('a.example').cluetip({width: 200});

///////////SCROLLER ON PRODUCTS PAGE//////////////
//Get our elements for faster access and set overlay width
   $(function(){
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
                 ul = $('ul.sc_menu'),
                 // unordered list's left margin
                 ulPadding = 15;
	 var div2 = $('div.sc_menu2'),
                 ul = $('ul.sc_menu'),
                 // unordered list's left margin
                 ulPadding = 15;
	

    //Get menu width
    var divWidth = div.width();
	

    //Remove scrollbars
    div.css({overflow: 'hidden'});
	div2.css({overflow: 'hidden'});
	

    //Find last image container
    var lastLi = ul.find('li:last-child');

    //When user move mouse over menu
    div.mousemove(function(e){

      //As images are loaded ul width increases,
      //so we recalculate it each time
      var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

      var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
      div.scrollLeft(left);
    });
	
	

//image enlarge on hair care page thumbnails

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '3px',
			marginLeft: '2px',
			top: '-5', 
			left: '-5', 
			width: '55px', 
			height: '38px'
		}, 180)
	
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0px',
			marginLeft: '0px',
			top: '0', 
			left: '0', 
			width: '50px', 
			height: '34px'
		}, 180);
});

//////////VERTICAL SCROLLER ON STORY PAGE

function makeScrollable(wrapper, scrollable){
  // Get jQuery elements
  var wrapper = $(wrapper), scrollable = $(scrollable);

  // Hide images until they are not loaded
  scrollable.hide();
  var loading = $("<div class='loading'></div>").appendTo(wrapper);

  // Set function that will check if all images are loaded
  var interval = setInterval(function(){
    var images = scrollable.find("img");
    var completed = 0;

    // Counts number of images that are succesfully loaded
    images.each(function(){
      if (this.complete) completed++;   
    });

    if (completed == images.length){
      clearInterval(interval);
      // Timeout added to fix problem with Chrome
      setTimeout(function(){

        loading.hide();
        // Remove scrollbars    
        wrapper.css({overflow: "hidden"});

        scrollable.slideDown("slow", function(){
          enable(); 
        });                 
      }, 1000); 
    }
  }, 100);

  // height of area at the top at bottom, that don't respond to mousemove
  var inactiveMargin = 100;         
  // Cache for performance
  var wrapperWidth = wrapper.width();
  var wrapperHeight = wrapper.height();
  // Using outer height to include padding too
  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
  // Do not cache wrapperOffset, because it can change when user resizes window
  // We could use onresize event, but it&#39;s just not worth doing that 
  // var wrapperOffset = wrapper.offset();

  //When user move mouse over menu          
  wrapper.mousemove(function(e){
    var wrapperOffset = wrapper.offset();
    // Scroll menu
    var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;

    if (top < 0){
      top = 0;
    }

    wrapper.scrollTop(top);
  });       
}

////CONTACT DETAILS EXPANDER

$('span[class="contactDetails"]').mouseenter(function(){
									 $(this).stop().animate({
			fontSize: '34',
			marginBottom: '0',
			marginTop:'-10'
		}, 400);
									$(this).prevAll('span.contHeading:first').addClass('greyFont');

								  });
$('span[class="contactDetails"]').mouseleave(function(){
									 $(this).stop().animate({
			fontSize: '11',			
			marginBottom: '5',
			marginTop:'0'
		}, 200);
									 $(this).prevAll('span.contHeading:first').removeClass("greyFont");
								  });

$('a.pressYears.garamond').mouseenter(function(){
									 $(this).stop().animate({
			fontSize: '70'
		}, 400);
									//$(this).prevAll('span.contHeading:first').addClass('greyFont');

								  });
$('a.pressYears.garamond').mouseleave(function(){
									 $(this).stop().animate({
			fontSize: '40'
		}, 100);
									// $(this).prevAll('span.contHeading:first').removeClass("greyFont");
								  });


$("#searchForm").submit(function(event) {    /* stop form from submitting normally */    
								 event.preventDefault();             /* get some values from elements on the page: */    
								 $('#searchBox').animate({
														 "width": "550px"
														 }  , 500 , 'swing');
								 var $form = $( this ),        
								 term = $form.find( 'input[name="serj"]' ).val(),        
								 url = $form.attr( 'action' );    /* Send the data using post and put the results in a div */    
								 $.post( url, { s: term },     
										function( data ) {          
										var content = $( data );          
										$( "#result" ).empty().append( content );      }    );  });
$('#closeButUkSalons').click(function(){
									  $('#searchBox').animate({
														 "width": "250px" 
														 } , 500 , 'swing');
									  $( "#result" ).empty();
									  });

//for global distrib page
$('.growImage').mouseover(function(){           
								   $(this).stop().animate({"width": "48px","height":"25px", "top":"0px"}, 500,'swing')
								   .prev('div').animate({"font-size":"12px","top":"5px"}, 500,'swing');				   
								   }).mouseout(function(){       
								   $(this).stop().animate({"width": "33px","height":"25px","top":"0px"}, 250,'swing') 
								   .prev('div').animate({"font-size":"8px","top":"7px"}, 250,'swing');
								   });


	$("#distributor").hide();
	var ajax_load = "<img src='images/global/ajax-loader.gif' alt='loading...' />"; 
	$(".growImage").click(function(){				   
								   
	var n_amed = this.id;
	//alert (n_amed);
    $("#distributor").hide()
		.html(ajax_load)  
		.load('php/feeds.php', {'language': n_amed},function(){
															 $(this)
															 .append('<div id = "closeDist"><a>x&nbsp;close</a></div>')
															 }).fadeIn('slow');
		
	   		 			$("#closeDist").live("click", function() {
    //code to full description
    
        $('#closeDist').remove();
		$("#distributor").fadeOut('slow');
 //   });
});
  
});

var $bitMid = $('#bitInMid');
var $notqEnd = $('#notQuiteEnd');
var $dragons = $('#dragHolder');
var $fadeThese = 'div[id=\'storyText4\'],div[id=\'storyText2\']';

	$dragons.hide();
	$bitMid.hide();
	$notqEnd.hide();

$('#moreStory1').click(function(){
							   $($fadeThese)
								 .fadeOut('fast',function(){$($bitMid).fadeIn('fast');});
							   							   });
$('#moreStory2').click(function(){
							   $($fadeThese)
								 .fadeOut('fast',function(){$($notqEnd).fadeIn('fast');});
							   							   });
$('#moreStory3').click(function(){
							   $($fadeThese)
								 .fadeOut('fast',function(){$($dragons).fadeIn('fast');});
							   							   });


$('.begStory').click(function(){
							   $(this).parent()			 
								 .fadeOut('fast',function(){$($fadeThese).fadeIn('fast');});						 							   							   });
$('.midStory').click(function(){
							   $(this).parent()			 
								 .fadeOut('fast',function(){$($bitMid).fadeIn('fast');});						 							   							   });
$('.endStory').click(function(){
							   $(this).parent()			 
								 .fadeOut('fast',function(){$($notqEnd).fadeIn('fast');});					 							   							   });
$('.dragStory').click(function(){
							   $(this).parent()			 
								 .fadeOut('fast',function(){$($dragons).fadeIn('fast');});
								 
								 });
$('.checkoutbutton').hover(function(){
									$(this).attr("src","images/checkouthov.png");
									},
							function(){
									$(this).attr("src","images/checkout.png");
									}	
									);
////////homepage channels fnctionality
/*  DISABLED DISABLED DISABLED
	$('#note1').click(function(){
								  $('#postItLrg').slideDown(250, 'easeOutExpo', function() {
															$('#postItText1').slideDown('slow', 'easeOutExpo');
 																			});
							  });
	$('#img4').click(function(){
								  $('#postItText1').slideUp('fast', function() {
															$('#postItLrg').slideUp('150', 'easeInExpo');
   														 // Animation complete.
 																			});				
							  });
*/
	
	//video
	$('#img3').click(function(){
							  $('#TTvideoObject').hide();
							  $("#channels, .videoFade").fadeTo(500,0.3,function(){
																	$('#img5').slideDown('slow');
																	$('#TTvideoObject').show();
																				});
						 		});

	$('#closeVideo').click(function(){									
								var videoHtml = $('#img5').html();
								$('#img5').slideUp('slow',function() {
											$("#channels, .videoFade").fadeTo(500,1);
																	});
								document.TTvideo1.Stop();
						 });
	//add sizable window open to click function on id (initially for pdf open in index.php)
	
							$("div#note1").click(function (event){
									var url = $(this).attr("href");
									var windowName = "popUp"; //$(this).attr("name");
									window.open(url, windowName, "menubar=1,resizable=1,width=800,height=800");
									event.preventDefault();
									});

///contact form scrolling
$("#parent1").css("display","none");
$("#parent2").css("display","none");
$(".department").click(function(){
							   if ($('input[name=department]:checked').val() == "salon" )
								{$("#parent1").slideDown("fast");}
									 else 
								{$("#parent1").slideUp("fast");}
								
								if ($('input[name=department]:checked').val() == "weborder" )
								{$("#parent2").slideDown("fast");}
									 else 
								{$("#parent2").slideUp("fast");}
							   });


});     //END JQUERY

function string_contains(haystack, needle){ if(haystack.indexOf(needle) == -1){
  return false;
}else{
  return true;
}
 }
function imageFolMouse ()
{
	$("#outer").ImageFollowMouse({ src: 'images/clubhouse/matty.png' });
							$(".selectedImage").ImageFollowMouse({ src: 'images/clubhouse/matty.png', 		width: '48', height: '60', topY: 10, leftX: 10 });
							
}


function getFilename(str) {
return str.substring(str.lastIndexOf('/') + 1, str.lastIndexOf('.'))
}


function checkformContact()
{
	var x=document.getElementById('fm-Email').value;
 	var atpos=x.indexOf("@");
 	var dotpos=x.lastIndexOf(".");
	
	
	
	if ( document.getElementById('fm-Name').value.length == 0)
	{
		alert('Bitte geben Sie Ihren Namen');
		return false;
	}
	
	if ( x.length == 0  || atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)  
	{
		alert('Bitte geben Sie Ihre E-Mail-Adresse');
		return false;
	}	
	
	return true;
}

/**
* ImageFollowMouse plugin for jQuery
* v1.0
* Image Follow Mouse move
*
* By Xing Wang, http://AskBargains.com
*
* Please use as you wish at your own risk.
*/

/**
* Usage:
*
* From JavaScript, use:
*     $(<select>).ImageFollowMouse({src: <S>, width: <W>, height: <H>, topY:<Y> ,leftX :<X> ,backgroundColor :<C>, Padding:<P>});
*     where:
*       <select> is the DOM node selector, e.g. "p"
*	<S> is the src of Image 
*       <W> is the Width of Image (optional)
*       <H> is the Height of Image (optional)
*       <Y> is the Image close to the mouse poing of y lever (optional)
*       <X> is the Image close to the mouse poing of x lever (optional)
*       <C> is the background color of Image (optional)
*       <P> is the Image Padding(optional)
* 
*Example :
*     
*     <img src="images/happy.jpg" id="selectedImage"  width="88px" style="border:2px solid #ccc; background-color:#fff; padding:2px" />
*    
*     ///////////////////////////////////////////////////////
*
*     <script type="text/javascript">
*     $(document).ready(function() {
*     $("#selectedImage").ImageFollowMouse({ 
*            src: 'images/happy.jpg',
*            Padding:'28px'
*         });  
*     }); 
*     </script>
*
*    
*/

(function($) {

    $.fn.ImageFollowMouse = function(params) {

        params = $.extend({ src: null, width: null, height: null, topY: null, leftX: null, backgroundColor: null, Padding: null }, params);

        this.each(function() {

            var imgWidth;
            var imgHeight;
            var $t = $(this);
            var X = 5;
            var Y = 5;
            var bColor = 'none';
            var iPadding = '1px';

            $("<img id='ThisISImageFollowMouseImageClassID' />").attr({ src: params.src }).prependTo('body');
            $("#ThisISImageFollowMouseImageClassID")
            .addClass("ThisISImageFollowMouseImageClass")
            .css('position', 'absolute')
            .css('visibility', 'hidden')
            ;
            if (params.width != null) {
                imgWidth = params.width;
                $("#ThisISImageFollowMouseImageClassID").css('width', imgWidth);
            }
            if (params.height != null) {
                imgHeight = params.height;
                $("#ThisISImageFollowMouseImageClassID").css('height', imgHeight);
            }


            if (params.topY != null) X = params.topY;
            if (params.leftX != null) Y = params.leftX;
            if (params.backgroundColor != null) bColor = params.backgroundColor;
            if (params.Padding != null) iPadding = params.Padding;

            $t.mousemove(function(e) {
                $(".ThisISImageFollowMouseImageClass")
                .css('top', e.clientY + X)
                .css('left', e.clientX + Y)
                .css('visibility', 'visible')
                .css('border', '0px solid #bbb')
                .css('padding', iPadding)
                .css('backgroundColor', 'none')
				.css('zIndex',50)
                ;
            });

            $t.mouseout(function(e) {
                $(".ThisISImageFollowMouseImageClass")
                .css('visibility', 'hidden');
            });
        });

        return this;
    };
})(jQuery);