/**
 * Select users popup implementation
 */
App.widgets.SelectUsersPopup = function() {
  
  // Public interface
  return {
    
    /**
     * Show select users dialog
     *
     * @param Object all_users
     * @param array selected_users
     * @param Function on_ok
     */
    open : function(all_users, selected_users, on_ok) {
      var popup_content = $('<div class="select_users_widget_popup">' + 
        '<table class="select_users_layout">' + 
          '<tr>' + 
            '<td class="users_list"></td>' + 
            '<td class="divider"><img src="' + App.Wireframe.Utils.imageUrl('/icons/12x12/proceed.png', 'environment') + '" alt="" /></td>' + 
            '<td class="selected_users">' + 
              '<div class="selected_users_list">' + 
                '<p>' + App.lang('Selected users') + ':</p>' + 
                '<div class="selected_users_list_container"><table></table></div>' + 
              '</div>' + 
              '<p class="no_users_selected">' + App.lang('No users selected') + '<br /><br /><span>' + App.lang('Select users from the list on the left and click the arrow button to mark them as selected') + '</span></p>' + 
            '</td>' + 
          '</tr>' + 
        '</table>' + 
      '</div>');
      
      var users_list_row = popup_content.find('td.users_list');
      var selected_users_list = popup_content.find('td.selected_users div.selected_users_list');
      var selected_users_table = popup_content.find('td.selected_users div.selected_users_list_container table');
      var no_users_selected = popup_content.find('td.selected_users p.no_users_selected');
      
      var available_users_select = $('<select multiple="multiple"></select>');
      
      for(var company_name in all_users) {
        var company_group = $('<optgroup></optgroup>').attr('label', company_name).appendTo(available_users_select);
        
        for(var user_id in all_users[company_name]) {
          $('<option value="' + user_id + '">' + all_users[company_name][user_id].clean() + '</option>').appendTo(company_group);
        } // for
      } // for
      
      if(available_users_select.find('optgroup').length > 0) {
        users_list_row.append('<p>' + App.lang('Available users') + '</p>').append(available_users_select);
      } else {
        users_list_row.append('<p class="details">' + App.lang('No users here') + '</p>');
      } // if
      
      /**
       * Mark specific user as selected
       *
       * @param Integer user_id
       * @param String user_name
       */
      var select_user = function(user_id, user_name) {
        var existing_row = selected_users_table.find('tr[user_id=' + user_id + ']');
        
        if(existing_row.length > 0) {
          existing_row.find('td').highlightFade();
        } else {
          var user_row = $('<tr user_id="' + user_id + '">' +
            '<td class="display_name">' + user_name.clean() + '</td>' + 
            '<td class="remove"><img src="' + App.Wireframe.Utils.imageUrl('/icons/12x12/delete.png', 'environment') + '" alt="" title="' + App.lang('Remove from the list') + '" /></td>' + 
          '</tr>').appendTo(selected_users_table);
          
          user_row.find('td.remove img').click(function() {
            user_row.remove();
            
            if(selected_users_table.find('tr').length > 0) {
              selected_users_table.oddEven('tr');
            } else {
              selected_users_list.hide();
              no_users_selected.show();
            } // if
          });
          
          selected_users_list.show();
          no_users_selected.hide();
        } // if
      };
      
      // Set initial selected users
      for(var selected_user_id in selected_users) {
        select_user(selected_user_id, selected_users[selected_user_id]);
      } // for
      
      // Initial display of selected users table and no users selected paragraph
      if(selected_users_table.find('tr').length > 0) {
        selected_users_table.oddEven('tr');
        no_users_selected.hide();
      } else {
        selected_users_list.hide();
      } // if
      
      /**
       * Set users from available list as selected
       */
      var available_to_selected = function() {
        available_users_select.find('option:selected').each(function() {
          var option = $(this);
          
          select_user(option.attr('value'), option.text());
        });
        
        selected_users_table.oddEven('tr');
      };
      
      popup_content.find('td.divider img').click(available_to_selected);
      available_users_select.dblclick(available_to_selected);
      
      App.Wireframe.ModalDialog.show('select_users_popup', App.lang('Select Users'), popup_content, { 
        buttons : [{
          label: App.lang('Ok'),
          callback: function() {
            if(typeof(on_ok) == 'function') {
              var selected_users = {};
              
              selected_users_table.find('tr').each(function() {
                var row = $(this);
                
                selected_users[parseInt(row.attr('user_id'))] = row.text();
              });
              
              on_ok(selected_users);
            } // if
          } // callback            
        }, {
          label: App.lang('Cancel'),
          callback: null
        }],
        width: 630
      });
      
    }
    
  };
  
}();