window.addEvent('domready', function() {

    var tabbers = $$('#tabberV');
    tabbers.each(function(el, i){
        var tabs = el.getFirst('.tabs').getChildren('.tab');
        tabs.each(function(el,i){
            el.getFirst('a').addEvent('click', function(e) {
                var region = $('venuesRegionSel').get('value');
                if(e) new Event(e).stop();
                $$(tabs).removeClass('activeTab');
                el.addClass('activeTab');
                retrieveContent2(this, region, 1, 'tpanel', function(){});
            });
        });
    })
    var tabbersS = $$('#tabberS');
    tabbersS.each(function(el, i){
        var tabs = el.getFirst('.tabs').getChildren('.tab');
        tabs.each(function(el,i){
            el.getFirst('a').addEvent('click', function(e) {
                var region = $('serviceRegionSel').get('value');
                if(e) new Event(e).stop();
                $$(tabs).removeClass('activeTab');
                el.addClass('activeTab');
                retrieveContent2(this, region, 0, 'tpanelS', function(){});
            });
        });
    })

    //our event function
    var handler = function() {
       var tab;
       $$('#tabberV .tabs .tab').each(function(el, i){
           if(el.hasClass('activeTab')) { 
               tab = el.getFirst('a');
           }
       });
       var region = $('venuesRegionSel').get('value');
       retrieveContent2(tab, region, 1, 'tpanel', function(){});
    };
    //add the event listener
    var select = document.getElementById('venuesRegionSel');
    if(select.addEventListener){
        select.addEventListener('change',handler,false);
    }
    else {
        select.attachEvent('onchange',handler,false);
    }
    //our event function
    var handler = function() {
       var tab;
       $$('#tabberS .tabs .tab').each(function(el, i){
           if(el.hasClass('activeTab')) { 
               tab = el;
           }
       });
       var region = $('serviceRegionSel').get('value');
       retrieveContent2(tab, region, 0, 'tpanelS', function(){});
    };
    //add the event listener
    var select = document.getElementById('serviceRegionSel');
    if(select.addEventListener){
        select.addEventListener('change',handler,false);
    }
    else {
        select.attachEvent('onchange',handler,false);
    }

});

function retrieveContent2(el, region, isvenue, pblock, callbacks){
	var panel = el.get('rel');
        var featured = 0;
        if (!panel || panel == 'featured') {
            featured = 1;
        }
	var profileFX = new Fx.Morph(pblock);
	var url = el.get('href');
        //This code will send a data object via a GET request and alert the retrieved data.
        var jsonRequest = new Request.JSON({url: "http://www.venuesonline.com/cgi-bin/data/ajax.cgi", 
            onSuccess: function(json){
                $(pblock).set('html',json.data.html);
                profileFX.start({
                    'opacity': 1
                });
                if (isvenue) {
                    $$('.loading').morph({ 'opacity': 0 });
                }
                else {
                    $$('.loadingS').morph({ 'opacity': 0 });
                }
            }
        });
        if (isvenue) {
            var load = new Element('span', {'class': 'loading'});
            load.inject('tabberV', 'top');
        }
        else {
            var load = new Element('span', {'class': 'loadingS'});
            load.inject('tabberS', 'top');
        }

	profileFX.start({
		'opacity': 0
	}).chain(function(){
            jsonRequest.get({'ajax': '1', 'venue': isvenue, 'region' : region, 'featured' : featured });
	});
}