$(document).ready(function(){
    
    var icon = "info";
    var buttonOptions={
        checkButtonset:true,
        icon:$.ui.classnameoptions?'':'ui-icon-info'
    };
    function clickCounter(){
        var label = $(this).find('.ui-button-label');
        var count = label.html().match(/\d+/);
        if(null!==count){
            label.html(label.html().replace(/(\d+)/,1+parseInt(count[0])))
        }else{
            label.append(' (#1 )')
        }
    }
    //$('.ui-button').click(clickCounter).button(buttonOptions);
    $('.ui-button').button(buttonOptions);

    if(! $.ui.classnameoptions){ //-- some additional settings if classnameoptions isn't used (a real pain for end user and so i won't set up all icons here for the demo in this mode)
        $('.ui-button').filter('[class*=toggle]')
            .button('option','buttonMode','toggle')
            .filter('[class*=active]')
            .button('option','active',true);
        $('.ui-buttonset-i').buttonset('option','orientation','i').find('.ui-button').button('option','orientation','auto');
        $('.ui-buttonset-t').buttonset('option','orientation','t').find('.ui-button').button('option','orientation','auto');
        $('.ui-buttonset-small').buttonset('option','size','small').find('.ui-button').button('option','size','auto');
    }

    $('#settingBar select').change(function(){
        if($(this).is('#bodySizeSelector'))
            return $('body').css('fontSize',$(this).val());
        $('.ui-button:gt(19)').button('option',$(this).attr('name'),$(this).val());
    });
    $('select[class*=ui-buttonset]').selectbuttonset().filter(':gt(0)').change();
    //$('#switcher').themeswitcher();
    $('.ui-button-toggle:gt(19)').click(function(){
        var label = $(this).find('.ui-button-label');
        if( label.html().match(/\s+o[fn]f?$/) )
            label.html(label.html().replace(/\s+o[fn]f?$/,$(this).button('option','active')?' on':' off'));
        else
            label.append($(this).button('option','active')?' on':' off');
    })
    $('#toggleUnable').click(function(){$('#unable').button('option','disabled',$(this).button('option','active')?true:false);});
    $('#defaultStateToggler').click(function(){
        $(this).prev('.ui-button').button('option','overrideDefaultState',$(this).button('option','active')?'':false);
    });
});

$(document).ready(function() {
    $(".boton").button('option','orientation','t');
});