/*
* Copyright (C) 2009 Joel Sutherland
* Licenced under the MIT license
*/
(function($) {
    $.fn.zoommap = function(settings) {
        settings = $.extend({
            // Width and Height of the Map Area
            width: '100px',
            height: '100px',

            //Misc Settings
            blankImage: 'images/blank.gif',
            loadingImage: 'images/loading.gif',
            fadeDuration: 400,
            zoomDuration: 400,

            //ids and classes
            bulletClass: 'zoomable',
            popupSelector: 'div.popup',
            popupCloseSelector: 'a.close',

            //Return to Initial Region Link
            homeId: 'returnlink',
            homeText: '',

            //Initial Region to be shown
            initialRegion: {},

            //Zoomable Regions
            zoomableRegions: []
        }, settings);

        var map = $(this);

        //Set up initial Map Area and the initial region that is shown
        function initializeMap() {
            map.fadeOut(settings.fadeDuration, function() {
                $(this).empty().css({
                    width: settings.width,
                    height: settings.height,
                    backgroundImage: 'url(' + settings.initialRegion.image + ')',
                    position: 'relative'
                });
                $(this).fadeIn();
                loadBullets(settings.initialRegion, false);
            });
        }

        //Load the Bullets 
        function loadBullets(region, showHomeLink) {
            map.load(region.data, {}, function() {
                //add back button
                if (showHomeLink) {
                    $('<a id="' + settings.homeId + '" href="javascript:void(0)"><span>' + settings.homeText + '</span></a>')
						.appendTo(map)
						.click(function() { initializeMap() });
                }
                else {
                    for (var i = 0; i < settings.zoomableRegions.length; i++) {
                        addZoomable(settings.zoomableRegions[i]);
                    }
                }
                //place bullets
                $(this).children('a.bullet').each(function() {
                    var coords = $(this).attr('rel').split('-');
                    $(this).css({ left: coords[0] + 'px', top: coords[1] + 'px' })
						   .hide()
						   .fadeIn()
						   .click(function() { showPopup($(this).attr('id')); });
                });
            });
        }

        function addZoomable(subregion) {
            $('<span id="zoomtip" style="display: none"></span><img class="' + settings.bulletClass + '" src="' + settings.blankImage + '" id="' + subregion.id + '" />').css({
                border: 'none',
                position: 'absolute',
                width: subregion.width,
                height: subregion.height,
                top: subregion.top,
                left: subregion.left,
                cursor: 'pointer'
            }).appendTo(map).click(function() {
                $(this).siblings().fadeOut();
                $(this).hide()
					   .attr('src', subregion.image)
					   .fadeIn('slow')
					   .animate({
					       width: settings.width,
					       height: settings.height,
					       top: '0px',
					       left: '0px'
					   }, settings.zoomDuration, '', function() {
					       map.css({ backgroundImage: 'url(' + subregion.image + ')' }).empty();
					       loadBullets(subregion, true);
					   });
            }).appendTo(map).mouseover(function() {
                $('#zoomtip').show()
            }).appendTo(map).mouseout(function() {
                $('#zoomtip').hide()
            });
        }



        function showPopup(id) {
            map.find(settings.popupSelector).fadeOut();
            var boxid = '#' + id + '-box';
            $(boxid).fadeIn();
            $(settings.popupCloseSelector).click(function() {
                $(this).parent().parent().fadeOut();
            });
        }


        //initialize map
        initializeMap();

    }
})(jQuery);

$(document).ready(function() {
    $('div#map').zoommap({
        width: '470px',
        height: '436px',
        initialRegion: {
            id: 'campus',
            data: '/locations/popups/campus.aspx',
            image: '/locations/images/map_houston.jpg'
        },
        zoomableRegions: [
			{
			    id: 'bc',
			    data: '/locations/popups/zoom.aspx',
			    image: '/locations/images/map_sw_zoom.jpg',
			    width: '180px',
			    height: '167px',
			    top: '245px',
			    left: '117px'
			}]
    });
});