(function($){
    var imageUrl = '';
    var popup = '';
    var popupWidth = 0;
    var offset = 0;
    var popupBorder = 0;
    var popupPadding = 0;
    var lastCenter = '';
    
    $.fn.jTipster = function(options){
        settings = $.extend({
            marker: '.marker',
            popup: '.popup',
            width: 300,
            offset: 0,
            baseimageurl: 'numbers'
        }, options || {});
        imageUrl = settings.baseimageurl;
        popup = settings.popup.toString().substring(1, settings.popup.toString().length);
        offset = settings.offset;
        popupWidth = settings.width;
        setup(this, settings.marker);
        hover(this,  settings.marker, settings.popup);
    };

    function setup(elem, marker){
        $('li', elem).each(function(){
            $(marker, this).each(function(){
                var coordinates = $(this).attr('title');
                $(this).removeAttr('title');
                var x = parseInt(coordinates.split(',')[0]);
                var y = parseInt(coordinates.split(',')[1]);
                $(this).css('top', y);
                $(this).css('left', x);
            });
        });
        $('img', elem).each(function(){
            $(this).attr('id', $(this).attr('alt'));
            $(this).removeAttr('alt');
        });
    };

    function hover(elem, marker, popup){
        var src = '';
        var markerClass = marker.toString().substring(1, marker.toString().length);
        var popupClass = popup.toString().substring(1, popup.toString().length);
        $('.content', elem).mouseover(function(event){
            var mat = $(this);
            if($(event.target).attr('nodeName').toLowerCase() == 'img' && $(event.target).parent('div').hasClass(markerClass)){
                $(popup).fadeOut('fast', function(){                
                    $(this).remove();
                })                

                var image = $(event.target);                     
                var target = $(event.target).parent('div');
                var id = (image).attr('id');
                $(image).attr('src', imageUrl + '/on/' + id + '.png');
                var tip = $('<div></div>').attr('class', popupClass);
                $(tip).css('width', popupWidth);
                var x = parseInt($(target).css('left'));
                var y = parseInt($(target).css('top'));             
                var span = $('span', target).html();
                $(tip).html(span);
                $(mat).append(tip);
                popupBorder = parseInt($(tip).css('border-left-width'));
                popupPadding = parseInt($(tip).css('padding-left'));
                x = setMarkerPosition(x, marker, elem);
                /*$(tip).css('left', x);
                $(tip).css('top', y + 40);*/
                $(tip).css('left', 10);
                $(tip).css('top', 270);                
                $(tip).fadeIn('fast');
            }
        });

        
        $('li', elem).mouseout(function(event){
          if($(event.target).attr('nodeName').toLowerCase() == 'img' && $(event.target).parent('div').hasClass(markerClass)){
          /*      $(popup).fadeOut('fast', function(){                
                    $(this).remove();
                })*/
                var image = $(event.target);
                var id = $(image).attr('id');
                $(image).attr('src', imageUrl + '/' + id + '.png');
          }
        });
    };

    function setMarkerPosition(x, marker, elem){
        var bodyWidth = $('body').innerWidth();
        var left = $(elem).offset().left;
        var markerWidth = $(marker).width();
        if((x + popupWidth + (2 * popupPadding) + (2 * popupBorder) + left + offset + markerWidth) > bodyWidth){
            x = x - popupWidth - (2 * popupBorder);
        }
        else{
            x = x + (markerWidth/2);
        }
        
        return x;
    }
})(jQuery);