$(window).load(function() {

    var mainLoaded = false;

    var preloaded = {};

    preloaded[0] = new Image();
    preloaded[0].src = 'Content/i/masterplan/masterplan.jpg';

    preloaded[1] = new Image();
    preloaded[1].src = 'Content/i/masterplan/private-estate-homes.jpg';

    preloaded[2] = new Image();
    preloaded[2].src = 'Content/i/masterplan/private-cove-homes.jpg';

    preloaded[3] = new Image();
    preloaded[3].src = 'Content/i/masterplan/mansions.jpg';

    preloaded[4] = new Image();
    preloaded[4].src = 'Content/i/masterplan/villas.jpg';

    preloaded[5] = new Image();
    preloaded[5].src = 'Content/i/masterplan/retail-center.jpg';

    preloaded[6] = new Image();
    preloaded[6].src = 'Content/i/masterplan/marina.jpg';

    preloaded[7] = new Image();
    preloaded[7].src = 'Content/i/blank.gif';

    $('a.zoomable').mouseover(function() {
        // here you could play with stuff on the map
    
        //$('img#' + this.id).css({
        //    border: '.1em solid black'
        //});

        //$('img#' + this.id).fadeTo('fast', .075);

        $(this).fadeTo(500, 0.50, function() {
            $(this).fadeTo(500, 1);
        });
    }).mouseout(function() {
        $(this).stop().fadeTo('fast', 1);
    });

    function initializeMap(fn, el, id) {
        $('#map').fadeOut(500, function() {
            $('#map').empty().css({
                width: '396px',
                height: '360px',
                backgroundImage: 'url(Content/i/masterplan/masterplan.jpg)',
                position: 'relative',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center top'
            });
            $('#map').fadeIn();
            addRegions();

            if (fn != null)
                fn(el, id);
            else
                mainLoaded = true;
        });
    }

    /*
    function addZoomable(id, width, height, top, left) {
    $('<img class="zoomable" src="Content/i/blank.gif" id="' + id + '" />').css({
    border: 'none',
    position: 'absolute',
    width: width + 'px',
    height: height + 'px',
    top: top + 'px',
    left: left + 'px',
    cursor: 'pointer'
    }).appendTo('#map').click(function() {
    $(this).siblings().fadeOut();
    $(this).hide()
    .attr('src', 'Content/i/masterplan/' + id + '.jpg')
    .fadeIn('slow')
    .animate({
    width: '360px',
    height: '360px',
    top: '0px',
    left: '0px'
    }, 1000, '', function() {
    $('#map').css({ backgroundImage: 'url(Content/i/masterplan/' + id + '.jpg)' }).empty();
    addRegions();
    });
    });
    }
    */

    function addZoomable(id, width, height, top, left, alt) {
        $('<img class="zoomable" src="Content/i/blank.gif" id="' + id + '" alt="' + alt + '" />').css({
            border: 'none',
            position: 'absolute',
            width: width + 'px',
            height: height + 'px',
            top: top + 'px',
            left: left + 'px',
            cursor: 'pointer'
        }).appendTo('#map').click(function() {
            zoom(this, this.id);
        });
    }

    function zoom(el, id) {
        mainLoaded = false;

        $(el).siblings().fadeOut();
        $(el).hide()
		   .attr('src', 'Content/i/masterplan/' + id + '.jpg')
		   .fadeIn('slow')
		   .animate({
		       width: '360px',
		       height: '360px',
		       top: '0px',
		       left: '18px'
		   }, 1000, '', function() {
		       $('#map').css({ backgroundImage: 'url(Content/i/masterplan/' + id + '.jpg)' }).empty();
		       //addRegions();
		   });
    }

    function addRegions() {
        addZoomable('private-estate-homes', 15, 21, 326, 98, 'Private Estate Mansions');
        addZoomable('private-cove-homes', 45, 45, 243, 81, 'Private Cove Mansions');
        addZoomable('mansions', 18, 52, 286, 112, 'Mansions');
        addZoomable('villas', 23, 42, 246, 126, 'Villas');
        addZoomable('retail-center', 45, 54, 164, 234, 'Retail Center');
        addZoomable('marina', 62, 38, 271, 136, 'Marina');
    }

    /*
    function showPopup(id) {
    $('#map div.popup').fadeOut();
    var boxid = '#' + id + '-box';
    $(boxid).fadeIn();
    $('a.close').click(function() {
    $(this).parent().fadeOut();
    });
    }
    */

    $('a.zoomable').click(function() {
        if (mainLoaded)
            zoom('img#' + this.id, this.id);
        else
            initializeMap(zoom, 'img#' + this.id, this.id);
        //$('img#' + this.id).click();
        //zoom('img#' + this.id, this.id);
    });

    $('a.reset').click(function() {
        initializeMap();
    });

    //initialize map
    initializeMap(null);
});