/*
 * Toggle between video and map in gateway page.
 */
(function ($) {
    $.extend($, {
        gatewaytoggle: {
            toggleview: 'video',
            init: function () {
                $("#ToggleMap").click(function () {
                    $.gatewaytoggle.showMap();
                });
                $("#ToggleVideo").click(function () {
                    $.gatewaytoggle.showVideo();
                });
                $("#ToggleClose").click(function () {
                    $.gatewaytoggle.closePanel();
                });
                $("#ToggleOpen").click(function () {
                    $.gatewaytoggle.openPanel();
                });

                this.openPanel();
            },
            showMap: function () {
                
                $("#VideoPlaceholder")[0].pauseVideo && $("#VideoPlaceholder")[0].pauseVideo();
                
                $('#map').css("visibility", "visible");
                $('#map').css("height", "400px");
                $('#video').hide();
                $('#ToggleMap').css("color", "White");
                $('#ToggleVideo').css("color", "Black");
                $('#ToggleMap').css("background", "url(/Images/Icons/toggle_on.png) top left repeat-x");
                $('#ToggleVideo').css("background", "url(/Images/Icons/toggle_off.png) top left repeat-x");
                $('#ToggleClose').show();
                $('#ToggleOpen').hide();
                toggleView = "map";
            },
            showVideo: function () {
                $('#map').css("visibility", "hidden");
                $('#map').css("height", "0px");
                $('#video').show();
                $('#ToggleMap').css("color", "Black");
                $('#ToggleVideo').css("color", "White");
                $('#ToggleMap').css("background", "url(/Images/Icons/toggle_off.png) top left repeat-x");
                $('#ToggleVideo').css("background", "url(/Images/Icons/toggle_on.png) top left repeat-x");
                $('#ToggleClose').show();
                $('#ToggleOpen').hide();
                toggleView = "video";
            },
            closePanel: function () {
                
                $("#VideoPlaceholder")[0].pauseVideo && $("#VideoPlaceholder")[0].pauseVideo();
                
                $('#map').css("visibility", "hidden");
                $('#map').css("height", "0px");
                $('#video').hide();
                $('#ToggleMap').css("color", "black");
                $('#ToggleVideo').css("color", "black");
                $('#ToggleVideo').css("background", "url(/images/icons/toggle_off.png) top left repeat-x");
                $('#ToggleMap').css("background", "url(/images/icons/toggle_off.png) top left repeat-x");
                $('#ToggleClose').hide();
                $('#ToggleOpen').show();
            },
            openPanel: function () {
                switch (this.toggleview) {
                    case 'video':
                        this.showVideo();
                        break;
                    case 'map':
                        this.showMap();
                        break;
                }
            }
        }
    });
})(jQuery);

$().ready(function(){
	$.gatewaytoggle.init();
});