(function($){

    var imageUrl = '';

    var popup = '';

    var popupWidth = 0;

    var offset = 0;

    var popupBorder = 0;

    var popupPadding = 0;

    var popupIsVisible = [];



    $.fn.jTipster = function(options){

        settings = $.extend({

            marker: '.marker',

            popup: '.popup',

            width: 660,

            offset: 0,

            baseimageurl: 'numbers'

        }, options || {});

        imageUrl = settings.baseimageurl;

        popup = settings.popup.toString().substring(1, settings.popup.toString().length);

        offset = settings.offset;

        popupWidth = 660;

        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'));

            popupIsVisible[$(this).attr('alt')] = false;

            $(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);

        $('.ttcontent', elem).click(function(event){

            var mat = $(this);

            var id =  $(event.target).attr('id');

            

            if(popupIsVisible[id] == false && $(event.target).attr('nodeName').toLowerCase() == 'img' && $(event.target).parent('div').hasClass(markerClass)){

                var image = $(event.target);

                var target = $(event.target).parent('div');

                

                $(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-260, marker, elem);

                $(tip).css('left', x);

                $(tip).css('top', y + 40);

                $(tip).fadeIn('fast');

                popupIsVisible[id] = true;

                return false;

            }





            if(popupIsVisible[id] == true && $(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');

                popupIsVisible[id] = false;

                return false;

            }

        });

    };



    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 ;

            if (x<0) {

                x=0;

            }

        }

        else{

            x = x + (markerWidth/2);

        }

        

        return x;

    }

})(jQuery);