return _gravatar(displayfname + " " + displaylname + " " + displaynname, oResultData.gravatar_lnk);

            } else {

                return '';

            }

        };

    membersAC.formatResult = custom_formatter;

    ownerAC.formatResult = custom_formatter;

    var myHandler = function (sType, aArgs) {

    		var nextId = divid.split('perm_new_member_name_')[1];

            var myAC = aArgs[0]; // reference back to the AC instance

            var elLI = aArgs[1]; // reference to the selected LI element

            var oData = aArgs[2]; // object literal of selected item's result data

            //fill the autocomplete with value

            if (oData.nname != undefined) {

                //users

                myAC.getInputEl().value = oData.nname;

                YUD.get('perm_new_member_type_'+nextId).value = 'user';

            } else {

                //groups

                myAC.getInputEl().value = oData.grname;

                YUD.get('perm_new_member_type_'+nextId).value = 'users_group';

            }

        };

    membersAC.itemSelectEvent.subscribe(myHandler);

    if(ownerAC.itemSelectEvent){

    	ownerAC.itemSelectEvent.subscribe(myHandler);

    }

    return {

        memberDS: memberDS,

        ownerDS: ownerDS,

        membersAC: membersAC,

        ownerAC: ownerAC,

    };

}

var MentionsAutoComplete = function (divid, cont, users_list, groups_list) {

    var myUsers = users_list;

    var myGroups = groups_list;

    // Define a custom search function for the DataSource of users

    var matchUsers = function (sQuery) {

    	    var org_sQuery = sQuery;

    	    if(this.mentionQuery == null){

    	    	return []    	    	

    	    }

    	    sQuery = this.mentionQuery;

            // Case insensitive matching

            var query = sQuery.toLowerCase();

            var i = 0;

            var l = myUsers.length;

            var matches = [];

            // Match against each name of each contact

            for (; i < l; i++) {

                contact = myUsers[i];

                if (((contact.fname+"").toLowerCase().indexOf(query) > -1) || 

                	 ((contact.lname+"").toLowerCase().indexOf(query) > -1) || 

                	 ((contact.nname) && ((contact.nname).toLowerCase().indexOf(query) > -1))) {

                    matches[matches.length] = contact;

                }

            }

            return matches

        };

    //match all

    var matchAll = function (sQuery) {

            u = matchUsers(sQuery);

            return u

        };

    // DataScheme for owner

    var ownerDS = new YAHOO.util.FunctionDataSource(matchUsers);

    ownerDS.responseSchema = {

        fields: ["id", "fname", "lname", "nname", "gravatar_lnk"]

    };

    // Instantiate AutoComplete for mentions

    var ownerAC = new YAHOO.widget.AutoComplete(divid, cont, ownerDS);

    ownerAC.useShadow = false;

    ownerAC.resultTypeList = false;

    ownerAC.suppressInputUpdate = true;

    ownerAC.animVert = false;

    ownerAC.animHoriz = false;    

    ownerAC.animSpeed = 0.1;

    // Helper highlight function for the formatter

    var highlightMatch = function (full, snippet, matchindex) {

            return full.substring(0, matchindex) 

            + "<span class='match'>" 

            + full.substr(matchindex, snippet.length) 

            + "</span>" + full.substring(matchindex + snippet.length);

        };

    // Custom formatter to highlight the matching letters

    ownerAC.formatResult = function (oResultData, sQuery, sResultMatch) {

		    var org_sQuery = sQuery;

		    if(this.dataSource.mentionQuery != null){

		    	sQuery = this.dataSource.mentionQuery;		    	

		    }

            var query = sQuery.toLowerCase();

            var _gravatar = function(res, em, group){

            	if (group !== undefined){

            		em = '/images/icons/group.png'

            	}

            	tmpl = '<div class="ac-container-wrap"><img class="perm-gravatar-ac" src="{0}"/>{1}</div>'

            	return tmpl.format(em,res)

            }

            if (oResultData.nname != undefined) {

                var fname = oResultData.fname || "";

                var lname = oResultData.lname || "";

                var nname = oResultData.nname;

                // Guard against null value

                var fnameMatchIndex = fname.toLowerCase().indexOf(query),

                    lnameMatchIndex = lname.toLowerCase().indexOf(query),

                    nnameMatchIndex = nname.toLowerCase().indexOf(query),

                    displayfname, displaylname, displaynname;

                if (fnameMatchIndex > -1) {

                    displayfname = highlightMatch(fname, query, fnameMatchIndex);

                } else {

                    displayfname = fname;

                }

                if (lnameMatchIndex > -1) {

                    displaylname = highlightMatch(lname, query, lnameMatchIndex);

                } else {

                    displaylname = lname;

                }

                if (nnameMatchIndex > -1) {

                    displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";

                } else {

                    displaynname = nname ? "(" + nname + ")" : "";

                }

                return _gravatar(displayfname + " " + displaylname + " " + displaynname, oResultData.gravatar_lnk);

            } else {

                return '';

            }

        };

    if(ownerAC.itemSelectEvent){

    	ownerAC.itemSelectEvent.subscribe(function (sType, aArgs) {

            var myAC = aArgs[0]; // reference back to the AC instance

            var elLI = aArgs[1]; // reference to the selected LI element

            var oData = aArgs[2]; // object literal of selected item's result data

            //fill the autocomplete with value

            if (oData.nname != undefined) {

                //users

            	//Replace the mention name with replaced

            	var re = new RegExp();

            	var org = myAC.getInputEl().value;

            	var chunks = myAC.dataSource.chunks

            	// replace middle chunk(the search term) with actuall  match

            	chunks[1] = chunks[1].replace('@'+myAC.dataSource.mentionQuery,

            								  '@'+oData.nname+' ');

                myAC.getInputEl().value = chunks.join('')

                YUD.get(myAC.getInputEl()).focus(); // Y U NO WORK !?

            } else {

                //groups

                myAC.getInputEl().value = oData.grname;

                YUD.get('perm_new_member_type').value = 'users_group';

            }

        });

    }

    // in this keybuffer we will gather current value of search !

    // since we need to get this just when someone does `@` then we do the

    // search

    ownerAC.dataSource.chunks = [];

    ownerAC.dataSource.mentionQuery = null;

    ownerAC.get_mention = function(msg, max_pos) {

    	var org = msg;

    	var re = new RegExp('(?:^@|\s@)([a-zA-Z0-9]{1}[a-zA-Z0-9\-\_\.]+)$')

    	var chunks  = [];

    	// cut first chunk until curret pos

		var to_max = msg.substr(0, max_pos);		

		var at_pos = Math.max(0,to_max.lastIndexOf('@')-1);

		var msg2 = to_max.substr(at_pos);

		chunks.push(org.substr(0,at_pos))// prefix chunk

		chunks.push(msg2)                // search chunk

		chunks.push(org.substr(max_pos)) // postfix chunk

		// clean up msg2 for filtering and regex match

		var msg2 = msg2.lstrip(' ').lstrip('\n');

		if(re.test(msg2)){

			var unam = re.exec(msg2)[1];

			return [unam, chunks];

		}

		return [null, null];

    };

    if (ownerAC.textboxKeyUpEvent){

		ownerAC.textboxKeyUpEvent.subscribe(function(type, args){

			var ac_obj = args[0];

			var currentMessage = args[1];

			var currentCaretPosition = args[0]._elTextbox.selectionStart;

			var unam = ownerAC.get_mention(currentMessage, currentCaretPosition); 

			var curr_search = null;

			if(unam[0]){

				curr_search = unam[0];

			}

			ownerAC.dataSource.chunks = unam[1];

			ownerAC.dataSource.mentionQuery = curr_search;

		})

	}	

    return {

        ownerDS: ownerDS,

        ownerAC: ownerAC,

    };

}

var addReviewMember = function(id,fname,lname,nname,gravatar_link){

	var members  = YUD.get('review_members');

	var tmpl = '<li id="reviewer_{2}">'+

    '<div class="reviewers_member">'+

      '<div class="gravatar"><img alt="gravatar" src="{0}"/> </div>'+

      '<div style="float:left">{1}</div>'+

      '<input type="hidden" value="{2}" name="review_members" />'+

      '<span class="delete_icon action_button" onclick="removeReviewMember({2})"></span>'+

    '</div>'+

    '</li>'	;

    var displayname = "{0} {1} ({2})".format(fname,lname,nname);

	var element = tmpl.format(gravatar_link,displayname,id);

	// check if we don't have this ID already in

	var ids = [];

	var _els = YUQ('#review_members li');

	for (el in _els){

		ids.push(_els[el].id)

	}

	if(ids.indexOf('reviewer_'+id) == -1){

		//only add if it's not there

		members.innerHTML += element;

	}

}

var removeReviewMember = function(reviewer_id, repo_name, pull_request_id){

	var el = YUD.get('reviewer_{0}'.format(reviewer_id));

	if (el.parentNode !== undefined){

		el.parentNode.removeChild(el);

	}

}

var updateReviewers = function(reviewers_ids, repo_name, pull_request_id){

	if (reviewers_ids === undefined){

  	  var reviewers_ids = [];

	  var ids = YUQ('#review_members input');

	  for(var i=0; i<ids.length;i++){

		  var id = ids[i].value

		  reviewers_ids.push(id);

	  }		

	}

	var url = pyroutes.url('pullrequest_update', {"repo_name":repo_name,

												  "pull_request_id": pull_request_id});

	var postData = {'_method':'put',

			        'reviewers_ids': reviewers_ids};

	var success = function(o){

		window.location.reload();

	}

	ajaxPOST(url,postData,success);

}

var PullRequestAutoComplete = function (divid, cont, users_list, groups_list) {

    var myUsers = users_list;

    var myGroups = groups_list;

    // Define a custom search function for the DataSource of users

    var matchUsers = function (sQuery) {

            // Case insensitive matching

            var query = sQuery.toLowerCase();

            var i = 0;

            var l = myUsers.length;

            var matches = [];

            // Match against each name of each contact

            for (; i < l; i++) {

                contact = myUsers[i];

                if (((contact.fname+"").toLowerCase().indexOf(query) > -1) || 

                   	 ((contact.lname+"").toLowerCase().indexOf(query) > -1) || 

                   	 ((contact.nname) && ((contact.nname).toLowerCase().indexOf(query) > -1))) {

                       matches[matches.length] = contact;

                   }

            }

            return matches;

        };

    // Define a custom search function for the DataSource of userGroups

    var matchGroups = function (sQuery) {

            // Case insensitive matching

            var query = sQuery.toLowerCase();

            var i = 0;

            var l = myGroups.length;

            var matches = [];

            // Match against each name of each contact

            for (; i < l; i++) {

                matched_group = myGroups[i];

                if (matched_group.grname.toLowerCase().indexOf(query) > -1) {

                    matches[matches.length] = matched_group;

                }

            }

            return matches;

        };

    //match all

    var matchAll = function (sQuery) {

            u = matchUsers(sQuery);

            return u

        };

    // DataScheme for owner

    var ownerDS = new YAHOO.util.FunctionDataSource(matchUsers);

    ownerDS.responseSchema = {

        fields: ["id", "fname", "lname", "nname", "gravatar_lnk"]

    };

    // Instantiate AutoComplete for mentions

    var reviewerAC = new YAHOO.widget.AutoComplete(divid, cont, ownerDS);

    reviewerAC.useShadow = false;

    reviewerAC.resultTypeList = false;

    reviewerAC.suppressInputUpdate = true;

    reviewerAC.animVert = false;

    reviewerAC.animHoriz = false;    

    reviewerAC.animSpeed = 0.1;

    // Helper highlight function for the formatter

    var highlightMatch = function (full, snippet, matchindex) {

            return full.substring(0, matchindex) 

            + "<span class='match'>" 

            + full.substr(matchindex, snippet.length) 

            + "</span>" + full.substring(matchindex + snippet.length);

        };

    // Custom formatter to highlight the matching letters

    reviewerAC.formatResult = function (oResultData, sQuery, sResultMatch) {

		    var org_sQuery = sQuery;

		    if(this.dataSource.mentionQuery != null){

		    	sQuery = this.dataSource.mentionQuery;		    	

		    }

            var query = sQuery.toLowerCase();

            var _gravatar = function(res, em, group){

            	if (group !== undefined){

            		em = '/images/icons/group.png'

            	}

            	tmpl = '<div class="ac-container-wrap"><img class="perm-gravatar-ac" src="{0}"/>{1}</div>'

            	return tmpl.format(em,res)

            }

            if (oResultData.nname != undefined) {

                var fname = oResultData.fname || "";

                var lname = oResultData.lname || "";

                var nname = oResultData.nname;

                // Guard against null value

                var fnameMatchIndex = fname.toLowerCase().indexOf(query),

                    lnameMatchIndex = lname.toLowerCase().indexOf(query),

                    nnameMatchIndex = nname.toLowerCase().indexOf(query),

                    displayfname, displaylname, displaynname;

                if (fnameMatchIndex > -1) {

                    displayfname = highlightMatch(fname, query, fnameMatchIndex);

                } else {

                    displayfname = fname;

                }

                if (lnameMatchIndex > -1) {

                    displaylname = highlightMatch(lname, query, lnameMatchIndex);

                } else {

                    displaylname = lname;

                }

                if (nnameMatchIndex > -1) {

                    displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";

                } else {

                    displaynname = nname ? "(" + nname + ")" : "";

                }

                return _gravatar(displayfname + " " + displaylname + " " + displaynname, oResultData.gravatar_lnk);

            } else {

                return '';

            }

        };

    //members cache to catch duplicates

    reviewerAC.dataSource.cache = [];

    // hack into select event

    if(reviewerAC.itemSelectEvent){

    	reviewerAC.itemSelectEvent.subscribe(function (sType, aArgs) {

            var myAC = aArgs[0]; // reference back to the AC instance

            var elLI = aArgs[1]; // reference to the selected LI element

            var oData = aArgs[2]; // object literal of selected item's result data

            //fill the autocomplete with value

            if (oData.nname != undefined) {

            	addReviewMember(oData.id, oData.fname, oData.lname, oData.nname,

            					oData.gravatar_lnk);

            	myAC.dataSource.cache.push(oData.id);

            	YUD.get('user').value = '' 

            }

    	});        

    }

    return {

        ownerDS: ownerDS,

        reviewerAC: reviewerAC,

    };

}

/**

 * QUICK REPO MENU

 */

var quick_repo_menu = function(){

    YUE.on(YUQ('.quick_repo_menu'),'mouseenter',function(e){

            var menu = e.currentTarget.firstElementChild.firstElementChild;

            if(YUD.hasClass(menu,'hidden')){

                YUD.replaceClass(e.currentTarget,'hidden', 'active');

                YUD.replaceClass(menu, 'hidden', 'active');

            }

        })

    YUE.on(YUQ('.quick_repo_menu'),'mouseleave',function(e){

            var menu = e.currentTarget.firstElementChild.firstElementChild;

            if(YUD.hasClass(menu,'active')){

                YUD.replaceClass(e.currentTarget, 'active', 'hidden');

                YUD.replaceClass(menu, 'active', 'hidden');

            }

        })

};

/**

 * TABLE SORTING

 */

// returns a node from given html;

var fromHTML = function(html){

	  var _html = document.createElement('element');

	  _html.innerHTML = html;

	  return _html;

}

var get_rev = function(node){

    var n = node.firstElementChild.firstElementChild;

    if (n===null){

        return -1

    }

    else{

        out = n.firstElementChild.innerHTML.split(':')[0].replace('r','');

        return parseInt(out);

    }

}

var get_name = function(node){

	 var name = node.firstElementChild.children[2].innerHTML; 

	 return name

}

var get_group_name = function(node){

	var name = node.firstElementChild.children[1].innerHTML;

	return name

}

var get_date = function(node){

	var date_ = YUD.getAttribute(node.firstElementChild,'date');

	return date_

}

var get_age = function(node){

	return node

}

var get_link = function(node){

	return node.firstElementChild.text;

}

var revisionSort = function(a, b, desc, field) {

	  var a_ = fromHTML(a.getData(field));

	  var b_ = fromHTML(b.getData(field));

	  // extract revisions from string nodes 

	  a_ = get_rev(a_)

	  b_ = get_rev(b_)

	  var comp = YAHOO.util.Sort.compare;

	  var compState = comp(a_, b_, desc);

	  return compState;

};

var ageSort = function(a, b, desc, field) {

    var a_ = fromHTML(a.getData(field));

    var b_ = fromHTML(b.getData(field));

    // extract name from table

    a_ = get_date(a_)

    b_ = get_date(b_)          

    var comp = YAHOO.util.Sort.compare;

    var compState = comp(a_, b_, desc);

    return compState;

};

var lastLoginSort = function(a, b, desc, field) {

	var a_ = a.getData('last_login_raw') || 0;

    var b_ = b.getData('last_login_raw') || 0;

    var comp = YAHOO.util.Sort.compare;

    var compState = comp(a_, b_, desc);

    return compState;

};

var nameSort = function(a, b, desc, field) {

    var a_ = fromHTML(a.getData(field));

    var b_ = fromHTML(b.getData(field));

    // extract name from table

    a_ = get_name(a_)

    b_ = get_name(b_)          

    var comp = YAHOO.util.Sort.compare;

    var compState = comp(a_, b_, desc);

    return compState;

};

var permNameSort = function(a, b, desc, field) {

    var a_ = fromHTML(a.getData(field));

    var b_ = fromHTML(b.getData(field));

    // extract name from table

    a_ = a_.children[0].innerHTML;

    b_ = b_.children[0].innerHTML;      

    var comp = YAHOO.util.Sort.compare;

    var compState = comp(a_, b_, desc);

    return compState;

};

var groupNameSort = function(a, b, desc, field) {

    var a_ = fromHTML(a.getData(field));

    var b_ = fromHTML(b.getData(field));

    // extract name from table

    a_ = get_group_name(a_)

    b_ = get_group_name(b_)          

    var comp = YAHOO.util.Sort.compare;

    var compState = comp(a_, b_, desc);

    return compState;

};

var dateSort = function(a, b, desc, field) {

    var a_ = fromHTML(a.getData(field));

    var b_ = fromHTML(b.getData(field));

    // extract name from table

    a_ = get_date(a_)

    b_ = get_date(b_)          

    var comp = YAHOO.util.Sort.compare;

    var compState = comp(a_, b_, desc);

    return compState;

};

var usernamelinkSort = function(a, b, desc, field) {

	  var a_ = fromHTML(a.getData(field));

	  var b_ = fromHTML(b.getData(field));

	  // extract url text from string nodes 

	  a_ = get_link(a_)

	  b_ = get_link(b_)

	  var comp = YAHOO.util.Sort.compare;

	  var compState = comp(a_, b_, desc);

	  return compState;

}

var addPermAction = function(_html, users_list, groups_list){

    var elmts = YUD.getElementsByClassName('last_new_member');

    var last_node = elmts[elmts.length-1];

    if (last_node){

       var next_id = (YUD.getElementsByClassName('new_members')).length;

       _html = _html.format(next_id);

       last_node.innerHTML = _html;

       YUD.setStyle(last_node, 'display', '');

       YUD.removeClass(last_node, 'last_new_member');

       MembersAutoComplete("perm_new_member_name_"+next_id, 

               "perm_container_"+next_id, users_list, groups_list);          

       //create new last NODE

       var el = document.createElement('tr');

       el.id = 'add_perm_input';

       YUD.addClass(el,'last_new_member');

       YUD.addClass(el,'new_members');

       YUD.insertAfter(el, last_node);

    }	

}

/* Multi selectors */

var MultiSelectWidget = function(selected_id, available_id, form_id){

	//definition of containers ID's

	var selected_container = selected_id;

	var available_container = available_id;

	//temp container for selected storage.

	var cache = new Array();

	var av_cache = new Array();

	var c =  YUD.get(selected_container);

	var ac = YUD.get(available_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);

	    }

	}

	//get all available options to cache

	for(var i = 0;node =ac.options[i];i++){

	        //push selected to my temp storage left overs :)

	        av_cache.push(node);

	}

	//fill available only with those not in chosen

	ac.options.length=0;

	tmp_cache = new Array();

	for(var i = 0;node = av_cache[i];i++){

	    var add = true;

	    for(var i2 = 0;node_2 = cache[i2];i2++){

	        if(node.value == node_2.value){

	            add=false;

	            break;

	        }

	    }

	    if(add){

	        tmp_cache.push(new Option(node.text, node.value, false, false));

	    }

	}

	for(var i = 0;node = tmp_cache[i];i++){

	    ac.options[i] = node;

	}

	function prompts_action_callback(e){

	    var chosen = YUD.get(selected_container);

	    var available = YUD.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(chosen,c[0]);

	        fill_with(available,c[1]);

	    }

	    // remove action

	    if (this.id=='remove_element'){

	        var c = get_checked(chosen);

	        add_to(available,c[0]);

	        fill_with(chosen,c[1]);

	    }

	    // add all elements

	    if(this.id=='add_all_elements'){

	        for(var i=0; node = available.options[i];i++){

	                chosen.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 = chosen.options[i];i++){

	            available.appendChild(new Option(node.text,

	                    node.value, false, false));

	        }

	        chosen.options.length = 0;

	    }

	}

	YUE.addListener(['add_element','remove_element',

	               'add_all_elements','remove_all_elements'],'click',

	               prompts_action_callback)

	if (form_id !== undefined) {

		YUE.addListener(form_id,'submit',function(){

		    var chosen = YUD.get(selected_container);

		    for (var i = 0; i < chosen.options.length; i++) {

		        chosen.options[i].selected = 'selected';

		    }

		});

	}

}

// global hooks after DOM is loaded

YUE.onDOMReady(function(){

	YUE.on(YUQ('.diff-collapse-button'), 'click', function(e){

		var button = e.currentTarget;

		var t = YUD.get(button).getAttribute('target');

	    console.log(t);

		if(YUD.hasClass(t, 'hidden')){

			YUD.removeClass(t, 'hidden');

			YUD.get(button).innerHTML = "↑ {0} ↑".format(_TM['Collapse diff']);

		}

		else if(!YUD.hasClass(t, 'hidden')){

			YUD.addClass(t, 'hidden');

			YUD.get(button).innerHTML = "↓ {0} ↓".format(_TM['Expand diff']);

		}

	});

});