/*
JQuery function that takes two lists <ul><li></li></ul> and adds a navigation
Sorts by alphanumeric and adds number/letter/character title for each number/letter/character

HTML Formatting Requirements:
<div>
	<ul id="listA"><li el="anything goes here like a database id or data object">list item 1</li></ul>
	<ul id="listB"></ul>
</div>


OPTIONAL:

Top titles and links:
<div align="center">
    <div class="lnk" style="float:left;margin-bottom:10px;" onclick="$('#listA').lister('listB').sendAll(true);">Select all</div> 
    <div class="lnk" style="float:right;margin-bottom:10px;" onclick="$('#listA').lister('listB').sendAll(false);">De-select all</div>
</div>
<div style="clear:both;">
    <div class="listerLinksLeftLabel">Left List</div>
    <div class="listerLinksRightLabel">Right List</div>
</div>


JavaScript Requirements:
<script>$(document).ready(function(){$("#listA").lister("listB");});</script>

Style Requirements:

.lnk{
	cursor:pointer;
	text-decoration:underline;
	color:#E23B30;
}

div.lister{
	width:100%;

}

ul.lister{
	list-style:none;
	text-align:left;
	border:1px solid #ccc;
	padding:10px;
	margin:0;
	overflow:auto;
	height:250px;
	margin-top:5px;
	font-weight:normal;
	display:block;
	
}

.listerHover{
	background-color:#eee;
	cursor:default;
	margin-left:1px;
}

.lister li span{
	padding-left:5px;
}

li.liTitles{
	font-weight:bold;
	border-bottom:1px #999 solid;
}

div.listerLinksLeft,div.listerLinksRight{
	border:1px solid #ccc;
	text-align:left;
	width:270px;
	padding:5px;
	height:320px;
	background-color:white;

}

div.listerLinksLeftLabel,div.listerLinksRightLabel{
	border:1px solid #ccc;
	margin-bottom:5px;
	width:270px;
	padding:3px;
	background-color:#FBD487;
	color:black;
	text-align:center;
}
div.listerLinksRightLabel{

	float:right;
}
div.listerLinksLeftLabel{
	
	float:left;
}
div.listerLinksLeft{
	float:left;
}

div.listerLinksRight{
	float:right;
}

div.listerLinksLeft a,div.listerLinksRight a{
	cursor:pointer;
	text-decoration:underline;
	font-weight:normal;
}

div.listerLinksLeft a:hover,div.listerLinksRight a:hover{
	color:#999;
}

.left,.right{
	color:#e86505;
	font-size:1.2em;
	
}


Some simple options:

You can simply remove everything in the list by calling:
$("#listA").empty();

If you fill it back up again, you may call the following to reorganize the list:
$("#listA").lister("listB").fillLister();

To send all contents from one container to the other, use:
$('#listA').lister('listB').sendAll(true);
YOU MUST HAVE THE el="" CUSTOM ATTRIBUTE IN ORDER FOR THE SEND ALL FUNCTION TO WORK!!!
This only works with an attrubute of <li el="myitem">myitem</li>
pass true to send from listA to listB and false to send from listB to list A

If you would like to get a comma delimited list of all values of an attribute in the (right) list container, use this function:
$('#listA').lister('listB').getList();



*/

//browser detection for IE 6 slow JS engine. Removes advanced functionality that will freeze IE 6 and 7
var BrowserDetect={init:function(){this.browser=this.searchString(this.dataBrowser)||"An unknown browser";this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||"an unknown version";this.OS=this.searchString(this.dataOS)||"an unknown OS"},searchString:function(data){for(var i=0;i<data.length;i++){var dataString=data[i].string;var dataProp=data[i].prop;this.versionSearchString=data[i].versionSearch||data[i].identity;if(dataString){if(dataString.indexOf(data[i].subString)!=-1)return data[i].identity}else if(dataProp)return data[i].identity}},searchVersion:function(dataString){var index=dataString.indexOf(this.versionSearchString);if(index==-1)return;return parseFloat(dataString.substring(index+this.versionSearchString.length+1))},dataBrowser:[{string:navigator.userAgent,subString:"Chrome",identity:"Chrome"},{string:navigator.userAgent,subString:"OmniWeb",versionSearch:"OmniWeb/",identity:"OmniWeb"},{string:navigator.vendor,subString:"Apple",identity:"Safari",versionSearch:"Version"},{prop:window.opera,identity:"Opera"},{string:navigator.vendor,subString:"iCab",identity:"iCab"},{string:navigator.vendor,subString:"KDE",identity:"Konqueror"},{string:navigator.userAgent,subString:"Firefox",identity:"Firefox"},{string:navigator.vendor,subString:"Camino",identity:"Camino"},{string:navigator.userAgent,subString:"Netscape",identity:"Netscape"},{string:navigator.userAgent,subString:"MSIE",identity:"Explorer",versionSearch:"MSIE"},{string:navigator.userAgent,subString:"Gecko",identity:"Mozilla",versionSearch:"rv"},{string:navigator.userAgent,subString:"Mozilla",identity:"Netscape",versionSearch:"Mozilla"}],dataOS:[{string:navigator.platform,subString:"Win",identity:"Windows"},{string:navigator.platform,subString:"Mac",identity:"Mac"},{string:navigator.userAgent,subString:"iPhone",identity:"iPhone/iPod"},{string:navigator.platform,subString:"Linux",identity:"Linux"}]};BrowserDetect.init();
function isIE6or7or8(){if(BrowserDetect.browser == "Explorer" && (BrowserDetect.version == 8 || BrowserDetect.version == 7 || BrowserDetect.version == 6)){return true;}else {return false;}}

(function($) {
	$.fn.lister = function(el){
		$.sortA = [];
		$.sortB = [];
		$.ie = isIE6or7or8();
		var mainUL = this;
		var otherUL = "#"+el;
		var outerDiv = $(mainUL).parent("div");
		$.create = function(element) {
		   return $(document.createElement(element));
		 }
		$.fn.fillLister = function(){
			$(mainUL).scrollTop(0).children("li").each(function(){
				if(!$(this).children("span").hasClass("left")){
					var spn = $.create("span").addClass("left").html("&#9658;");
					$(this).bind("click", sendTo).prepend(spn);
				}
			});
		}
		
		$.fn.sendAll = function(bool){
			if(bool){
				var elmnt = mainUL;
				var other = otherUL;
				var htm = "&#9668;";
			}
			else{
				var elmnt = otherUL;
				var other  = mainUL;
				var htm = "&#9658;";
			}
			$(elmnt).children("li[el]").each(function(){
				var li = $(this);
				var span = $(li).children("span");
				var ulid = $(this).parent("ul").attr("id");
				$(span).each(function(){$(this).html(htm)});
				if (bool) {
					$(otherUL).prepend(li);
				}
				else {
					$(mainUL).prepend(li);
				}
			});
			//console.log("sendAll");
			$(elmnt).empty();
			$(elmnt).sortLists(other);
			$(other).sortLists(elmnt);
		}
		
		$.fn.getList=function(attr){
			var rry = [];
			$(otherUL).children("li[el]").each(function(){
				if (!attr) {
					var txt = $.trim($(this).attr("el"));
				}
				else {
					var txt = $(this).attr(attr);
				}
				if (txt != "" && txt != null) {
					rry.push($.trim(txt));
				}
			});
			return rry.toString().replace(/\s+/g,'');
		}
		
		$.fn.tclass = function(clss){
			$(this).bind("mouseover",function(){
				$(this).addClass(clss);
			});
			$(this).bind("mouseout",function(){
				$(this).removeClass(clss);
			});
			return this;
		}
		
		function sendTo(bool){
			var li = $(this);
			var span = $(li).children("span");
			var ulid = $(this).parent("ul").attr("id");
			if(ulid == el){
				$(mainUL).prepend(li);
				$(span).removeClass("right").addClass("left").html("&#9658;");
			}
			else{
				$(otherUL).prepend(li);
				$(span).removeClass("left").addClass("right").html("&#9668;");
			}
			$(mainUL).sortLists(otherUL);
			$(otherUL).sortLists(mainUL);
			$(this).removeClass("hover").removeClass("listerHover");
		}
		
		$.fn.sortLists = function(el){


			var mylist = $(el);
			
			if (!$.ie) {
			 	$(mylist).children("li[tx]").each(function(){$(this).remove()});
				$(mylist).parent("div").children("a").each(function(){$(this).remove()});
				$(mylist).parent("div").children("span").each(function(){$(this).remove()});
			}

			var listitems = mylist.children('li').get();
			listitems.sort(function(a, b){
			   var compA = $(a).text().toUpperCase();
			   var compB = $(b).text().toUpperCase();
			   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
			});
			
			if (!$.ie) {
				var prev = '';
				var ltr = '';
			}
			
			$.each(listitems, function(idx, itm) {
			if (!$.ie) {
				ltr = $(itm).text().substring(1,2);
				if(ltr.toUpperCase() != prev.toUpperCase()){
					$(mylist).append($.create("li").text(ltr).attr("tx",ltr.toUpperCase()).addClass("liTitles"));
					$(mylist).before($.create("a").bind("click",scrollA).text(ltr.toUpperCase())).before($.create("span").text(" | "));
				}
			}
				mylist.append(itm); 
				if (!$.ie) {
					prev = ltr;
				}
			});

		}

		function divNester(){	
			var listDivA = $.create("div").addClass("listerLinksLeft").append(mainUL);
			var listDivB = $.create("div").addClass("listerLinksRight").append($(otherUL));
			$(outerDiv).prepend(listDivA).append(listDivB);
		}
		
		function scrollA(){
			var ul  = $(this).parent("div").children("ul");
			var txt = $(this).text();
			$(ul).scrollTop(0);
			var os = $(ul).children("li[tx="+txt+"]").offset().top - $(ul).offset().top;
			$(ul).animate({scrollTop: os}, 500);
		}
		
		if ($(mainUL).parent("div").hasClass("listerLinksLeft") == false) {
			$(mainUL).parent("div").addClass("lister");
			$(mainUL).addClass("lister").children("li").each(function(){
				var spn = $.create("span").addClass("left").html("&#9658;");
				
				$(this).bind("click", sendTo)
				.tclass("listerHover")
				.prepend(spn)
				.bind("mouseover",function(){$(this).addClass("hover")})
				.bind("mouseout",function(){$(this).removeClass("hover")});
				
			}).scrollTop(0);
			divNester();
			$(otherUL).addClass("lister").children("li").each(function(){
				var newImg = $.create("span").addClass("right").html("&#9668;");
				$(this).bind("click", sendTo).tclass("listerHover").prepend(newImg);
			}).scrollTop(0);
			
		}
		$(mainUL).sortLists(otherUL);
		$(otherUL).sortLists(mainUL);
		return this;
	};
})(jQuery);