$().ready(function() {
    function parseXMLTheaters(data) {
        rows = $(data).find('row');
        return $.map(rows, function(row) {
            return {
                'data': row,
                'value': $(row).find('field[name=tbSale.Cinema]').text(),
                'result': $(row).find('field[name=tbSale.Cinema]').text()
            }
        });
    }

    function setupItems() {
        //$('.comboboxItem').wrapInner($('<span></span>'));
        
        $('.comboboxItem').click(function(e) {
            $('#slc_theater label').hide();
        });
        
    }
    $('.comboboxDropDownContainer').bind('focus', function() {
        $('.comboboxDropDownContainer').addClass('open');
    });
    $('.comboboxContainer').bind('focus', function() {
        $('.comboboxDropDownContainer').removeClass('open');
    });
    
    setupItems();

    function build_list(select) {
        patch = $('#combobox_patch');
        $(select).hide();
        if (!$('.comboboxDropDownContainer').length)
        {
            dropdown = $('<div class="comboboxContainer"></div>').insertAfter(select);
            ul = $('<ul class="comboboxDropDownContainer"></ul>').appendTo(dropdown);
        }
        $('.comboboxDropDownContainer').html('');
        $('option', select).each(function(i) {
            text = $(this).text();
            item = $('<li class="comboboxItem"></li>');
            $(item).append('<span rel="'+$(this).val()+'">'+text+'</span>');
            $(ul).append(item);
        });
        $('li', ul).hover(function() {
            $(this).addClass('comboboxItemHover');
        }, function() {
            $(this).removeClass('comboboxItemHover');
        });
        $('span',ul).click(function(e) {
            $(select).val($(this).attr('rel'));
            $('p',patch).text($(select).val());
            $(dropdown).hide();
            $(patch).show();
        });
        $(dropdown).show();
    }
    
    $('#slc_theater label,#combobox_patch p').click(function() {
        hostname = window.location.hostname;
        url = 'http://'+hostname+'/nick/cinema_group.jsp';
        $.get(url, {
            'xml': true,
            'city': function() { return $('input[name=city]').val(); },
            'idnick': function() { return $('input[name=idFilm]').val(); }
        }, function(data, status) {
            select = $('#slc_theater select');
            rows = parseXMLTheaters(data);
            $('#slc_theater select').html('');
            $(rows).each(function() {
                option = $('<option value="'+this.value+'">'+this.result+'</option>');
                $(select).append(option);
            });
            build_list(select);
            setupItems();
        });
    });
    
});