$(function (){

	// show form that was initially hidden
	$("#search_book_list form:hidden").show();
	
    // we need to transform again
    transformInput()

    $("#submitContainer").css("display","none")
    $("#locationRow").css("display","none")
    

    $('form.jqtransform').submit(function() {

        $("#selectedPackageIdentifier").val($("#package").val())
        $("#selectedInstituteLocationId").val($("#location").val())

        if ($("#selectedPackageIdentifier").val() == ""){
            return false
        }
    });
    
});

/**
 *  Transforms form fields using jqtransform
 *  Creates the fancy input fields
 */
function transformInput(){
    $('form.jqtransform').removeClass('jqtransformdone')
    $("form.jqtransform").jqTransform();
    $('.jqTransformSelectWrapper').css("width","350px")

    // Dirty IE fix to make the full element clickable
    $('.jqTransformSelectWrapper li').hover(
        function () {
            $(this).css("cursor","pointer")
        },
        function () {
            $(this).css("background-color","red")
        }
    );
    $('.jqTransformSelectWrapper li').click(function() {
        $(this).find(":first").click()
    });
}

/**
 * Triggered when a pacakge is selected.
 * Shows the next button.
 */
function packageInputChanged(){

    $("#submitContainer").css("display","none")

    $.getJSON(jsonSTSLocationValuesLink, { packageIdentifier:$("#package").val() },
    function(data) {
        var jsonData = data
        var locationCount = parseInt(jsonData["locationCount"])

        // Do we have more then one location?
        if (locationCount > 1){

            var optionsHtml = "<option value='' selected='selected'>" + $("#location").children(":first").html() + "</option>"

            // locations
            var currentValue = ""
            for(var key in data["locations"]){
                $("#locationRow").css("display","block")

                var value = data["locations"][key]

                if (currentValue == value){
                    optionsHtml += "<option value='" + key + "' selected='selected'>" + value + "</option>"
                }
                else {
                    optionsHtml += "<option value='" + key + "'>" + value + "</option>"
                }
            }

            // Show location selection
            $("#locationContainer").html("<select id='location' name='location' onchange='return locationInputChanged()'>" + optionsHtml + "</select>")

            // we need to transform again
            transformInput()
        }
        else {
            $("#locationRow").css("display","none")
            $("#locationContainer").html("")

            $("#submitContainer").css("display","block")
            // glow effect
            $("#submitContainer .submit").glow();
        }
    });


}

/**
 * Triggered when a location is selected.
 * Locations can only be selected when a Institutepackage has more then one InstituteLocations
 */
function locationInputChanged(){
  
    if ($("#location").val() != ""){

        $("#packageContainer span").css("width","311px")
        if ($("#package").val() != ""){
            $("#submitContainer").css("display","block")
            // glow effect
            $("#submitContainer .submit").glow();
        }
    }
    else {
        $("#submitContainer").css("display","none")
    }
    return false
}

/**
 * Triggered when a institute name is changed.
 * This shows the available packages
 * Triggered by selecting from institute name autocompletion or upon selection from institute name dropdown
 */
function instituteNameInputChanged(){
    var selectedInstituteIdentifier = $("#instituteNames").val()
    $("#locationRow").css("display","none")

    if (selectedInstituteIdentifier != ""){

        $.getJSON(jsonSTSPackageValuesLink, {instituteIdentifier:selectedInstituteIdentifier},
        function(data) {

            var optionsHtml

            // packages
            optionsHtml = "<option value=''>" + $("#packageTextInput").val() + "</option>"

            var currentValue = ""
            for(var key in data["packages"]){
                var value = data["packages"][key]

                if (currentValue == value){
                    optionsHtml += "<option value='" + key + "' selected='selected'>" + value + "</option>"
                }
                else {
                    optionsHtml += "<option value='" + key + "'>" + value + "</option>"
                }
            }

            $("#packageContainer").html("<select id='package' name='selectedPackageData' onchange='return packageInputChanged()'>" + optionsHtml + "</select>")

            // hide the packageTextInput, dropdown is shown
            showInstituteNameDropdownInput(data["locations"] == undefined)

            // we need to transform again
            transformInput()
        });
    }
    else {
        showInstituteNameDropdownInput(false)
    }

    return false
}

/**
 * Institute names can be show using a dropdown or input field
 * This function toggles between them.
 * @param showDropdown
 */
function showInstituteNameDropdownInput(showDropdown){
    if (showDropdown){
        // parents are added to hide the elements generated by jqTransform
        $("#packageTextInputContainer").css("display","none")
        $("#packageContainer").css("display","inline")
    }
    else {
        $("#packageTextInputContainer").css("display","inline")
        $("#packageContainer").css("display","none")
        $("#submitContainer").css("display","none")
    }
}

/**
 *  Triggerd when the city or studyLevel dropdown becomes changed.
 *  Gets new data for cities, studielevels and institute names using ajax.
 *  Fields are update.
 */
function studyLevelOrCityInputChanged(){
    // reset instituteNames
    $("#instituteNames").attr("value","")

    $("#locationRow").css("display","none")

    $.getJSON(jsonSTSInstituteValuesLink, {city:$("#cities").val(),studyLevel:$("#studyLevels").val()},
    function(data) {

        var jsonData = data

        var selectKeys = ["cities","studyLevels"]

        // Only show the institutes if a city is selected
        if ($("#cities").val() != ''){
            selectKeys = ["cities","studyLevels","instituteNames"]
            $("#instituteTextInputContainer").css("display","none")
        }
        else {
            $("#instituteTextInputContainer").css("display","block")
            $("#instituteNamesContainer").empty()
        }

        for(var objectKey in jsonData){

            if ($.inArray(objectKey, selectKeys) != -1){

                var optionsHtml = ""
                var currentValue = $("#" + objectKey).val()

                // add first empty option
                if (objectKey == "instituteNames"){
                    optionsHtml += "<option value=''>" + $("#instituteNoSelectionName").val() + "</option>"
                }
                else{
                    optionsHtml += "<option value=''>" + $("#" + objectKey).children(":first").html() + "</option>"
                }

                for(var key in jsonData[objectKey]){
                    var value = jsonData[objectKey][key]

                    if (currentValue == value)
                       // AjaxController.groovy Prepent the key with a _. Workarround to insure correct ordering for Chrome Opera and IE9 >
                       // .replace('_', '') removes the _ before inserting it in to the DOM.
                        optionsHtml += "<option value='" + key.replace('_', '') + "' selected='selected'>" + value + "</option>"
                    else {
                        optionsHtml += "<option value='" + key.replace('_', '') + "'>" + value + "</option>"
                    }
                }

                if (objectKey == "instituteNames"){
                    $("#" + objectKey + "Container").html("<select id='" + objectKey + "' onchange='return instituteNameInputChanged()'>" + optionsHtml + "</select>")
                }
                else {
                    $("#" + objectKey + "Container").html("<select id='" + objectKey + "' onchange='return studyLevelOrCityInputChanged()'>" + optionsHtml + "</select>")
                }

            }
        }

        // show the packageTextInput again and remove the dropdown
        showInstituteNameDropdownInput(false)

        // we need to transform again
        transformInput()

    });

    return false
}