jQuery(document).ready(function ($) {

    function stop(e) {
        if (!e) e = window.event;
        (e.stopPropagation) ? e.stopPropagation() : e.cancelBubble = true;
        (e.preventDefault) ? e.preventDefault() : e.returnValue = false;
        return false;
    }

    /***************************/

    function connectMap() {
        var visualStates = jQuery(".states img")
        var touchStates = jQuery(".states area")

        jQuery(".states area").bind("mouseenter", function () {
            var statenum = touchStates.index(this);
            var stateName = jQuery(this).attr("title");
            jQuery(visualStates[statenum]).stop().show();
            jQuery(".label", "#map").html("Provincie " + stateName)
            jQuery("#mapData ol").stop().animate({ marginLeft: -((statenum+1) * 45) }, 600)
            jQuery(".label").show();
        });

        jQuery(".states area").bind("click", function (e) {
            jQuery(this).blur();
        });
        
        jQuery(".states area").bind("mouseleave", function () {
            var statenum = touchStates.index(this);
            jQuery(visualStates[statenum]).stop().hide();
            jQuery(".label").hide();
            jQuery("#mapData ol").stop().animate({ marginLeft: 0 }, 450)
        });

        jQuery(".states area").bind("click", function (e) {
            stop(e);

            var prov = jQuery(this).attr("rel");
            $.fancybox({
                'width': '96%',
                'height': '96%',
                'autoScale': false,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'hideOnContentClick': true,
                'type': 'iframe',
                'href': '/_Layouts/SVn.Components.Map/Map.aspx?provincecode=' + prov
            });
        })

        /****************************/


        jQuery("#map").append('<p id="legendaText">Aantal deelnemende gemeenten en samenwerkende partners</p>')
        jQuery("#map").append('<ul id="legenda"></ul>')
        jQuery("#mapData ol").each(function () {
            var rowTitle = jQuery(this).attr("title");
            var rowColor = jQuery(this).attr("rel");
            jQuery(this).css({ "color": rowColor });
            jQuery("#legenda").append("<li style='background-color:" + rowColor + "' class='" + rowTitle + "'>" + rowTitle + "</li>")
        });
        Cufon.replace('#mapData li');
        Cufon.replace('#legenda');
        Cufon.replace('#legendaText');
        Cufon.replace('#map h2');
        Cufon.now();
    }

    connectMap();

});