/*  div contents */
	 var uploadRandomNum = 0;
	 var isUploaded = false;	 
var mainBG = function(){
		var parentTable = document.createElement("table");
		var parentTbody = document.createElement("tbody");
			parentTable.cellSpacing = "0";
			parentTable.cellPadding = "0";
		
		var headerTr = document.createElement("tr");
			headerTr.setAttribute("height", "25px");
		var contentTr = document.createElement("tr");
			contentTr.setAttribute("height", "395px");
		var footerTr = document.createElement("tr");
			footerTr.setAttribute("height", "25px");
		
		var topLeft = document.createElement("td");
			topLeft.className = "topLeft";
		var bordTop = document.createElement("td");
			bordTop.className = "bordTop";
		var topRight = document.createElement("td");
			topRight.className = "topRight";
		
			headerTr.appendChild(topLeft);
			headerTr.appendChild(bordTop);
			headerTr.appendChild(topRight);
			

		var bordLeft = document.createElement("td");
			bordLeft.className = "bordLeft";
		var contTd = document.createElement("td");

		var htmlCont="<table class=\"cont\" cellspacing=\"0\" cellpadding=\"0\">"+ 
						"<tr>"+
							"<td align=\"left\"  id=\"iconLeft\"></td>"+
							"<td width=\"66%\" class=\"divTitle\" id=\"headTitle\"></td>"+
							"<td align=\"right\" width=\"20%\" id=\"iconRight\"></td>"+
						"</tr>"+
						"<tr>"+
							"<td colspan=\"3\"><div id=\"dvContent\" style=\"width:720px; padding:10px\"></div></td>"+
						"</tr>"+
						"<tr>"+
							"<td colspan=\"3\" align=\"center\" id=\"footButtons\"></td>"+
						"</tr>"+
					"</table>";
			contTd.innerHTML = htmlCont;
					
		var bordRight = document.createElement("td");
			bordRight.className = "bordRight";
			
			contentTr.appendChild(bordLeft);
			contentTr.appendChild(contTd);
			contentTr.appendChild(bordRight);
		
		var bottLeft = document.createElement("td");
			bottLeft.className = "bottLeft";
		var bordBott = document.createElement("td");
			bordBott.className = "bordBott";
		var bottRight = document.createElement("td");
			bottRight.className = "bottRight";
			footerTr.appendChild(bottLeft);
			footerTr.appendChild(bordBott);
			footerTr.appendChild(bottRight);

			
		parentTbody.appendChild(headerTr);
		parentTbody.appendChild(contentTr);
		parentTbody.appendChild(footerTr);
		
		parentTable.appendChild(parentTbody);
		
		return parentTable;		
}

var drawCont =  function(tbWidth, tbHeight, id){
		var mainTable = document.createElement("table");
			mainTable.className = "mainPanel";
			mainTable.cellPadding = "0";
			mainTable.cellSpacing = "0";
			mainTable.setAttribute("width" ,tbWidth);
			mainTable.setAttribute("height", tbHeight);
			mainTable.setAttribute("style", "table-layout:fixed");
		var mainTbody = document.createElement("tbody");
		var tr1 = document.createElement("tr");
		var tr2 = document.createElement("tr");
		var tr3 = document.createElement("tr");
		
			var tl = document.createElement("td");
				tl.className = "tl";
				tl.width = "20px";
			var header = document.createElement("td");
				header.id = "header_"+id;
				header.className = "gvHeader";
			var tr = document.createElement("td");
				tr.className = "tr";
				tr.width = "29px";
			tr1.appendChild(tl);
			tr1.appendChild(header);
			tr1.appendChild(tr);
			
			
			var lb = document.createElement("td");
				lb.className = "bleft";
			var cont = document.createElement("td");
				cont.id=id;
			var rb = document.createElement("td");
				rb.className = "bright";
				
			tr2.appendChild(lb);
			tr2.appendChild(cont);
			tr2.appendChild(rb);
			
			
			var bl = document.createElement("td");
				bl.className = "bl";
				bl.width = "20px";
			var footer = document.createElement("td");
				footer.id="footer";
				footer.className = "gvFoot";
			var br = document.createElement("td");
				br.className = "br";
				br.width = "29px";
			tr3.appendChild(bl);
			tr3.appendChild(footer);
			tr3.appendChild(br);
			
		mainTbody.appendChild(tr1);
		mainTbody.appendChild(tr2);
		mainTbody.appendChild(tr3);
		mainTable.appendChild(mainTbody);
		
		return mainTable;		
}

var closeDivs = function(){
	document.getElementById("mainContent").removeChild(document.getElementById("allFCContent"));
}

	
		var initDiv = function(type,isMesageExist){
		  if(document.getElementById("allFCContent")){
		  		closeDivs();
		  }
			var divElem = document.createElement("div");
			divElem.id = "allFCContent";
			divElem.style.position = "absolute";
			divElem.style.zIndex = "9001";
			document.getElementById("mainContent").appendChild(divElem);
			
			switch(type)
				{
				case 'friends':
				 var mainbg = new mainBG();
				 document.getElementById("allFCContent").appendChild(mainbg);
				 document.getElementById('dvContent').innerHTML ="<table cellspacing=\"0\" cellpadding=\"0\" align=\"center\"><tbody><tr><td id=\"friendPanel\"></td></tr></tbody></table>";
				 document.getElementById("iconLeft").innerHTML = "<img src=\""+IMG_URL+"style/addFriend_small.png\"/>";
				if(isMesageExist){
				   document.getElementById("headTitle").innerHTML = "<div style='color:#003399;font-weight:bold;font-size:14px;margin-bottom:14px'>You have less than 10 members in your circle,to add members</div>";
				}
				 document.getElementById("headTitle").innerHTML += "<div style='font-size:13px'>Choose Your Friends</div>";
				 document.getElementById("iconRight").innerHTML = "<img class='imgBig' src=\""+IMG_URL+"style/close.png\" onclick=\"closeDivs()\">";
				 document.getElementById("footButtons").innerHTML = "<img class='imgBig' src=\""+IMG_URL+"style/add.png\" align=\"center\" onclick=\"inviteFriend()\"/>";
				 document.getElementById("friendPanel").appendChild(new drawCont("720px", "410px", "allContent"));
				 var img = _$("headerImg");
				 divElem.style.top = findPosY(img) + 60 + "px";
				 divElem.style.left = findPosX(img)+ 62 + "px";
				 initFriends();
				 
				 
				 break;
				case 'settings':
				  var mainbg = new mainBG();
				  document.getElementById("allFCContent").appendChild(mainbg);
				  document.getElementById("dvContent").innerHTML = "<div id=\"saveLoader\" style=\"display: none;\"><table><tr><td>Please Wait ... </td></tr><tr><td><img src=\""+IMG_URL+"pleasewaiting.gif\" /></td></tr></table></div><table cellspacing=\"0\" cellpadding=\"0\" align=\"center\"><tbody><tr><td id=\"leftPanel\"></td><td id=\"rightPanel\"></td></tr></tbody></table>";
				  document.getElementById("iconLeft").innerHTML = "<img src=\""+IMG_URL+"style/settings_small.png\">";
				  document.getElementById("headTitle").innerHTML = "Settings";
				  document.getElementById("iconRight").innerHTML = "<img class='imgBig' src=\""+IMG_URL+"style/close.png\" onclick=\"closeDivs()\"/>";
				  document.getElementById("footButtons").innerHTML = "<img class='imgBig' src=\""+IMG_URL+"style/save.png\" onclick=\"saveSett()\" align=\"left\"/><img class='imgBig' src=\""+IMG_URL+"style/cancel.png\" align=\"right\" onclick=\"closeDivs()\"/>";
				  var img = _$("headerImg");
				   divElem.style.top = findPosY(img) + 60 + "px";
				   divElem.style.left = findPosX(img)+32+"px";
				  leftPanel();
				  rightPanel();				  
				  break;
				default:
				 alert("somthing wrong");
				}
		}	
		
		
		var leftPanel = function(){
			uploadRandomNum = Math.floor(Math.random() * 99999);
			document.getElementById("leftPanel").appendChild(new drawCont("300px", "300px", "leftcont"));
			document.getElementById("header_leftcont").innerHTML = "Choose your icon";
			var html = '<div style="height: 248px"><span class="blueText">Current Icon:</span>'+ 
					   '<div id="iconDiv"></div>'+
                       '<div id="uploadIconError" class="error"></div>'+
						'<form style="width: 248px;" class="contentMargin"  action="'+serviceURL+'?query=uc_upload" enctype="MULTIPART/FORM-DATA" method="post" name="upload"' +
                        'onsubmit="return AIM.submit(this, {onStart : startUploadIcon, onComplete : completeIconUpload})">'+
                          '<input type="file" name="image" id="iconFileId" />'+
                          '<input id="upbutton"  type="submit" value="Upload"/>'+
                          '<input type="hidden" name="img_random" value="'+uploadRandomNum+'" />'+
                      '</form></div>';
			document.getElementById("leftcont").innerHTML =html;
			getSettingsInfo();
		}
		
		var rightPanel = function(){
			document.getElementById("rightPanel").appendChild(new drawCont("300px", "300px", "rightcont"));
			var html = "<table><tbody><tr><td><textarea id=\"desc_sett\" style=\"height: 242px; width: 242px\"></textarea></td></tr></tbody></table>";
			document.getElementById("header_rightcont").innerHTML = "Add comment";
			document.getElementById("rightcont").innerHTML =html;
		}

 var uploadedImage = null;

 
 var startUploadIcon = function(){
    
    var extArray = new Array("jpg","png","gif","jpeg");

    var name = _$("iconFileId").value;
    if(name.lastIndexOf(".")!=-1){
    
       var ext = name.substring(name.lastIndexOf(".")+1)
        for(var i=0;i<extArray.length;i++){
        if((new String(ext)).toLowerCase()==(new String(extArray[i])).toLowerCase()){
          //if(ext==extArray[i]){
            isCorrectFormat = true;
             break;
           }else
             isCorrectFormat = false;
         }
       
       }else{
         isCorrectFormat = false;
      }
    
   if(isCorrectFormat){
        uploadedImage = name;
        return true;
        
     }else{
       _$("uploadIconError").innerHTML = "Please choose correct image type";
       return false;
       }
 }
 
 
 var completeIconUpload = function(){
   if(isCorrectFormat){
     _$("uploadIconError").innerHTML = "";
   		setTimeout('setImg()',1000);
   }
}

var setImg = function(){
     isUploaded = true;
    _$("iconDiv").innerHTML='<img id="upldIcon" style="height:64px;" src="'+UPLOADED_FC_IMG+ uploadRandomNum +'_circle_icon.png">';

}
 


	var saveSett = function(){
		if(isUploaded){
		   var imageUrl =uploadRandomNum +'_circle_icon.png';
		}else{
          imageUrl = "noImg";
		 }
		var description = document.getElementById("desc_sett").value;
		req_saveSettings(imageUrl,description);
	}
	
		
	var getSelFriends = function(){
		var frList = friend_selector.getSelectedFrineds();
		var data = "query=saveFriends";
		for(var i=0; i<frList.length; i++){
			data = data + "&socialId=" + frList[i].userId + "&thumbUrl=" + frList[i].image + "&fName=" + frList[i].name + "&profileUrl=" + frList[i].webUri;
		}
	  Request.sendPOST(serviceURL, data, resp_getSelFriends);
	}
	
	var resp_getSelFriends = function(response){
	   closeDivs();
	}
	
	var getSettingsInfo = function(){
			var data = "query=icon_load&circleId=" + circleId;
			Request.sendPOST(serviceURL, data, resp_getSettingsInfo);	
	}
	
	function resp_getSettingsInfo(response){
	 var json = response.data;
	 var iconUrl = json.iconUrl;
	 var desc = json.description;
	 document.getElementById("iconDiv").innerHTML = "<img id=\"upldIcon\" style=\"height:64px;\" src=\""+iconUrl+"\">";
	 document.getElementById("desc_sett").value = desc;
	 
	}
	
  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }