## -*- coding: utf-8 -*-
<%inherit file="/base/base.html"/>

<%def name="title()">
    ${_('Edit users group')} ${c.users_group.users_group_name} - ${c.rhodecode_name}
</%def>

<%def name="breadcrumbs_links()">
    ${h.link_to(_('Admin'),h.url('admin_home'))} 
    &raquo; 
    ${h.link_to(_('UsersGroups'),h.url('users_groups'))} 
    &raquo;
    ${_('edit')} "${c.users_group.users_group_name}"
</%def>

<%def name="page_nav()">
    ${self.menu('admin')}
</%def>

<%def name="main()">
<div class="box">
    <!-- box / title -->
    <div class="title">
        ${self.breadcrumbs()}       
    </div>
    <!-- end box / title -->
    ${h.form(url('users_group', id=c.users_group.users_group_id),method='put', id='edit_users_group')}
    <div class="form">
        <!-- fields -->
	        <div class="fields">
	             <div class="field">
	                <div class="label">
	                    <label for="users_group_name">${_('Group name')}:</label>
	                </div>
	                <div class="input">
	                    ${h.text('users_group_name',class_='small')}
	                </div>
	             </div>
	            
	             <div class="field">
	                <div class="label label-checkbox">
	                    <label for="users_group_active">${_('Active')}:</label>
	                </div>
	                <div class="checkboxes">
	                    ${h.checkbox('users_group_active',value=True)}
	                </div>
	             </div>
	            <div class="field">
                    <div class="label">
                        <label for="users_group_active">${_('Members')}:</label>
                    </div>
                    <div class="select">
	                    <table> 
	                            <tr>
	                                <td>
	                                    <div>
	                                        <div style="float:left">
	                                            <div class="text" style="padding: 0px 0px 6px;">${_('Choosen group members')}</div>
	                                            ${h.select('users_group_members',[x[0] for x in c.group_members],c.group_members,multiple=True,size=8,style="min-width:210px")}
	                                           <div  id="remove_all_elements" style="cursor:pointer;text-align:center">
	                                               ${_('Remove all elements')}
	                                               <img alt="remove" style="vertical-align:text-bottom" src="/images/icons/arrow_right.png"/>
	                                           </div>
	                                        </div>
	                                        <div style="float:left;width:20px;padding-top:50px">
	                                            <img alt="add" id="add_element" 
	                                                style="padding:2px;cursor:pointer" 
	                                                src="/images/icons/arrow_left.png"/>
	                                            <br />
	                                            <img alt="remove" id="remove_element" 
	                                                style="padding:2px;cursor:pointer" 
	                                                src="/images/icons/arrow_right.png"/>
	                                        </div>
	                                        <div style="float:left">
	                                             <div class="text" style="padding: 0px 0px 6px;">${_('Available members')}</div>
	                                             ${h.select('available_members',[],c.available_members,multiple=True,size=8,style="min-width:210px")}
	                                             <div id="add_all_elements" style="cursor:pointer;text-align:center">
	                                                   <img alt="add" style="vertical-align:text-bottom" src="/images/icons/arrow_left.png"/>
	                                                    ${_('Add all elements')}
	                                             </div>	                                        
	                                        </div>
	                                    </div>
	                                </td>           
	                            </tr>       
	                    </table>                    
                    </div>	            

                </div>			        
                <div class="buttons">
                  ${h.submit('save','save',class_="ui-button")}
                </div>             
            </div>          
    </div>        
${h.end_form()}        
</div>
    
<script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function(){
            var D = YAHOO.util.Dom;
            var E = YAHOO.util.Event;
            
            //definition of containers ID's
            var available_container = 'available_members';
            var selected_container = 'users_group_members';
            //form containing containers id
            var form_id = 'edit_users_group';
            
            //temp container for selected storage.
            var cache = new Array();
            var c =  D.get(selected_container);
            
            //get only selected options for further fullfilment
            for(var i = 0;node =c.options[i];i++){
                if(node.selected){
                    //push selected to my temp storage left overs :)
                    cache.push(node);
                }   
            }
            
            //clear 'selected' select
            c.options.length = 0;

            //fill it with remembered options
            for(var i = 0;node = cache[i];i++){
                c.options[i]=new Option(node.text, node.value, false, false);
            }
            
            function prompts_action_callback(e){
                
                var choosen = D.get(selected_container);  
                var available = D.get(available_container);
                
                //get checked and unchecked options from field
                function get_checked(from_field){
                    //temp container for storage.
                    var sel_cache = new Array();
                    var oth_cache = new Array();
                    
                    for(var i = 0;node = from_field.options[i];i++){
                        if(node.selected){
                            //push selected fields :)
                            sel_cache.push(node);
                        }
                        else{
                        	oth_cache.push(node)
                        }
                    }                    
                    
                    return [sel_cache,oth_cache]
                }
                
                //fill the field with given options
                function fill_with(field,options){
                	//clear firtst
                	field.options.length=0;
                    for(var i = 0;node = options[i];i++){
                            field.options[i]=new Option(node.text, node.value, 
                                    false, false);
                    }
                	
                }
                //adds to current field
                function add_to(field,options){
                    for(var i = 0;node = options[i];i++){
                            field.appendChild(new Option(node.text, node.value, 
                                    false, false));
                    }
                }
                
                // add action
                if (this.id=='add_element'){
                    var c = get_checked(available);
                    add_to(choosen,c[0]);
                    fill_with(available,c[1]);
                }
                // remove action
                if (this.id=='remove_element'){
                    var c = get_checked(choosen);
                    add_to(available,c[0]);
                    fill_with(choosen,c[1]);             
                }                   
                // add all elements
                if(this.id=='add_all_elements'){
                    for(var i=0; node = available.options[i];i++){
                            choosen.appendChild(new Option(node.text, 
                                    node.value, false, false));
                    }
                    available.options.length = 0;
                }
                //remove all elements
                if(this.id=='remove_all_elements'){
                    for(var i=0; node = choosen.options[i];i++){
                        available.appendChild(new Option(node.text, 
                                node.value, false, false));
                    }
                    choosen.options.length = 0;                	
                }
                
            }
            
    
            E.addListener(['add_element','remove_element',
                           'add_all_elements','remove_all_elements'],'click',
                           prompts_action_callback)

            E.addListener(form_id,'submit',function(){
                var choosen = D.get(selected_container);
                for (var i = 0; i < choosen.options.length; i++) {
                    choosen.options[i].selected = 'selected';
                }
            })  
        });
</script>    

</%def>