$(function(){
	
	
	var burl = "http://dev.plitto.com/json/"; // Change for prod
	// JQuery UI Tab Collapse
	$( "#tabs" ).tabs({
		collapsible: true
	});
	
	$("div.inc").live("click",
    function(){
        var _inc = "";
        if ($(this).hasClass("icYes")){
            //$(this).toggle().removeClass("icYes").addClass("icNo").fadeIn(1000);
            //_inc = "lc/icYes/";
			$(this).closest('td.aa').html("Removed").effect("highlight", {}, 3000);
        } else if($(this).hasClass("me")){
            //$(this).toggle().removeClass("me").addClass("icNo").fadeIn(1000);
            //_inc = "lc/icYes/";
			$(this).closest('td.aa').html("Removed").effect("highlight", {}, 3000);
		}
		else if($(this).hasClass("icRm")){
            //$(this).toggle().removeClass("me").addClass("icNo").fadeIn(1000);
           // _inc = "lc/icRm/";
			$(this).closest('td.aa').html("Dissed").effect("highlight", {}, 3000);
        }else{
            // $(this).toggle().removeClass("icNo").addClass("icYes").fadeIn(1000);
            //_inc = "lc/icNo/";
			
			$(this).closest('td.aa').html("Dittoed").effect("highlight", {}, 3000);
        }
        // The JSON path is the id of the icon div.
        var incJSONPath = $(this).attr("id");
        $.ajax({
            type: "POST",
            url: burl + $(this).attr("id"),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg){
                // console.log("We made it to 143 Notice: " + msg.notice);
                $('#action').prepend("notice: " + msg.notice + " \n path: " + burl + $(this).attr("id") + "\n");
            }
        });

    });
	
	$("li.exp").live("click",function(){
		//console.log($(this));
		// console.log("clicked exp");
		// console.log("UL ID: " + $(this).closest('ul').attr('id'));
		// console.log("LI ID: " + $(this).closest('li').attr('id'));
		
		var listID = $(this).closest('ul').attr('id');
		var sub = $(this).closest('li').attr('id');
		
		$("li.tabs").hide();
		$("li.exp").removeClass("active");
		
		$("li.exp"+listID).show().html("Show content available to: " + sub);
		$($(this).addClass("active"));
		$("#exp" + listID ).show().html("Loading "+ sub);
		//
		console.log(sub);
		//console.log("URL: listID="+$(this).closest('ul').attr('id') + "&view="+$(this).attr('id'));
		// Fomat for list filter: http://dev.plitto.com/json/list/7555/filter/dittoable/child/
		var url = burl + "list/" + listID + "/filter/" + sub+ "/child/";
		$("#exp"+ listID ).html('<table><tr>');
		$.getJSON(url, function(data) {
			// console.log(data);
			b=0;
			for (a in data.content.data){
                 //console.log(data.content.data[a].ThingName);
				//console.log(data.content.data[a].ThingName);
				var dact = "ditto/lu/"+data.content.data[a].UserID
					+"/li/"+data.content.data[a].ListID+"/lt/"+data.content.data[a].ThingID+"/";
				$("#exp"+ listID ).append( "<td style='width: 130px;' class='aa'><div class='title'>"+data.content.data[a].ThingName + "</div>"
					+"<div class='note'>" + data.content.data[a].UserName + "</div>"
					//element<div class="icNo inc" id="http://www.plitto.com/json/ditto/lu/2/li/7555/lt/7624/"></div>
					+"<table><tbody><tr><td><div class='icNo inc' id='"+dact+"lc/icNo/'></div></td>"
						+"<td><div class='icRm inc' id='"+dact+"lc/icDiss/tk/"+data.content.data[a].TheKey+"'></div></td>"
						//+"<td><div class='action_remove'></div></td>"
						+"</tr></tbody></table></td>"
				);
				b++;
				if(b==5)
				{ $("#exp"+ listID ).append('</tr><tr>'); b=0; }
			}
			
		});
		
		$("#exp"+ listID ).append("</tr></table>");
		// console.log(url);
	});
	
	$("li.active").live("click",function(){
		$("li.active").removeClass("active");
		$("#exp" + $(this).closest('ul').attr('id')).hide();
		//console.log("Hide active" + $(this).attr('id'));
	});
	
	function menuA(thevar){
			//console.log("Hit menuA");
			//console.log(thevar);
			//console.log("notes");
			// console.log(thevar.attr('id'));
			// console.log($(this));
			//console.log("Something");
			var target = thevar.attr('id');

			if(thevar.hasClass("m"))
			{
				$("#notes").html("Has M");
				$("button.m").removeClass('active');

				// Build the views/sub menus
				var m2arr = new Array();
				var m2 = "<div class='menu float' id='m2'>m2</div>";
				var m2t = "";
				$("div#msub").html("menu: " + target);
				$("div#content").html("");
				
				// Detect what was clicked on
				if(target=="mmditto"){
					$("div#msub").html(m2);
					m2arr = Array("Ditto",Array("Things","fthingsp"),Array("Lists","flistsn"),Array("People","fperson"));
					// Temporarily out: Array("Favorites","flistsf"),
				}else if(target=="mmaddtolists")	{
					$("div#msub").html(m2);
					m2arr = Array("Lists",Array("My Freshest","mistsn"),Array("New to Me","mlistsntm"));
					// Temp out: Array("My Favorites","mlistsf"),
				}else if(target=="mmcontacts")	{
					$("div#msub").html(m2);
					m2arr = Array("Contacts",Array("In Common","cinc"),"Dittos",Array("Them &rarr; Me","cdi"),Array("Me &rarr; Them","cdo"));
				}	
				else if(target=="mmnewlist")	{
					$("div#msub").html("<div class='title'>New List</div>");
				}	
				else if(target=="mmme")	{
					$("div#msub").html("<div class='title'>Me</div>");
				}	
				else if(target=="mmabout")	{
					$("div#content").html("<div class='title'>About Plitto</div>");
				}

				var str= "";
				for(a=0;a<m2arr.length;a++)
				{
					if(isArray(m2arr[a])) 
					str += "<button id='"+m2arr[a][1]+"' class='mm'>"+m2arr[a][0]+"</button><br/>";
					else
					str += "<div class='title'>"+ m2arr[a]+"</div>";
				}
				$("div#msub").html(str);

				
				$("button.mm:first").click();

				//console.log("m");
			}
			else if(thevar.hasClass("mm"))
			{
				// console.log("mm" + $(this).id); console.log(target);

				$("#content").html("ID" + target);
				$("#notes").html("ACTION: ".target);
				// $("#notes").html("Has MM");	
				$("button.mm").removeClass('active');		
				//
				if(target=="flistsn")
				{
					$("#content").html("<div class='title'>Ditto from Lists</div>");
					var url='http://dev.plitto.com/json/v2.php';

					$.getJSON(url, function(data) {
						var str = '<table>';
						//
						console.log(data.lists);
						//console.log(data.lists[0].ListName);
						//console.log(data.lists.length);
						for(var a=0;a<data.lists.length;a++)
						{
							//str += "<tr><td id='"+data.lists[a].ParentListNameID+"'>"+ data.lists[a].ListName + "</td>"+"<td class='stat'><div class='stat'>"+data.lists[a].Dittoable+"</div>Dittoable</td>"+"<td class='stat'><div class='stat'>"+data.lists[a].InCommon+"</div>In Common</td>"+"<td class='stat'><div class='stat'>"+data.lists[a].Dissed+"</div>Dissed</td></tr>";
								
							str += "<tr><td><div class='llink' id='l"+data.lists[a].listID+"'>"
								//+ data.lists[a].ListName + "</div></td><td><id='tabs'>"
								+"<ul class='la' id='" + data.lists[a].listID + "'>"
								+"<li class='text'>" + data.lists[a].listName + "<br/>"
								+"<div class='note'>"+data.lists[a].username + " added "+data.lists[a].thingname+ " on "+data.lists[a].added + "</div>"
								+"</li>"
								+"<li class='exp' id='dittoable'><div class='stat'>"+data.lists[a].dittoable+"</div>Dittoable</li>"
							//	+"<li class='exp' id='incommon'><div class='stat'>"+data.lists[a].incommon+"</div>In Common</li>"
								//+"<li class='exp' id='dissed'><div class='stat'>"+data.lists[a].Dissed+"</div>Dissed</li>"
								+"<li class='tabs' id='exp"+ data.lists[a].listID +"' style='display: none'></li>"
								+"</ul></div></td></tr>"
								+"";
							// console.log(data.lists[a].ListName);
						}
					  $('#content').append(str);
					});

				}
				else if (targe="fthingsp")
				{
					
					$("#content").html("<div class='title'>Ditto Things</div>");
					var url='http://dev.plitto.com/json/home/filter/dittoable';

					$.getJSON(url, function(data) {
						var str = '';
						
						//console.log(data);
						console.log(data.content.data);
						console.log(data.content.data);
						//console.log(data.lists[0].ListName);
						//console.log(data.lists.length);
						for(var a=0;a<30;a++)
						{
							str += "<table style='float: left;'><tr><td class='aa'>"
								+"<div style='border-radius: 8px; border: 2px solid #000; height: 300px; margin: 10px; width: 300px; padding: 5px; float: left; clear: none;'>"
								+"<div style='display: block;min-height: 60px;'>"
									+"<img src='https://graph.facebook.com/" + data.content.data[a].fbuid + "/picture' style='float: left;' height='50px' width='50px'>&nbsp;"
									+data.content.data[a].UserName + ' &rarr;'
								+"</div>"
								
								+"<div style='display: block; clear: both; text-align: center;'>"
									+"<div class='cList'>"
									+data.content.data[a].ListName +"<div class='rarr'>&rarr;</div></div>"
									+"<div class='cThing'>"
									+data.content.data[a].ThingName +"<div class='rarr'>&rarr;</div></div>"
								+"</div>"
								//+" added "+data.content.data[a].Added + "days ago"
								+"<div class='cAct'>"	
								//	+"<div style='text-align: center; margin-top: 5px;clear: both;'>You too?</div>"
								+'<div class="icNo inc" id="ditto/lu/18/li/6753/lt/6757/lc/icNo/"><br/><br/>Me Too!</div>'
									//+"<div class='cActB'><div class='cYes'>\"</div>Me Too!</div>"
								+'<div class="icRm inc" id="ditto/lu/18/li/6753/lt/6757/lc/icDiss/tk/12032"><br/><br/>Not Me!</div>'
									//+"<div class='cActB'><div class='cNo'>X</div>No Way</div>"
								+"</div>"
								
								+"<div float: left; margin-left: 250px; margin-top: 50px; height: 50px; width: 50px; -webkit-transform:rotate(180deg); background-image:url(\"https://graph.facebook.com/" + data.content.data[a].fbuid + "/picture\")'></div>"
								+"</div>"																			
								+"</td></tr></table>";
								
							// console.log(data.lists[a].ListName);
						}
					  $('#content').append(str);
					});
				}
				else if(target=="")
				{
					$("#content").html("<div class='title'></div>");
				}
				else if(target=="flistsf")
				{
					$("#content").html("<div class='title'>Friends' Favorites</div>");
				}
				else if(target=="fthingsp")
				{
					$("#content").html("<div class='title'>Ditto from Things</div>");
				}
				else if(target=="fperson")
				{
					$("#content").html("<div class='title'>Ditto by Person</div>");
				}

				else if(target=="cinc")
				{
					$("#content").html("<div class='title'>Contacts, by In Common</div>");
				}
				else if(target=="cdi")
				{
					$("#content").html("<div class='title'>Who Diddos me the most</div>");
				}
				else if(target=="cdo")
				{
					$("#content").html("<div class='title'>Who I Ditto the most</div>");
				}
				else if(target=="mistsn")
				{
					$("#content").html("<div class='title'>My Freshest Lists</div>");
				}
				else if(target=="mlistsf")
				{
					$("#content").html("<div class='title'>My Favorite Lists</div>");
				}
				else if(target=="mlistsntm")
				{
					$("#content").html("<div class='title'>Lists: New to Me</div>");
				}
				else if(target=="")
				{
					$("#content").html("<div class='title'></div>");
				}

			}
			else
			{
				console.log("no m");
				$("#notes").html("No Class");			
			}

			$("button#"+ thevar.attr('id')).addClass('active');
	       	$("#notes").append(thevar.attr('id'));
	}
	
	

	// Handle the menus
	$("button.m,button.mm").live("click",
	 	function(){
		menuA($(this));
		// console.log($(this));
	});
});


function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]';
}