/*
* @author         Dennis Milandt
*/



/*************************/
/* User Interface        */
/*************************/
var UI =
{

    /*************************/
    /* Initialize            */
    /*************************/
    init: function() {
        UI.Page.init();
        UI.TopNav.init();

        $(window).load(UI.SelectBoxes.init);

        $(window).resize(UI.Page.adjustHeight);
    },


    /*************************/
    /* Page                  */
    /*************************/
    Page:
	{
	    init: function() {
	        UI.Page.adjustHeight();
	    },
	    adjustHeight: function() {
	        $('#footer').css('padding-top', (0) + 'px');

	        var windowHeight = $(window).height();
	        var pageHeight = $('#canvas').height();

	        if (pageHeight < windowHeight)
	            UI.Page.increaseHeight(100, 100);
	    },
	    increaseHeight: function(add, interval) {
	        add = add + interval;

	        $('#footer').css('padding-top', (add) + 'px');

	        var windowHeight = $(window).height();
	        var pageHeight = $('#canvas').height();

	        if (pageHeight < windowHeight) {
	            UI.Page.increaseHeight(add, interval);
	        }
	        else if (pageHeight > windowHeight) {
	            interval = interval / 2;
	            UI.Page.decreaseHeight(add, interval);
	        }
	    },
	    decreaseHeight: function(add, interval) {
	        add = add - interval;

	        $('#footer').css('padding-top', (add) + 'px');

	        var windowHeight = $(window).height();
	        var pageHeight = $('#canvas').height();

	        if (pageHeight < windowHeight) {
	            interval = interval / 2;
	            UI.Page.increaseHeight(add, interval);
	        }
	        else if (pageHeight > windowHeight) {
	            UI.Page.decreaseHeight(add, interval);
	        }
	    }
	},


    /*************************/
    /* Top Navigation        */
    /*************************/
    TopNav:
	{
	    init: function() {
	        $('#topnav ul li a').hover(function() {
	            $(this).parent('li').addClass('hover');
	        },
			function() {
			    $(this).parent('li').removeClass('hover');
			});
	    }
	},


    /*************************/
    /* JS Select Boxes       */
    /*************************/
    SelectBoxes:
	{
	    init: function() {
	        // Config
	        var slideDownSpeed = 150;
	        var slideUpSpeed = 75;
	        var collapseTimeout = 300;

	        // Calculate the width of the text spans and the options
	        $('div.select').each(function() {
	            var totalWidth = parseInt($(this).css('width'), 10);

	            var selectedText = $(this).find('.title');
	            var newSelectedTextWidth = totalWidth - 46;
	            selectedText.css('width', newSelectedTextWidth + 'px');

	            var optionTexts = $(this).find('.text');
	            var newTextWidth = totalWidth - 46;
	            optionTexts.css('width', newTextWidth + 'px');

	            var options = $(this).find('.option');
	            var newoptionWidth = totalWidth - 52;
	            options.css('width', newoptionWidth + 'px');
	        });

	        // Add rounded corners to the last option
	        // Add z-index
	        // Add cursor pointer
	        var zindex = 1000;
	        $('div.select:not(.inactive)').each(function() {
	            $(this).find('.option:last').append('<span class="bottom-left"></span><span class="bottom-right"></span>');
	            $(this).css({ 'z-index': zindex--, 'cursor': 'pointer' });
	        });


	        // Toggle the options
	        $('div.select:not(.inactive)').click(
			function() {
			    if (!$(this).hasClass('open'))
			        $(this).find('.options').slideDown(slideDownSpeed);
			    else
			        $(this).find('.options').slideUp(slideUpSpeed);

			    $(this).toggleClass('open');

			}).mouseleave(function() {
			    var select = $(this);
			    var collapseTimer = setTimeout(function() {
			        select.find('.options').slideUp(slideUpSpeed);
			        select.removeClass('open');
			    }, collapseTimeout);

			    $(this).mouseenter(function() {
			        clearTimeout(collapseTimer);
			        $(this).unbind('mouseenter');
			    });
			});


	        // Add hover effect
	        $('div.select:not(.inactive) .option').hover(
			function() {
			    $(this).addClass('hover');
			},
			function() {
			    $(this).removeClass('hover');
			});


	        // Add click event handeling different types of select boxes
	        $('div.select:not(.inactive) .option').click(
			function() {
			    if ($(this).parents('.select').hasClass("redirectToValue"))
			        UI.SelectBoxes.RedirectToValue($(this), $(this).hasClass('newWindow'));
			    else if ($(this).parents('.select').hasClass("orgsearch1"))
			        UI.SelectBoxes.GetOrganizations($(this));
			    else if ($(this).parents('.select').hasClass("orgsearch2"))
			        UI.SelectBoxes.GetOrganizationInfo($(this));
			    else
			        UI.SelectBoxes.UpdateSelectedValue($(this));
			});
	    },

	    // Redirect the user to the value of the selected option
	    RedirectToValue: function(option, newWindow) {
	        if (newWindow == true)
	            window.open(option.find('input.value').val(), '', '');
	        else
	            location.href = option.find('input.value').val();
	    },

	    // Redirect the user to the value of the selected option
	    GetOrganizations: function(option) {
	        $("#listOrganizations").removeClass("inactive");
	        $.ajax({
	            url: "/organization.ashx?regionName=" + option.find('input.value').val(),
	            cache: false,
	            success: function(html) {
	                $("#listOrganizations .options").html(html);
	                UI.SelectBoxes.init();
	            }
	        });
	    },

	    GetOrganizationInfo: function(option) {
	        $.ajax({
	            url: "/organization.ashx?orgId=" + option.find('input.value').val(),
	            cache: false,
	            success: function(html) {
	                $("#orgInfo").html(html);
	            }
	        });
	    },

	    // Update the selected text and value and collapse the selectbox
	    UpdateSelectedValue: function(option) {
	        var slideUpSpeed = 75;
	        var options = option.parents('.options');
	        var selectedText = option.parents('.select').find('.title span.selectedText');
	        var selectedValue = option.parents('.select').find('input.selectedValue');

	        selectedText.html(option.text());
	        selectedValue.val(option.find('input.value').val());
	        options.slideUp(slideUpSpeed);
	    }
	}
}