function init(){
    $('#tab-container .tab').click(function(){
        sg.sound('success-low');
    });

    metaBoton('metaBoton1');
}

//  Carlos U
//  Meta boton 
// CALL AFTER INIT
function metaBoton(idContainer){

    //Config 
    var BOTON_MARGIN_TOP= 10;
    var CENTER_TEXT  = true; // CENTER all OR Put in FRONT

    var container = $('#'+idContainer);
    var containerPos= container.offset();
    var buttons = container.find('div[btkey]');
    var BOTON_WIDTH_EXTRA = container.width()*0.05; // 5 % of container 
    var BOTON_WIDTH = container.width()*0.35; // 35% of container
    var vCenter =  container.height() / 2;

    //console.log(container.height());
    //console.log('CONTENEDOR.top :'+ containerPos.top );

    buttons.each(function (i){
        // identificador del tag boton
        botonKey = $(this).attr('btkey'); 
        botonWidth = $(this).width();
        botonHeight = $(this).outerHeight() + BOTON_MARGIN_TOP;
        botonColorFondo = $(this).css('background-color');
        botonTopPos = i * botonHeight;
        $(this).css('top', botonTopPos );  // Set vertical pos of button

        // reset Positions and width 
        $('div[btkey]').css( 'width', BOTON_WIDTH);
        // reset position 
        $('div[txtkey]').css({ 'left': 0, 'visibility' :  'hidden'});

        //Texto asociado del boton y su re-posicion
        txtBoton =  $('div[txtkey="' + botonKey + '"]');
        txtHeight = txtBoton.outerHeight();


        //console.log('vcenter :'+ vCenter );
        //console.log('top :'+ botonTopPos );
        //console.log('txt :'+ txtBoton.length );

        if( CENTER_TEXT ){
                txtBoton.css({'top': 0,  'border-color': botonColorFondo });
        }else{

            if ( ( botonTopPos + botonHeight/2) < vCenter){  //   From Top to boottom
                //console.log('down');
                txtBoton.css({'top': botonTopPos,  'border-color': botonColorFondo });
            }
            else{  
                //console.log('up');
                txtBoton.css({'top': ( botonTopPos - txtHeight + botonHeight/2 ),  'border-color': botonColorFondo });
            }

        }
        $(this).click(function (){
            // reset Positions and width 
            $('div[txtkey]').css({ 'left': 0, 'visibility' :  'hidden'});
            $('div[txtkey]').removeClass('animated bounceInLeft');
            $('div[btkey]').css( 'width', BOTON_WIDTH);

            botonKey = $(this).attr('btkey'); 
            $(this).css('width', botonWidth + BOTON_WIDTH_EXTRA + 10); //overlap 10 pixels

            txtBoton =  $('div[txtkey="' + botonKey + '"]');
            txtBoton.css({'left': botonWidth + BOTON_WIDTH_EXTRA , 'visibility': 'visible'});  
            txtBoton.addClass('animated bounceInLeft');


        });

    });

}
