var activeImageOverlay;

$j(document).ready(function(){
	$j('.imagemapper_map').maphilight({
        fill: true,
        fillColor: '000000',
        fillOpacity: 0.2,
        stroke: false,
        strokeColor: 'ff0000',
        strokeOpacity: 1,
        strokeWidth: 1,
        fade: true,
        alwaysOn: false,
        filterFilled: true
    });
        
    $j("map > area").each(function(){
        var self = this;
        $j(self).attr('title','');
        $j(self).attr('alt','');
        var tooltipcntid = '#tooltip_' + $j(self).attr('id');
        $j(self).qtip({
            content: {
                prerender: true,
                text: $j(tooltipcntid).html()
            },
            show: 'mouseenter',
            hide: 'mouseleave',
            position: {
                target: 'mouse',
                adjust: { 
                    x: 15,
                    y: 15 
                }
            },
            show: { 
                effect: { 
                    length: 50 
                }, 
                delay : 0 
            },
            hide: { 
                effect: { 
                    length: 50 
                }, 
                delay : 0 
            },
            style: {               
                'padding': '5px',
                'background-color': '#eaeeec',                 
                border: {
                    width: 1,
                    radius: 3,
                    color: '#FFFFFF'
                }
            }
        });
    });
    
    $j(".imagemap .imagepoint").each(function(){
        var self = this;
        var self_title = $j(self).attr('alt');
        $j(self).attr('title','');
        $j(self).attr('alt','');
        var tooltipcntid = '#tooltip_' + $j(self).attr('id');
        $j(tooltipcntid + " a").attr("target", "_blank");
        $j(self).qtip({
            content: {
                prerender: true,
                title: self_title,
                text: $j(tooltipcntid).html()
            },
            show: 'mouseover',
            hide: { 
                fixed: true, 
                delay: 250,
                effect: { 
                    length: 100 
                } 
            },
            show: { 
                effect: { 
                    length: 50 
                }, 
                delay : 0                
            },
            style: {
                'padding': '5px',
                'background-color': '#eaeeec', 
                tip:{
                    corner:'topLeft',
                    size:{ x: 15, y: 15 }
                },                 
                border: {
                    width: 1,
                    radius: 3,
                    color: '#59b1d9'
                },
                title: { 
                    'color':'#59b1d9',
                    'padding': '2px 5px 2px 5px',
                    'background-color': '#eaeeec',
                    'border-bottom':'solid 1px #59b1d9' 
                }
            }
        });
    }).mouseenter(function(){
        if(!(jQuery.browser.msie && jQuery.browser.version == 6))
        {
            activeImageOverlay.show();
        }
    });
    
    if(!(jQuery.browser.msie && jQuery.browser.version == 6))
    {
        $j("map > area.overlay").mouseenter(function(){
            $j("img[id*='overlay_']").hide();
            var areaelem = $j('#overlay_' + $j(this).attr("id"));
            $j('#overlay_' + $j(this).attr("id")).show();        
        }).mouseleave(function(){
            var areaelem = $j('#overlay_' + $j(this).attr("id"));
            activeImageOverlay = $j('#overlay_' + $j(this).attr("id")).hide();
        });
    }
});