/// <reference path="jquery-1.3.2-vsdoc2.js" />
/*
<script src="/fp/baseResources/css_browser_selector.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi?key=ABQIAAAA4Cy4vaFkD2f_fYTvEBzXNhTontynubUGiJOSxGTrbdXibwpm_RS1u-Nd8gk_x-xj1Cmon7FscEVLDQ" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
 google.load("maps", "2.x");
 google.load("jquery", "1.3.2");
</script>
<script language="javascript" src="/fp/baseResources/jquery.history.js" type="text/javascript"></script>
<script language="javascript" src="/fp/baseResources/base.js" type="text/javascript"></script>
<script language="javascript" src="/_layouts/1033/bform.js" type="text/javascript"></script>
<script type="text/javascript" src="/fp/baseResources/Silverlight.js"></script>
*/
//Known issue with google chrome and jquery.history.js where the links quit working when the history fills up. If you click back several times, the links start working again

var staticContent = '#htmlContent';
var staticContentContainer = 'div.h451px';
var leftNavContentContainer = '#w311pxh451pxContainer';
var leftNavContent = '#w311pxh451px';
var pageHeader = 'div.h68px';
var fadeOutOpacity = 0;
var fadeInOpacity = 1;
// used this instead of $(document).ready(function(){  });. this gives me a single ready function for all libraries.
google.setOnLoadCallback(function() {

    // to set an initial state for image links:
    $('div.h64px a img').hover(
    // hover state
        function() {
            var src = $(this).attr('src');
            $(this).attr('src', src.replace('off', 'hover'));
        },
    // back to off
        function() {
            var src = $(this).attr('src');
            $(this).attr('src', src.replace('hover', 'off'));
        }
    );




    //if not animation
    if (window.location.hash.substr(1) == '') {
        selectLeftNavTop();
        selectNavigation1();
        selectNavigation2();
    }


    // Initialize history plugin.
    // The callback is called at once by present location.hash.
    $.historyInit(page_load);


    //'div.h110px a,#leftNavTop a,div.h40px2 a,div.h64px a,#basicInformationMenu a,div.w139px a'
    //omitting #leftNavTop and any links on the body
    $('div.h110px a,div.h40px2 a,div.h64px a,#basicInformationMenu a,div.w139px a').click(function() {

        //i think if we need to 'add' a click into history, use: $.historyLoad(this.href.replace(/^.*#/, ''));
        var hash = $(this).attr('href').substr(0, $(this).attr('href').length - 4);
        if (hash.indexOf('fp/html/gallery/') > -1)
            return;
        else
        {
        	return;
        }
        //changing the hash will trigger $.historyLoad(hash); aka page_load(href)
        window.location.hash = hash;
        //return animate_staticContent_leftNavContent_pageHeader(hash);
        //$.historyLoad(hash);
        return false;
    });



});
String.prototype.startsWith = function(str) {return (this.match("^"+str)==str)}
function page_load(href) {
    if (href == '') {
        //this will load pages that are not going to use the animation
        window.location = window.location;
        return true;
    }
    if(href.startsWith("http://themoonmansion.com") || href.startsWith("/fp"))
	    animate_staticContent_leftNavContent_pageHeader(href);	
	else
	{
		var newWindow = window.open('','_blank');
		if(newWindow!=null)
			newWindow.location=href;
		else
			window.location = href;
	}
}
/*
var directionDisplay = null;
var directionsService = new google.maps.DirectionsService(); 
var map;

function loadMap() {
    //#directionsMap only shows up on one page, but this function will try and run for every page
    if (document.getElementById("directionsMap") != undefined) {
        //directionDisplay can only be instanciated once
        if (directionDisplay == null) {
            var moonMansion = new google.maps.LatLng(47.441004, -121.743019);
            var i90EPoint = new google.maps.LatLng(47.469805475411135, -121.7301893234253);
            directionsDisplay = new google.maps.DirectionsRenderer();

            var myOptions = {
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
                center: moonMansion,
                navigationControl: true,
                navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
            }

            map = new google.maps.Map(document.getElementById("directionsMap"), myOptions);
            directionsDisplay.setMap(map);
            
            //this is for step by step directions i think
                //directionsDisplay.setPanel(document.getElementById("directionsPanel"));

            var image = '/fp/html/template/fpIcon32.png';
            var marker = new google.maps.Marker({ position: moonMansion, map: map, icon: image });
        }

        var request = {
            origin: i90EPoint,
            destination: moonMansion,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
 }
 */

function animate_staticContent_leftNavContent_pageHeader(href) {
    var hash = window.location.hash;
    var staticContentLoad = hash.substr(1) + '.htm ' + staticContent;
    var w311pxh451pxLoad = hash.substr(1) + '.htm ' + leftNavContent;
    var pageHeaderLoad = hash.substr(1) + '.htm ' + pageHeader;
    if (window.location.hash.substr(1) != '') {
        $(pageHeader).stop().fadeTo(1, fadeOutOpacity);
        $(staticContentContainer).stop().fadeTo(1, fadeOutOpacity);
        $(leftNavContentContainer).stop().fadeTo(1, fadeOutOpacity, function() {
            //all loading must be performed synchronously
            $(leftNavContentContainer).load(w311pxh451pxLoad, '', function() {
                $(staticContentContainer).load(staticContentLoad, '', function() {
                    $(pageHeader).load(pageHeaderLoad, '', function() {
                        setupEventHandlers();
                        selectNavigation1();
                        selectNavigation2();
                        selectLeftNavTop();
                        $(leftNavContentContainer).stop().fadeTo(1, fadeInOpacity);
                        $(pageHeader).stop().fadeTo('slow', fadeInOpacity);
                        $(staticContentContainer).stop().fadeTo(1, fadeInOpacity);
                        //loadMap() must appear here if it's going to work
                            //loadMap();
                    });
                });
            });
        });
    }
    return false;
}
function setupEventHandlers() {

    $(leftNavContent).find('a').click(function() {
        var hash = $(this).attr('href').substr(0, $(this).attr('href').length - 4);
        if (hash.substr(1).indexOf('fp/html/gallery/') > -1)
            return true;
        //changing the hash will trigger $.historyLoad(hash); aka page_load(href)
        window.location.hash = hash;
        return false;
    });
    $(staticContent).find('a').click(function() {
        var hash = $(this).attr('href').substr(0, $(this).attr('href').length - 4);
        if (hash.substr(1).indexOf('fp/html/gallery/') > -1)
            return true;
        //changing the hash will trigger $.historyLoad(hash); aka page_load(href)
        window.location.hash = hash;
        return false;
    });
    
}

function selectNavigation1() {
    if (!$('div.h64px'))
        return;
    $('div.h64px').find('a').each(function() {
        var selected = window.location.hash.substr(1) + '.htm';
        if (selected == '.htm')
            selected = location.pathname;
        var link = $(this).attr('href');
        if (link.substring(0, 1) != '/')
            link = '/' + link; // fiddle IE's view of the link
        link = link.substr(0, link.lastIndexOf('/'));
        if (selected.indexOf(link) > -1) {
            var src = $(this).children('img').attr('src');
            src = src.replace('off.png', 'on.png');
            src = src.replace('hover.png', 'on.png');
            $(this).children('img').attr('src', src);
        }
        else {
            var src = $(this).children('img').attr('src');
            $(this).children('img').attr('src', src.replace('on.png', 'off.png'));
        }
    });
}

function selectLeftNavTop() {
    
    if (!$(leftNavContent))
        return;
    $(leftNavContent).find('a').each(function() {
        if ($(this).parent('div').attr('class') == 'h42px-top')
            $(this).parent('div').attr('class', 'h40px-top');
        if ($(this).parent('div').attr('class') == 'h42px')
            $(this).parent('div').attr('class', 'h40px');
    });
    var selected = window.location.hash.substr(1) + '.htm';
    if (selected == '.htm')
        selected = location.pathname;
    $(leftNavContent).find('a').each(function() {
        var link = $(this).attr('href');
        if (link.substring(0, 1) != '/')
            link = '/' + link; // fiddle IE's view of the link
        if ($(this).parent('div').attr('class') == 'h42px-defaulted')
        //changes default state to unselected. for more info, see comment in css
            $(this).parent('div').attr('class', 'h40px');

        if (link == selected) {
            if ($(this).parent('div').attr('class') == 'h40px')
                $(this).parent('div').attr('class', 'h42px');
            if ($(this).parent('div').attr('class') == 'h40px-top')
                $(this).parent('div').attr('class', 'h42px-top');
        }
        $('div.h40px2-box').hover(
            function() {
                if ($(this).attr('class') == 'h40px2-box')
                    $(this).attr('class', 'h40px2-box-hover');
            },
            function() {
                if ($(this).attr('class') == 'h40px2-box-hover')
                    $(this).attr('class', 'h40px2-box');
            }
        );

        $('div.h40px').hover(
        function() {
            if ($(this).attr('class') == 'h40px')
                $(this).attr('class', 'h40px-hover');
        },
        function() {
            if ($(this).attr('class') == 'h40px-hover')
                $(this).attr('class', 'h40px');
        }
        );
        $('div.h40px-top').hover(
        function() {
            if ($(this).attr('class') == 'h40px-top')
                $(this).attr('class', 'h40px-top-hover');
        },
        function() {
            if ($(this).attr('class') == 'h40px-top-hover')
                $(this).attr('class', 'h40px-top');
        }
    );
    });
    
}

function selectNavigation2() {
    if (!$('#basicInformationMenu'))
        return;

    var selected = window.location.hash.substr(1) + '.htm';
    if (selected == '.htm')
        selected = location.pathname;

    $('#basicInformationMenu').find('a').each(function() {
        if ($(this).parent('div').attr('class') == 'h40px2-box-selected')
            $(this).parent('div').attr('class', 'h40px2-box');
    });

    $('#basicInformationMenu').find('a').each(function() {
        var link = $(this).attr('href');
        if (link.substring(0, 1) != '/')
            link = '/' + link; // fiddle IE's view of the link
        if (link == selected) {
            $(this).parent('div').attr('class', 'h40px2-box-selected');
        }
    });
}