/*
 * Interactive map showing image or text popups.
 *
 * Copyright (c) 2009 Hyperdisk Marketing
 * http://www.hyperdisk.com/
 */

//java -jar yuicompressor-2.4.2.jar --nomunge map_chateau.js > map_chateau.min.js

(function($) {
    // Run our setup() method after the window is finished loading
    $(document).ready(setup);

    function setup() {
        //preload a few images
        var preload = ["images/map/btn-close.gif", "images/map/upArrow.gif", "images/map/downArrow.gif"];
        for (var i in preload) {
            var img = new Image();
            img.src = preload[i];
        }
        
        var map = document.getElementById("map");
        var offset = getOffset(map);
        var scrollOffsets = getPageScroll();

        // create a clickable transparent image over each Point of Interest.
        for (var i in POI) {
            var poi = POI[i];
            var p = new Image(marker.width, marker.height);
            p.src = "images/map/blank.gif";
            p.style.position = "absolute";
            p.style.left = (poi.at.x + offset.x + scrollOffsets.x) + "px";
            p.style.top = (poi.at.y + offset.y + scrollOffsets.y) + "px";
            // looks like chrome ignored the image constructor size, so set it via css
            p.style.width = marker.width + "px";
            p.style.height = marker.height + "px";
            p.title = poi.title;
            //p.title = poi.ref;      //debugging
            p.pix = poi.photo;
            p.className = "POI";
            p.style.display = "none";
            map.appendChild(p);
            p.poi = poi;
        }

        $(".POI").bind("click", showit).css('cursor', 'pointer').show();
        //$(".POI").css('border', '1px solid red');

        // if the window is resized, all the POI need to be moved to a new location
		$(window).resize(function() {
            var offset = getOffset(map);
		    var scrollOffsets = getPageScroll();
		    $(".POI").each( function() {
		        $(this).css({
		            left: this.poi.at.x + offset.x + scrollOffsets.x, 
		            top: this.poi.at.y + offset.y + scrollOffsets.y
	            });
		    });
		});
    }

    function getOffset(el) {
    /// Utility function to get the actual x,y offset of an object.
    /// <param name="el">The element to get the offset of.</param>
    /// <returns>An object containing x,y offset values.</returns>
        var offsetLeft = offsetTop = 0;

        if (el.offsetParent) {
            offsetLeft = el.offsetLeft;
            offsetTop = el.offsetTop;
            while (el = el.offsetParent) {
                offsetLeft += (el.offsetLeft || 0) - (el.parentNode.scrollLeft || 0);
                offsetTop += (el.offsetTop || 0) - (el.parentNode.scrollTop || 0);
            }
        }
        return { 'x': offsetLeft, 'y': offsetTop };
    }

    function showit(event) {
        // if there's already a textbox shown, close it
        if ($('#hdm-textbox').length > 0) _finish();

        if (null == event.target.pix)
            showTitle(event.target);
        else
            showImage(event.target.title, event.target.pix);
    }

    function showTitle(target) {
        var title = target.title;
        var offset = $(target).offset();
        var scrollOffset = getPageScroll();
        // window dimensions
        var wHeight = $(window).height(), wWidth = $(window).width();
        var wX = offset.left - scrollOffset.x, wY = offset.top - scrollOffset.y;

        // Hide some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
        $('embed, object, select').css({ 'visibility': 'hidden' });

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

        // Assigning click events in elements to close overlay
        $('#hdm-textbox,#hdm-secNav').click(function() { _finish(); });
        $('#hdm-secNav').css('cursor', 'pointer').show();
        $('#hdm-image-details-caption').html(title);
        //$('#hdm-container-text-data-box').hide();

        // IE & Chrome hack... Chrome undersize the width, while IE full-pages it ;(
        var w = $("#hdm-textbox").width();
        if ((w < 100) || (w > 500)) {
            $("#hdm-textbox").width(250);
        }

        var text = {'top': offset.top, 'left': offset.left};
        var arrow = {'top': 0, 'left': 0};

        var arrowLeft = (wWidth / 2) > wX;
        if ((wHeight / 3) > wY) {
            // Need to use marker.height in here...
            $('#hdm-text-arrow').attr('src', "images/map/upArrow.gif");
            // offset down by POI height + arrow height
            text.top += 15 + 15;
            arrow.top = -14;
        } else {
            $('#hdm-text-arrow').attr('src', "images/map/downArrow.gif");
            // offset up by textbox height + arrow height
            text.top -= $("#hdm-textbox").height() + 15;
            arrow.top = $("#hdm-textbox").height() - 1;
        }

        if ((wWidth / 3) > wX) {
            // left side of screen
            text.left -= 10;
            arrow.left = 10 - 7;
        } else if ((2 * wWidth / 3) < wX) {
            // right side of screen
            text.left -= $("#hdm-textbox").width() - (marker.width + 15);
            arrow.left = $("#hdm-textbox").width() - (marker.width + 15 + 7);
        } else {
            // center
            text.left -= ($("#hdm-textbox").width() / 2);
            arrow.left = ($("#hdm-textbox").width() / 2) - 7;
        }

        $('#hdm-textbox').css({ 'top': text.top + "px", 'left': text.left + "px" });
        $('#hdm-text-arrow').css({ 'top': arrow.top + "px", 'left': arrow.left + "px" });

        $('#hdm-container-text-data-box').fadeIn('fast');
    }

    function showImage(title, src) {
        // Hide some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
        $('embed, object, select').css({ 'visibility': 'hidden' });

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

        // window dimensions
        var wHeight = $(window).height(), wWidth = $(window).width();

        // Style overlay and show it
        $('#hdm-overlay').css({
            opacity: .5,
            width: $(document).width(),
            height: $(document).height()
        }).fadeIn();

        var scrollOffsets = getPageScroll();
        $('#hdm-lightbox').css({
            top: scrollOffsets.y + (wHeight / 10),
            left: scrollOffsets.x
        }).show();

        // Assigning click events in elements to close overlay
        $('#hdm-overlay,#hdm-lightbox,#hdm-secNav').click(function() { _finish(); });
        $('#hdm-secNav').css('cursor', 'pointer').show();

        $('#hdm-loading').show();
        $('#hdm-image,#hdm-container-image-data-box').hide();
        $('#hdm-image-details-caption').html(title);

        // Image load process
        var imageLoader = new Image();
        imageLoader.onload = function() {
            _resize_container_image_box(imageLoader.width, imageLoader.height);
            $('#hdm-image').attr('src', src);
        };
        imageLoader.src = src;
        
        $(window).resize(function() { 
            // new overlay dimensions
	        $('#hdm-overlay').css({
                width: $(window).width(),
                height: $(document).height()
            });
   		});

    }

    function _resize_container_image_box(intImageWidth, intImageHeight) {
        // Get current width and height
        var intCurrentWidth = $('#hdm-container-image-box').width();
        var intCurrentHeight = $('#hdm-container-image-box').height();
        // Get the width and height of the selected image plus the padding
        var intWidth = (intImageWidth + (10 * 2)); // Plus the image's width and the left and right padding value
        var intHeight = (intImageHeight + (10 * 2)); // Plus the image's height and the left and right padding value
        // Diferences
        var intDiffW = intCurrentWidth - intWidth;
        var intDiffH = intCurrentHeight - intHeight;
        // Perfomance the effect
        $('#hdm-container-image-box').animate({ width: intWidth, height: intHeight }, 400, function() { _show_image(); });
        $('#hdm-container-image-data-box').css({ width: intImageWidth });
    };

    function _show_image() {
        $('#hdm-loading').hide();
        $('#hdm-image').fadeIn();
        $('#hdm-container-image-data-box').slideDown('fast');
    };

    function _finish() {
        $('#hdm-lightbox,#hdm-textbox').remove();
        $('#hdm-overlay').fadeOut(function() { $('#hdm-overlay').remove(); });

        // Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
        $('embed, object, select').css({ 'visibility': 'visible' });
    }

    function getPageScroll() {
        return {"x":$(window).scrollLeft(), "y":$(window).scrollTop()};
    };

var imageMarkup = '<div id="hdm-overlay"></div><div id="hdm-lightbox"><div id="hdm-container-image-box"><div id="hdm-container-image"><img id="hdm-image"><div id="hdm-loading"><a href="#" id="hdm-loading-link"><img src="images/map/loading.gif" /></a></div></div></div><div id="hdm-container-image-data-box"><div id="hdm-container-image-data"><div id="hdm-image-details"><span id="hdm-image-details-caption"></span></div><div id="hdm-secNav"><img src="images/map/btn-close.gif" title="Close" /></div></div></div></div>';
var textMarkup = '<div id="hdm-textbox"><div id="hdm-container-text-data-box"><div id="hdm-text-details"><span id="hdm-image-details-caption"></span></div><div id="hdm-secNav"><a href="#" id="hdm-secNav-btnClose"><img src="images/map/btn-close.gif" title="Close" /></a></div></div><img id="hdm-text-arrow" /></div>';
var marker = {"width":15, "height":15};
var POI = [
{"ref":1, "at":{"x":86, "y":124}, "title":"Grand Ballroom", "photo":"images/map/chateau_grandballroom.jpg"},
{"ref":3, "at":{"x":106, "y":387}, "title":"Kidz Klub", "photo":"images/map/chateau_kidzklub.jpg"},
{"ref":4, "at":{"x":107, "y":430}, "title":"Spa Voyage Kidz Spa", "photo":"images/map/chateau_spavoyage.jpg"},
{"ref":6, "at":{"x":128, "y":170}, "title":"Hardy Board Room", "photo":"images/map/chateau_hardyboardroom.jpg"},
{"ref":7, "at":{"x":134, "y":431}, "title":"PJ's Ice Cream Parlor", "photo":"images/map/chateau_pjs.jpg"},
{"ref":8, "at":{"x":136, "y":402}, "title":"The Activities Center & Arcade", "photo":"images/map/chateau_arcade.jpg"},
{"ref":9, "at":{"x":137, "y":310}, "title":"Tennis Courts", "photo":"images/map/chateau_tenniscourt.jpg"},
{"ref":11, "at":{"x":192, "y":334}, "title":"Kidz Indoor Pool", "photo":"images/map/chateau_kidzindoorpool.jpg"},
{"ref":13, "at":{"x":229, "y":410}, "title":"The Tavern", "photo":"images/map/chateau_tavern.jpg"},
{"ref":14, "at":{"x":233, "y":328}, "title":"Heritage Court Shoppes", "photo":"images/map/chateau_heritagecourtshoppe.jpg"},
{"ref":15, "at":{"x":240, "y":269}, "title":"Lecture Hall", "photo":"images/map/chateau_lecturehall.jpg"},
{"ref":16, "at":{"x":241, "y":197}, "title":"Grand Ballroom", "photo":"images/map/chateau_grandballroom.jpg"},
{"ref":17, "at":{"x":255, "y":239}, "title":"Nemacolin Meeting Rooms", "photo":"images/map/chateau_nemacolinmeetingroom.jpg"},
{"ref":18, "at":{"x":262, "y":424}, "title":"Pool Bar", "photo":"images/map/chateau_poolbar.jpg"},
{"ref":19, "at":{"x":284, "y":210}, "title":"Joseph's", "photo":"images/map/chateau_joseph.jpg"},
{"ref":20, "at":{"x":289, "y":433}, "title":"Paradise Pool", "photo":"images/map/chateau_paradisepool.jpg"},
{"ref":21, "at":{"x":312, "y":225}, "title":"The Club Room", "photo":"images/map/chateau_theclubroom.jpg"},
{"ref":22, "at":{"x":314, "y":387}, "title":"Spa Boutique", "photo":"images/map/chateau_spaboutique.jpg"},
{"ref":23, "at":{"x":335, "y":209}, "title":"Hardy Lobby", "photo":"images/map/chateau_hardylobby.jpg"},
{"ref":24, "at":{"x":339, "y":387}, "title":"Woodlands Spa", "photo":"images/map/chateau_woodlandspa.jpg"},
{"ref":25, "at":{"x":369, "y":237}, "title":"Wine Cellar", "photo":"images/map/chateau_winecellar.jpg"},
{"ref":26, "at":{"x":384, "y":176}, "title":"Marquis Ballroom, Salons 1-4", "photo":"images/map/chateau_marquisballroom.jpg"},
{"ref":27, "at":{"x":388, "y":196}, "title":"Marquis Foyer", "photo":"images/map/chateau_marquisfoyer.jpg"},
{"ref":28, "at":{"x":391, "y":361}, "title":"Fitness Area & Elements", "photo":"images/map/chateau_fitnessarea.jpg"},
{"ref":29, "at":{"x":395, "y":256}, "title":"The Sundry Shop", "photo":"images/map/chateau_sundryshop.jpg"},
{"ref":30, "at":{"x":405, "y":388}, "title":"Squash Court", "photo":"images/map/chateau_squashcourt.jpg"},
{"ref":31, "at":{"x":428, "y":276}, "title":"Autumn", "photo":"images/map/chateau_autumndiningroom.jpg"},
{"ref":32, "at":{"x":432, "y":251}, "title":"Lodge Guest Rooms", "photo":"images/map/chateau_guestroom.jpg"},
{"ref":33, "at":{"x":451, "y":225}, "title":"Academie du Vin", "photo":"images/map/chateau_academieduvin.jpg"},
{"ref":34, "at":{"x":461, "y":254}, "title":"Lautrec", "photo":"images/map/chateau_lautrecdining.jpg"},
{"ref":35, "at":{"x":464, "y":342}, "title":"Croquet Court", "photo":"images/map/chateau_croquetcourt.jpg"},
{"ref":36, "at":{"x":466, "y":208}, "title":"Cigar Shop & Bar", "photo":"images/map/chateau_cigarbar.jpg"},
{"ref":38, "at":{"x":517, "y":189}, "title":"Hardy & Hayes Fine Jewelry Shop", "photo":"images/map/chateau_hardyhayejeweler.jpg"},
{"ref":39, "at":{"x":526, "y":421}, "title":"Parking Garage", "photo":"images/map/chateau_parkinggarage.jpg"},
{"ref":40, "at":{"x":546, "y":170}, "title":"The Tea Lounge", "photo":"images/map/chateau_tearoom.jpg"},
{"ref":41, "at":{"x":553, "y":187}, "title":"Lobby Lounge", "photo":"images/map/chateau_lobby.jpg"},
{"ref":42, "at":{"x":605, "y":226}, "title":"Chateau Lafayette Guest Rooms", "photo":"images/map/chateau_lafayetteguestrooms.jpg" }
];

})(jQuery);