
$(document).ready(
  function() {
    $('.my-skinnable-select').each(
      function(i) {
        selectContainer = $(this);
        // Remove the class for non JS browsers
        selectContainer.removeClass('my-skinnable-select');
        // Add the class for JS Browers
        selectContainer.addClass('skinned-select');
        // Find the select box
        selectContainer.children().before('<div class="select-text">a</div>').each(
          function() {
            $(this).prev().text(this.options[0].innerHTML)
          }
        );
        // Store the parent object
        var parentTextObj = selectContainer.children().prev();
        // As we click on the options
        selectContainer.children().click(function() {
          // Set the value of the html
          if( this.tagName == 'SELECT' )
            parentTextObj.text(this.options[this.selectedIndex].innerHTML);
        })
         selectContainer.find('select').css('visibility', "visible");
      }
    );

    $('.select-text').each(function(i) {
        $(this).css( 'width' , $(this).parent().find('select').outerWidth() );
        //$(this).html( $(this).parent().find('select option:selected').text() );
    });

    $('.skinned-select select').bind('change', function() {
       // alert("bind");
        reloadTextSkinnedSelect( this.id );
    });

    // przyklady wywolania pojedynczego
    //reloadTextSkinnedSelect('#dzieci');
    //reloadTextSkinnedSelect('dzieci');
    
    // wszystkie
    reloadTextSkinnedSelect();
  }
);

function reloadTextSkinnedSelect(id){
    if( typeof( id ) == "undefined" ){ // wszystkie
        //alert( $('.skinned-select select').length );
        $('.skinned-select select').each(function(i) {
            $(this).parent().find('div.select-text').html( $(this).find('option:selected').text() );
        });        
    }else{ // tylko jeden
        if( id.indexOf('#') == 0 ){
            id = id.substr(1);
        }
        if( $('.skinned-select select#'+id).length ){
            $('.skinned-select #'+id).parent().find('div.select-text').html( $('.skinned-select #'+id + ' option:selected').text() );
        }
    }
}

