function displayBowler(bowler)
{
	if (bowler)
	{
		var summaryPane = document.getElementById("SummaryPane");
		
		if (summaryPane)
		{
			var display = function() {
				var name    = "";
				var profile = "";
				
				name = bowler.FirstName + " ";
				name += bowler.LastName;
				
				if (bowler.Suffix)
				{
					name += " " + bowler.Suffix;
				}
				
				var img = createImageTag(bowler, "_150", "bordered profile");
				
				if (bowler.Bio)
				{
					profile += bowler.Bio;
				}
				
				if (bowler.HOF)
				{
					profile += bowler.HOF;
				}
				
				summaryPane.innerHTML = "<div class='summary'>" + profile + "</div>";
				
				var title = document.getElementById("SummaryTitle");
				
				if (title)
				{
					title.innerHTML = "<table id='summarytitle' cellspacing='0px'><tr><td>" + name + "</td><td id='discusscell'><a href='#DiscussionLink'>Discussion</a></td></tr></table>";
				}
				
				var attributes = { 
					backgroundColor: { from:'#000', to: '#FFF' } 
				}; 
				
				var addPicture = function(){
					summaryPane.innerHTML = img + summaryPane.innerHTML;
				};
				
				var anim = new YAHOO.util.ColorAnim(summaryPane, attributes, 1); 
				anim.onComplete.subscribe(addPicture);
				anim.animate();
				
			};
			
			summaryPane.innerHTML = "";
			
			var attributes = { 
				backgroundColor: { from:'#FFF', to: '#000' } 
			}; 
			
			var anim = new YAHOO.util.ColorAnim(summaryPane, attributes, 1); 
			anim.onComplete.subscribe(display);
			anim.animate();
			
			
		}
	}
}

function displayDiscussion(id, bowler, oId, xId)
{
	var handleSuccess = function(o){
		
		if(o.argument && o.argument.element)
		{
			var div = o.argument.element;
			div.innerHTML = o.responseText;
		}
		
		if (bowler)
		{
			var link = "DiscussionBoard.aspx?Id=" + discussionId + "&XFid=" + xId + "&OUid=" + oId;
			div.innerHTML += "<div id='DiscussionLink'><a class='tbbutton' onclick='this.blur();' href='" + link + "'><span>Go To Discussion</span></a></div>";
		}
		
	}

	var handleFailure = function(o){
		
		if(o.argument && o.argument.element)
		{
			o.argument.element.innerHTML = "Unable to load Discussion.";
		}
	}

	var callback = 
	{
		cache:false,
		success:handleSuccess,
		failure:handleFailure,
		argument:{element: document.getElementById(id)}
	};
	
	if (bowler && typeof(id) == "string")
	{
		var discussionId = bowler.DiscussionId;
		var request = YAHOO.util.Connect.asyncRequest('GET', "DiscussionBoardPreview.aspx?Id=" + discussionId, callback);
	}
	
}

function createImageTag(bowler, sizeSuffix, classes, position)
{
	var img = "";
	
	if (bowler && typeof bowler == "object")
	{
		var defaultPath = bowler.DefaultPhoto;
		var imgParts = defaultPath.split(".jpg");
		var alt = "";
		
		if (position)
		{
			alt = position + ". "; 
		}
		
		alt += bowler.FirstName + " " + bowler.LastName;
		
		if (bowler.Suffix)
		{
			alt += " " + bowler.Suffix;
		}
		
		alt = alt.replace("'", "&#39;");
		
		if (imgParts.length == 2)
		{
			img = "<img class='" + classes + "' src='" + imgParts[0] + sizeSuffix + ".jpg' alt='" + alt + "' title='" + alt + "'/>";
		}

	}
	
	return img;
}

//assumes bowler elements are named with id format of "bowler-position"
//example: the second element in the position would be named "bowler-1" (zero based)
function bowlerArrayPos(id)
{
	var pos = -1;
	
	if (typeof id == "string")
	{
		var idParts = id.split("-");
		
		if (idParts.length == 2)
		{
			pos = idParts[1];
		}
	}
	
	return pos;
}

//assumes each kid has a single child and is a text node
function sortKids(e)
{
	if (typeof e == "string")
	{
		e = document.getElementById(e);
	}
	
	if (e)
	{
		//transfer element nodes of e to an array to get a "snap shot" of the nodes for ordering
		var kids = [];
		for (var x = e.firstChild; x != null; x = x.nextSibling)
		{
			if (x.nodeType == 1 /* Node.ELEMENT_NODE */ && x.nodeName.toLowerCase() == "li")
			{
				kids.push(x);
			}
		}
		
		//sort array based on text content
		kids.sort(function(n, m){ //this is the comparator function that will be used for sorting
					var s = n.firstChild.data;
					var t = m.firstChild.data;
					
					if (s < t)
					{
						return -1;
					}
					else if (s > t)
					{
						return 1;
					}
					else
					{
						return 0;
					}
		});
		
		//append back to parent
		for(var i = 0; i < kids.length; i++)
		{
			e.appendChild(kids[i]);
		}
	}
}

function showT10Pictures() 
{
	var t10 = YAHOO.util.Dom.get("T10");
	
	if (t10)
	{
		var count = 1;
		
		for (var x = t10.firstChild; x != null; x = x.nextSibling)
		{
			if (x.nodeType == 1 /* Node.ELEMENT_NODE */ && x.nodeName.toLowerCase() == "li")
			{
				var pos = bowlerArrayPos(x.id);
				
				x.innerHTML = createImageTag(bowlers[pos], "_40", "bordered", count);
				
				count++;
			}
		}
	}
}

(function() {

	var Dom = YAHOO.util.Dom;
	var Event = YAHOO.util.Event;
	var DDM = YAHOO.util.DragDropMgr;

	//////////////////////////////////////////////////////////////////////////////
	// example app
	//////////////////////////////////////////////////////////////////////////////
	YAHOO.example.DDApp = {
		init: function() {

			new YAHOO.util.DDTarget("T10");
			new YAHOO.util.DDTarget("AllTimeList");

			var t10 = Dom.get("T10");
			var bowlerVoted;
			
			for (var i=0; i < bowlers.length; i++)
			{
				new YAHOO.example.DDList("bowler-" + i);
			
				if (bowlers[i].Rank)
				{
					bowlerVoted = Dom.get("bowler-" + i);
					t10.appendChild(bowlerVoted);	
				}
			}
			
			showT10Pictures();
			
			
		},

		showOrder: function() {
			var parseList = function(ul, title) {
				var items = ul.getElementsByTagName("li");
				var out = title + ": ";
				for (i=0;i<items.length;i=i+1) {
					out += items[i].id + " ";
				}
				return out;
			};

			var ul1=Dom.get("T10"), ul2=Dom.get("AllTimeList");
			alert(parseList(ul1, "T10") + "\n" + parseList(ul2, "AllTimeList"));

		}

		
	};
	
	var handleSuccess = function(o){
		var msg = Dom.get("smsg");
		var today = new Date();
		msg.innerHTML = "Bowlers Saved " + today.toLocaleTimeString();
		//create attributes to be animated
		
		var attributes = { 
			color: { from:'#000', to: '#FFF' }, 
			backgroundColor: { from:'#E3CF6E', to: '#000' } 
		}; 
		
		var anim = new YAHOO.util.ColorAnim(msg, attributes); 
		anim.animate();
	}
	
	var handleFailure = function(o){
		//handle failure logic here		
	}

	var callback =
	{
		success:handleSuccess,
		failure:handleFailure
	};

	//////////////////////////////////////////////////////////////////////////////
	// custom drag and drop implementation
	//////////////////////////////////////////////////////////////////////////////

	YAHOO.example.DDList = function(id, sGroup, config) {

		YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);

		this.logger = this.logger || YAHOO;
		var el = this.getDragEl();
		Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent

		this.goingUp = false;
		this.lastY = 0;
	};

	YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

		maxVotes : 15,
		
		startDrag: function(x, y) {
			this.logger.log(this.id + " startDrag");

			// make the proxy look like the source element
			var dragEl = this.getDragEl();
			var clickEl = this.getEl();
			Dom.setStyle(clickEl, "visibility", "hidden");

			dragEl.innerHTML = clickEl.innerHTML;

			Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
			Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
			Dom.setStyle(dragEl, "border", "2px solid gray");
			
			var target = Dom.get("T10");
			
			if (target)
			{
				Dom.setStyle(target, "backgroundColor", "#e2e2e2");
			}
		},

		endDrag: function(e) {

			var srcEl = this.getEl();
			var proxy = this.getDragEl();

			// Show the proxy element and animate it to the src element's location
			Dom.setStyle(proxy, "visibility", "");
			var a = new YAHOO.util.Motion( 
				proxy, { 
					points: { 
						to: Dom.getXY(srcEl)
					}
				}, 
				0.2, 
				YAHOO.util.Easing.easeOut 
			)
			
			var proxyid = proxy.id;
			var thisid = this.id;

			// Hide the proxy and show the source element when finished with the animation
			a.onComplete.subscribe(function() {
			
					Dom.setStyle(proxyid, "visibility", "hidden");
					Dom.setStyle(thisid, "visibility", "");
				});
			a.animate();
			
			var target = Dom.get("T10");
			
			if (target)
			{
				Dom.setStyle(target, "backgroundColor", "#ffffff");
			}
			
			this.renumberAndBump(target);
		},

		renumberAndBump: function(target){
			var numListItems = 0;
			
			for(var x = target.firstChild; x != null; x = x.nextSibling)
			{
				if (x.nodeName.toLowerCase() == "li")
				{
					numListItems++;
					
					if( x.id.indexOf("T10_") == -1 ) //bowler item
					{
						if (numListItems == this.maxVotes + 1)
						{
							target.removeChild(x);
							
							//move item into topbowlers list
							var topBowlers = Dom.get("AllTimeList");
							
							if (topBowlers)
							{
								topBowlers.appendChild(x);
								this.showAllTimeNames();
								sortKids(topBowlers);
							}
						}
					}
					
				}
			}
		},
		
		onDragDrop: function(e, id) {

			// If there is one drop interaction, the li was dropped either on the list,
			// or it was dropped on the current location of the source element.
			if (DDM.interactionInfo.drop.length === 1) {

				// The position of the cursor at the time of the drop (YAHOO.util.Point)
				var pt = DDM.interactionInfo.point; 

				// The region occupied by the source element at the time of the drop
				var region = DDM.interactionInfo.sourceRegion; 

				// Check to see if we are over the source element's location.  We will
				// append to the bottom of the list once we are sure it was a drop in
				// the negative space (the area of the list without any list items)
				if (!region.intersect(pt)) {
					var destEl = Dom.get(id);
					var destDD = DDM.getDDById(id);
					destEl.appendChild(this.getEl());
					
					destDD.isEmpty = false;
					DDM.refreshCache();
				}
			}
			
			if (id.toLowerCase() == "alltimelist")
			{
				this.showAllTimeNames();
				sortKids(Dom.get(id));
			}
			else if (id.toLowerCase() == "t10")
			{
				showT10Pictures();
			}
			
			this.saveOrder();
		},
		
		saveOrder: function() {
			var parseList = function(ul, title, maxItems) {
				var items = ul.getElementsByTagName("li");
				var out = title;
				var rank = 0;
				
				for (i=0;i< items.length; i=i+1) {
					rank = i + 1;
					
					if (i < maxItems)
					{
						out += "&a" + rank + "=" + bowlers[bowlerArrayPos(items[i].id)].GreatestBowlersId;
					}
				}
				
				return out;
			};

			var t10 = Dom.get("T10");
			
			var request = YAHOO.util.Connect.asyncRequest('GET', parseList(t10, "saveRanking.aspx?Id=" + oId + "&xId=" + xId, this.maxVotes), callback);
			
			
		},
		
		showAllTimeNames: function() {
			var allTime = Dom.get("AllTimeList");
			
			if (allTime)
			{
				for (var x = allTime.firstChild; x != null; x = x.nextSibling)
				{
					if (x.nodeType == 1 /* Node.ELEMENT_NODE */ && x.nodeName.toLowerCase() == "li")
					{
						var pos = bowlerArrayPos(x.id);
						
						x.innerHTML = bowlers[pos].FullName;
					}
				}
			}
		},
		
		onDrag: function(e) {

			// Keep track of the direction of the drag for use during onDragOver
			var y = Event.getPageY(e);

			if (y < this.lastY) {
				this.goingUp = true;
			} else if (y > this.lastY) {
				this.goingUp = false;
			}

			this.lastY = y;
		},

		onDragOver: function(e, id) {
		
			var srcEl = this.getEl();
			var destEl = Dom.get(id);

			// We are only concerned with list items, we ignore the dragover
			// notifications for the list.
			if (destEl.nodeName.toLowerCase() == "li") {
				var orig_p = srcEl.parentNode;
				var p = destEl.parentNode;

				if (this.goingUp) {
					p.insertBefore(srcEl, destEl); // insert above
				} else {
					p.insertBefore(srcEl, destEl.nextSibling); // insert below
				}

				DDM.refreshCache();
			}
		}
	});

	Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
	
})();