/**
* 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({ name:null,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 = 20;
            var Y = 20;
            var bColor = 'fff';
            var iPadding = '8px';
            $("<img id='ThisISImageFollowMouseImageClassID"+params.name+"' />").attr({ src: params.src }).prependTo('body');
            $("#ThisISImageFollowMouseImageClassID"+params.name+"")
            .addClass("ThisISImageFollowMouseImageClass"+params.name+"")
			.addClass("ThisISImageFollow")
            .css('position', 'absolute')
            .css('visibility', 'hidden')
			.css('z-index','100')
            ;
            if (params.width != null) {
                imgWidth = params.width;
                $("#ThisISImageFollowMouseImageClassID"+params.name+"").css('width', imgWidth);
            }
            if (params.height != null) {
                imgHeight = params.height;
                $("#ThisISImageFollowMouseImageClassID"+params.name+"").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"+params.name+"")
                .css('top', e.clientY + X)
                .css('left', e.clientX + Y)
                .css('visibility', 'visible')
                .css('border', 'none')
                .css('padding', iPadding)
                .css('backgroudColor', '#fff')
                ;
            });

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

        return this;
    };
})(jQuery);