$(document).ready(function() {

    // DROPDOWN SELECT
    // Get OPTION values from SELECT and append to drop down
    if ($('body').is('.browserIE')) {
        $('.dropdownSelect SELECT').each(function() {
            $(this).css({
                "position" : "relative",
                "left" : "0px",
                "top" : "0px",
                "width" : "200px"
                });
            $(this).parents('.dropdownSelect').find('.dropdown').hide();
        });
    }
    else {
        $('.dropdownSelect SELECT').each(function() {
            var fakedropdown = $(this).parents('.dropdownSelect').find('.dropdown');
            var options = "<div>";
            $(this).find('OPTION').each(function() {
                options += ('<div value="' + $(this).val() + '" class="option">' + $(this).html() + '</div>');
            });
            options += "</div>";
            fakedropdown.html(options);
        });
   

        // First option styling
        $('.dropdownSelect').each(function() {

            // Add 'first' class
            $(this).find('.option:first').addClass('first');

            // Add 'required' styling
            var firstOption = $(this).find('.option:first').html();
            if (firstOption != "Select Country first") {
                firstOption = firstOption.split(" ");
                firstOption[firstOption.length - 1] = '<span class="small">' + firstOption[firstOption.length - 1] + '</span>';
                firstOption = firstOption.join(" ");
            }
            $(this).find('.option:first').html(firstOption);

            if (!$(this).find('SELECT option:first').is(':selected')) {
                $(this).find('.dropdownSelectedItem').html('<div class="option selected first">' + $(this).find('SELECT option:selected').html() + '</div>').show();
            }

        });
        // Animate dropdown
        $('.dropdownSelect').live('click', function() {

            if ($(this).css('height') == "24px") {
                // Get total height of dropdown
                var height = $(this).find('.dropdown').height();

                $(this).animate({
                    height: "250px"
                }, 300, function() {
                    $(this).find('.dropdown').css('overflow-y', 'scroll').css('height', '250px');
                    // Close if click anywhere else
                    $('body').bind('click', function() {
                        $('.dropdownSelect').animate({
                            height: "24px"
                        }, 300, function() {
                            $(this).find('.dropdown').css('overflow-y', 'hidden').css('height', '24px');
                        });
                        $('.dropdownSelect').css({
                            backgroundImage: 'url(i/selectArrow_right.gif)'
                        });
                        // Remove the event so there is no chance of it firing when the menu is closed!
                        $('body').unbind('click');
                    });
                });

                // Change arrow direction
                $(this).css({
                    backgroundImage: 'url(i/selectArrow_down.gif)'
                });


            }

        });
    }
    // Get regions when country is selected
    $('.dropdownSelect.countries SELECT').change(function() {
        if ($(this).val() != "Please Select") {
            var parentDiv = $(this).parents('.select')
            var fakeRegionDropdown = parentDiv.next().find('.dropdown');
            var realRegionDropdown = parentDiv.next().find('SELECT');
            realRegionDropdown.attr('disabled','disabled');
            var fakeCityDropdown = parentDiv.next().next().find('.dropdown');
            var realCityDropdown = parentDiv.next().next().find('SELECT');
            realCityDropdown.attr('disabled','disabled');

            fakeRegionDropdown.parent().show();
            //Get rid of the cities first in case this is a re-selection
            // Clear the (fake) dropdowns and thier selected items
            fakeRegionDropdown.empty();
            fakeCityDropdown.empty();

            // Clear the selected items
            parentDiv.next().find('.dropdownSelectedItem').empty().hide();
            parentDiv.next().next().find('.dropdownSelectedItem').empty().hide();

            // Add its please select item
            fakeCityDropdown.html('<div class="option first">3. Select a City <span class="small">(required)</span></div>');
            fakeRegionDropdown.html('<div class="option first" style="float: left">Loading...</div>')
            fakeRegionDropdown.append('<img src="/i/ajax-loader.gif" class="loading" />');
            if (realRegionDropdown != undefined) {
                /* Call the Handler */
                $.ajax({
                    type: "POST",
                    url: '/search.aspx/getRegions',
                    data: '{"countrycode" : "' + $(this).val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                        result = JSON.parse(data.d);
                        items = result.items;
                        // Clear existing options
                        realRegionDropdown.empty();
                        // Loop through new options and add them to the real dropdown
                        var options = "<option value=\"Please Select\">Please Select</option>";
                        if (items.length > 2) {

                            for (var i = 0; i < items.length; i++) {
                                options += '<option value="' + items[i].ID + '">' + items[i].name + '</option>';
                            }
                            realRegionDropdown.append(options);
                            if (!$('body').is('.browserIE')) {
                                // Clear the (fake) dropdown
                                fakeRegionDropdown.empty();
                                // Add its first item
                                fakeRegionDropdown.append('<div class="option first">2. Select a region <span class="small">(required)</span></div>');
                                // and add the remaining ones
                                realRegionDropdown.find('OPTION').each(function() {
                                    if ($(this).html() != "Please Select") {
                                        fakeRegionDropdown.append('<div value="' + $(this).val() + '" class="option">' + $(this).html() + '</div>');
                                    }
                                });
                            }
                        }
                        else {
                            // Oh dear, no regions in this country!
                            // Clear the (fake) dropdown
                            fakeRegionDropdown.empty();
                            fakeRegionDropdown.parent().hide();

                            realRegionDropdown.change();

                        }
                        realRegionDropdown.removeAttr('disabled');
                    }
                });
            }
        }
    });

    // Get cities when region is selected
    $('.dropdownSelect.regions SELECT').change(function() {

        var parentDiv = $(this).parents('.select');
        var fakeCityDropdown = parentDiv.next().find('.dropdown');

        var realCityDropdown = parentDiv.next().find('SELECT');
        realCityDropdown.attr('disabled','disabled');

        // Clear the selected item
        parentDiv.next().find('.dropdownSelectedItem').empty().hide();

        fakeCityDropdown.html('<div class="option first" style="float: left">Loading...</div>')
        fakeCityDropdown.append('<img src="/i/ajax-loader.gif" class="loading" />');
        /* Call the Handler */
        if (realCityDropdown != undefined) {
            $.ajax({
                type: "POST",
                url: '/methods/methods.aspx/getCitiesByRegionID',
                data: '{"ID" : "' + $(this).val() + '", ' +
                '"countrycode" : "' +
                parentDiv.prev().find('SELECT').val() +
                '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    result = JSON.parse(data.d);
                    items = result.items;
                    // Clear existing options
                    realCityDropdown.empty();
                    // Loop through new options and add them to the real dropdown
                    var options = "<option value=\"Please Select\">Please Select</option>";
                    for (var i = 0; i < items.length; i++) {
                        options += '<option value="' + items[i].id + '">' + items[i].name + '</option>';
                    }
                    realCityDropdown.append(options);
                    if (!$('body').is('.browserIE')) {
                        // Clear the (fake) dropdown
                        fakeCityDropdown.empty();
                        // Add its first item
                        fakeCityDropdown.append('<div class="option first">3. Select a city <span class="small">(required)</span></div>');
                        // and add the remaining ones
                        var options = "";
                        realCityDropdown.find('OPTION').each(function() {
                            if ($(this).html() != "Please Select") {
                                options += ('<div value="' + $(this).val() + '" class="option">' + $(this).html() + '</div>');
                            }
                        });
                        fakeCityDropdown.append(options);
                    }
                    realCityDropdown.removeAttr('disabled');
                }
            });
        }
    });


    // Function to setup the hovers for options in fake dropdowns
    $('.dropdownSelect .option').live("mouseover", function() {
        $(this).addClass('over');
    });
    $('.dropdownSelect .option').live("mouseout", function() {
        $(this).removeClass('over');
    });

    // Setup click events on options
    $('.dropdownSelect .option:not(.first)').live("click", function() {
        var dropdownSelect = $(this).parents('.dropdownSelect');

        dropdownSelect.find('.dropdownSelectedItem').html($(this).clone().addClass('first').addClass('selected')).show();

        dropdownSelect.find('SELECT OPTION:[value=' + dropdownSelect.find('.dropdownSelectedItem .option').attr('value') + ']').attr('selected', 'selected');
        dropdownSelect.find('SELECT').change();
        dropdownSelect.animate({
            height: "24px"
        }, 300, function() {
            dropdownSelect.find('.dropdown').css('overflow-y', 'hidden').css('height', '24px');
        });

        // Change arrow direction
        dropdownSelect.css({
            backgroundImage: 'url(i/selectArrow_right.gif)'
        });
        // Remove the close menu event so there is no chance of it firing when the menu is closed!
        $('body').unbind('click');
    });

    $('.noclick').die('click');

        
});