(function($) {
    $.fn.markedMap = function(options) {
        options = $.extend({
            fadeDuration:   300,
            leftMiddleImg:  null,
            rightMiddleImg: null,
            tooltipHolder:  true,
            tooltipArea:    'body'
        }, options);

        return this.each(function() {
            var objMap = {
                $map:      null,
                mapIndex:  null,
                $markList: null,
                $regionOverlay: null,

                create: function($map) {
                    this.$map = $map;
                    this.mapIndex = $('marked-map').length;
                    this.$map.attr('index', this.mapIndex).addClass('marked-map');
                    if (this.$map.find('> ul').css('position') === 'static') {
                        this.$map.css({position: 'relative'});
                    }
                    this.$regionOverlay = this.$map.find('.region-overlay');
                    this.initMarks();
                },

                initMarks: function() {
                    this.$markList = this.$map.find('> ul li');
                    this.$markList.addClass('mark').wrapInner('<div class="tooltip"></div>').append('<a class="mark-link"></a>');

                    this.$markList.each($.proxy(function(index, el) {
                        var $mark = $(el);

                        $mark.css({
                            position: 'absolute',
                            top:      $mark.attr('y') + 'px',
                            left:     $mark.attr('x') + 'px'
                        }).attr('index', index);
                        $mark.find('div.tooltip').css({display: 'none'});

                        $mark.find('a.mark-link').hover($.proxy(function() {
                            this.showTooltip(index);
                        }, this), $.proxy(function(event) {
                            if (!options.tooltipHolder || !$(event.relatedTarget).closest('div.marked-map-tooltip').length) {
                                this.hideTooltip(index);
                            }
                        }, this));
                    }, this));
                },

                showTooltip: function(index) {
                    var $mark = this.$markList.filter('[index="' + index + '"]').addClass('hover');
                    this.$regionOverlay.css({
                        backgroundImage: 'url(/img/map/regions/' + window.mapRegionList[$mark.attr('regionId')] + '.png)'
                    });
                    $mark.closest('.region').addClass('highlight');
                    var $mmTooltip = $('body div.marked-map-tooltip[index="' + this.mapIndex + '-' + index + '"]');

                    if (!$mmTooltip.length) {
                        var $tooltip = $mark.find('div.tooltip').clone();
                        $mmTooltip = $tooltip.wrap('<div class="marked-map-tooltip"></div>').parent().attr('index', this.mapIndex + '-' + index);
                        $tooltip.append('<div class="bg"><span class="top"></span><span class="middle"></span><span class="bottom"></span></div>');

                        $mmTooltip.css({
                            zIndex:   1000,
                            position: 'absolute',
                            top:      ($mark.offset().top + $mark.outerHeight()) + 'px',
                            left:     $mark.offset().left + 'px',
                            display:  'block'
                        });
                        $tooltip.css({
                            position: 'absolute',
                            bottom:   0,
                            display:  'none'
                        });

                        $('body').append($mmTooltip);

                        var $container = $(options.tooltipArea);
                        if (parseInt($mmTooltip.css('left')) + $tooltip.outerWidth() > $container.offset().left + $container.outerWidth()) {
                            $tooltip.addClass('right');
                            $tooltip.css({right: 0}).find('> div.bg span.middle').append('<img src="/' + options.rightMiddleImg + '"/>');
                        } else {
                            $tooltip.css({left: 0}).find('> div.bg span.middle').append('<img src="/' + options.leftMiddleImg + '"/>');
                        }
                        
                        $tooltip.mouseleave($.proxy(function() {
                            this.hideTooltip(index);
                        }, this));
                    }

                    $mmTooltip.find('.tooltip').stop().fadeTo(options.fadeDuration, 1, function() {
                        if ($.browser.msie && $.browser.version < 9) {
                            this.style.filter = this.style.filter.replace(/alpha\(opacity=[0-9]+\) */, '');
                        }
                    });
                },

                hideTooltip: function(index) {
                    this.$markList.filter('[index="' + index + '"]').removeClass('hover');
                    this.$regionOverlay.css({
                        backgroundImage: 'none'
                    });
                    var $mmTooltip = $('body div.marked-map-tooltip[index="' + this.mapIndex + '-' + index + '"]');
                    
                    $mmTooltip.find('.tooltip').stop().fadeTo(options.fadeDuration, 0, function() {
                        $mmTooltip.remove();
                    });
                }
            };

            objMap.create($(this));
        });
    };
})(jQuery);