var fillHTML = function() {

	var html = 	'<table cellpadding="0" cellspacing="0" align="center">'+
					"<tr>"+
						"<td colspan='3' align='center'>"+
							'<table cellpadding="0" cellspacing="0" align="center">'+
								"<tr>"+
									"<td align='center' >"+
										"<div align=center>"+
											"<div id='adPlaceholderTop'></div>"+
										"</div>"+
									"</td>"+
								"</tr>"+
							'</table>'+
						"</td>"+
					"</tr>"+
					'<tr>'+
						'<td align="center" valign="top">'+
							"<div align=center>"+
								"<div id='adPlaceholderLeft'></div>"+
							"</div>"+
						'</td>'+
						'<td align="center" valign="top">'+
							'<div id="tabsDiv">'+
								'<table cellspacing="0" cellpadding="0" align="center" width="100%">'+
									'<tr>'+
										'<td align="center">'+
											'<div class="ubercolortabs" id="tabContainer">'+
												'<ul>'+
													'<li name="new"><a href="javascript: drawFriends(\'selectFriend\')" style="margin-left: 12px"><span>New Mustache</span></a></li>'+
													'<li name="myImages"><a href="javascript: req_getImages()"><span>My Gallery</span></a></li>'+
													'<li name="invite"><a href="javascript: sendAppInvitation()"><span>Invite Friends</span></a></li>'+
												'</ul>'+
											'</div>'+
											'<div class="ubercolordivider"> </div>'+
										'</td>'+
									'</tr>'+
									'<tr><td><img src="'+IMG_URL+'space.png" onload="getFriends()" /></td></tr>'+
								'</table>'+
							'</div>'+
							'<div style="padding: 10px">'+
								'<table cellpadding="0" cellspacing="0" align="center" id="main_table">'+
									'<tr>'+
										'<td align="center" id="select" style="cursor: pointer;"><img src="'+IMG_URL+'select.png" onclick="drawFriends(\'selectFriend\')" /></td>'+
									'</tr>'+
									'<tr>'+
										'<td align="center">'+
												'<div id="myContent" style="padding: 5px;"><h2 class="text">Please Download Flash Player for using <i>'+APP_NAME+'</i> app.</h2>'+
													'<p><a target="_blank" href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>'+
												'</div>'+
										'</td>'+
									'</tr>'+
								'</table>'+
							'</div>'+
							'<div style="padding: 10px">'+
								'<table cellpadding="0" cellspacing="0" align="center" id="images_table" style="display: none;">'+
									'<tr>'+
										'<td align="center" id="images_container"></td>'+
									'</tr>'+
								'</table>'+
							'</div>'+
							'<div id="friend_table">'+
								'<table cellpadding="0" cellspacing="0" align="center">'+
									'<tbody>'+
										'<tr>'+
											'<td align="center">'+
												'<table>'+
													'<tbody id="friend_tbody">'+
													'</tbody>'+
												'</table>'+
											'</td>'+
										'</tr>'+
										'<tr>'+
											'<td><div id="friends_container"></div></td>'+
										'</tr>'+
									'</tbody>'+
								'</table>'+
							'</div>'+
						'</td>'+
						'<td align="center" valign="top">'+
							"<div align=center>"+
								"<div id='adPlaceholderRight'></div>"+
							"</div>"+
						'</td>'+
					'</tr>'+
					'<tr>'+
						'<td colspan="3" align="center">'+
							'<table cellpadding="0" cellspacing="0" align="center">'+
								"<tr>"+
									"<td align='center'>"+
										"<div align=center>"+
											"<div id='adPlaceholderBottom'></div>"+
										"</div>"+
									"</td>"+
								"</tr>"+
								/*"<tr>"+
									"<td align='center'>"+
										'<iframe frameborder="0" src = "http://myspace.playgamesite.com/ad.php?c=46&fb_sig_user='+userId+'" width = "728" height = "90" style = "border: none; overflow: hidden" ></iframe>'+
									"</td>"+
								"</tr>"+*/
							'</table>'+
						'</td>'+
					'</tr>'+
					'<tr>'+
						'<td colspan="2" align="right">'+
							'<table cellpadding="0" cellspacing="0" align="center" id="report_abuse" width="900px">'+
								'<tbody>'+
									'<tr>'+
										'<td align="right"><a class="text" target="_blank" href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=418493483"> Report Abuse </a></td>'+
									'</tr>'+
								'</tbody>'+
							'</table>'+
						'</td>'+
					'</tr>'+
					/*'<tr>'+
						'<td>'+
							'<div id="question" style="display:none; cursor: default">'+ 
					        	'<h1>Are You shure want to delete?</h1>'+ 
					        	'<input type="button" id="yes" value="Yes" />'+ 
					        	'<input type="button" id="no" value="No" />'+ 
					        '</div>'+
						'</td>'+
					'</tr>'+*/
				'</table>'+
				'<div id="question" style="display:none; cursor: default">'+ 
	        		'<h2>Are You shure want to delete?</h2>'+ 
	        		'<input type="button" id="yes" value="Yes" style="margin: 3px;" />'+ 
	        		'<input type="button" id="no" value="No" style="margin: 3px;" />'+ 
	        	'</div>';

	_$("container").innerHTML = html;

	flashCalling();
	getFriends();
	//req_getAppUsersIds();

	applyAds('adDivTop', 'adPlaceholderTop');
	applyAds('adDivBottom', 'adPlaceholderBottom');
	applyAds('adDivLeft', 'adPlaceholderLeft');
	applyAds('adDivRight', 'adPlaceholderRight');
	//support socialreach ads
	sr_gof();
}

function applyAds(adDiv, adHolderDiv){
	var adTop = document.getElementById(adDiv);
	adTop.parentNode.removeChild(adTop);
	var adHolder = document.getElementById(adHolderDiv);
	adHolder.appendChild(adTop);
	adTop.style.display='block';
};

var getFriends = function(){
	friend_selector = new FriendSelector("friends_container", 4, 6, "top");
	friend_selector.init(); 
	drawRandomFriend();
};

var loadedFriends;

var drawRandomFriend = function() {
	loadedFriends = friend_selector.getFriendList();
	if(loadedFriends.length == 0){
		setTimeout("drawRandomFriend()", 5000);
	} else {
		selectTab("new");
		var randomnumber = Math.floor(Math.random()*loadedFriends.length);
		FRIEND_PROFILE_URL = loadedFriends[randomnumber].fields_.thumbnailUrl.replace("s_", "l_");
		FRIEND_SOCIAL_ID = loadedFriends[randomnumber].fields_.id;
		
		flashOnLoadHandler();
	}
}

var flashCalling = function(){
	
	var flashvars = {
		userId: userId,
		savedImgUrl: SERVER_URL + "jpg_encoder_download.php",
		xmlPath: SERVER_URL + "mustach.xml"
	};
	
	var params = {
		allowscriptaccess: "always"
	};
	
	var attributes = {
	  	id: "myContent",
	  	name: "myContent"
	};
	
	swfobject.embedSWF(SWF_NAME, "myContent", "550", "400", "9.0.45", SERVER_URL+"expressInstall.swf", flashvars, params, attributes);
};

var flashOnLoadHandler = function() {
	var obj = swfobject.getObjectById("myContent");
	if (obj && typeof obj.loadNewImage != "undefined") {
		 try{
			 obj.loadNewImage(FRIEND_PROFILE_URL);
		 }catch(err){
	    }
	}
}

var imgSavedHandler = function(img_url) {
	req_getImages();
	//sending_img = "genSWF/" + userId + "/" + img_url; 
	//sendImageAsComment(FRIEND_SOCIAL_ID, sendImageCallBack);
}

var sendImageCallBack = function(result) {
	req_getImages();
}

var req_getImages = function() {
	selectTab("myImages");
	if(_$("main_table")) _$("main_table").style.display = "none";
	if(_$("friend_table")) _$("friend_table").style.display = "none";
	if(_$("images_table")) _$("images_table").style.display = "";
	
	_$("images_container").innerHTML = "<span class='text'> Loading Saved images! </span>";
	
	Request.sendPOST(SERVER_URL+"index.php?action=getImages", "userId=" + userId, resp_getImages);
}

var resp_getImages = function(response) {
	if(response.text != "none") {
		
		var data = eval('('+response.text+')');
		if(data == "undefiend") {
			_$("images_container").innerHTML =  "<span class='text'> Pls try again !</span>";
		}
		var count = 0;

		var str = '<div>'+
					'<table id="imagesTable" cellpadding="2" cellspacing="0" align="center" width="600px">'+
						'<tr>'+
							'<td colspan="5" class="text" style="font-size: 17px;" align="center">Send Your Favorite Image to Your Friends as Comment !</td>'+
						'</tr>'+
						'<tr>'+
							'<td>'+
								'<div class="scroll" >'+
									'<table cellpadding="0" cellspacing="0" width="100%" align=center>'+
										'<tr>';
			
							for ( var i = 0; i < data.images.length; i++ ) {
								var imgSrc = data.images[i].imageSrc;
								count++;
								str +=	'<td id="'+imgSrc+'_td" valign="bottom">'+
											'<table cellpadding="0" cellspacing="0" width="100%">'+
												'<tr>'+
													'<td align="center" width="110px">'+
														'<div class="img-shadow">'+
															'<img id="'+imgSrc+'_img" class="trigger" onclick="sendImage(\''+imgSrc+'\')" src="'+SERVER_URL+'genSWF/'+userId+'/'+imgSrc+'?t='+Math.random()+'" />'+
														'</div>'+
													'</td>'+
													'<td align="left" valign="top">'+
														'<a target="_blank" href="'+SERVER_URL+'genSWF/'+userId+'/'+imgSrc+'"><img title="View Original" border="0" style="cursor:pointer; padding-top: 3px;" src="'+IMG_URL+'view.png" /></a><br>'+
														'<img style="cursor: pointer; padding-top: 2px; padding-left: 3px" title="Delete" src="'+IMG_URL+'delete_icon.png" onclick="showDialog(\''+imgSrc+'\')" /></br>'+
														'<img style="cursor: pointer; padding-top: 5px" title="Post Bulletin" src="'+IMG_URL+'bulletin_icon.png" onclick="postBulletin(\''+imgSrc+'\')" /></br>'+
													'</td>'+
												'</tr>'+
												'<tr>'+
													'<td align="left">'+
														'<img style="cursor: pointer;" src="'+IMG_URL+'send_.png" onclick="sendImage((\''+imgSrc+'\'))" />'+
													'</td>'+
												'</tr>'+
											'</table>'+
									'</td>';
								if(count == 4) {
									str += '</tr><tr>';
									count = 0;
								}
							}
						str += '</table>'+
							'</div>'+
						'</td>'+
					'</tr>'+
				'</table>';
			
		_$("images_container").innerHTML = str;
	} else {
		_$("images_container").innerHTML = "<span style='color: #3b6bb5; font-size:18px; font-family:serif;'>You have not saved images ! &nbsp;&nbsp;&nbsp;</span><span style='cursor: pointer;' onclick='backToHome()'>Back</span>";
	}
}

var selectImage = function(img_src) {
	selectedImage = img_src;
	var selectedImages = document.getElementsByClassName("selectedImage");
	
	for(var i=0; i<selectedImages.length; i++) {
		selectedImages[i].className = "trigger";
	}
	
	_$(img_src+"_img").className = "selectedImage";
}

var sendImage = function(img_url) {
	selectImage(img_url);
	drawFriends("comments");
	if(_$("images_table")) _$("images_table").style.display = "none";
}

var sendFriends = function() {
	
	var selectedImages = document.getElementsByClassName("selectedImage");
	
	if(selectedImages.length == 0 ) {
		showInfo("<h2>Select Friend Please!</h2>");
		return;
	}
	
	if(_$("send_button")) {
		_$("send_button").innerHTML = '<img src="'+IMG_URL+'send.png" style="padding: 10px;cursor:pointer;" onclick="copyForSending()" />';
	}  

	drawFriends("comments");
}

var postBulletin = function(img){

	var title = "Draw Mustaches on Your Friends Faces!!!";
	
	var body = "<a href='" + canvas_url + "'></a>I have fun with my friends faces, try you too :P </br><br>"+
				"<a href='" + canvas_url + "'><img border='0' width='200px' src='"+SERVER_URL+"genSWF/"+userId+"/"+img+"' /></a></br>";

    var params = {};
    params[opensocial.Message.Field.TITLE] = title;
    params[opensocial.Message.Field.TYPE] = opensocial.Message.Type.NOTIFICATION;
    var message = opensocial.newMessage(body, params);
    opensocial.requestSendMessage(opensocial.IdSpec.PersonId.VIEWER, message, bulletinCallback);
}

var bulletinCallback = function(response){
	if(response && !response.hadError()){
		if(1 === response.getData()){
			var url = "http://adturns.com/channelStatistics.php?act_own=32&socialType=myspace&appId=mustache_new&userId="+userId+"&channel=bulletin";
			Request.sendGET(url, "", "");
		}
	}
}

var drawFriends = function(type) {
	
	if(type == "selectFriend") {
		selectTab("new");
		if(_$("main_table")) _$("main_table").style.display = "none";
		if(_$("images_table")) _$("images_table").style.display = "none";
	}
	
	if ($("#friend_table:first").is(":hidden")) {
        $("#friend_table").slideDown("slow");
    }

	friend_selector.draw();
	
	var friendTbody = _$("friend_tbody");
	
	if(_$("send_button_tr")) {
		tr = _$("send_button_tr");
		tr.parentNode.removeChild(tr);
	}
	
	var TR = document.createElement("TR");
	TR.id = "send_button_tr";
	var TD = document.createElement("TD");
	TD.style.textAlign = "center";
	TD.style.paddingTop = "0px";
	
	if(type == "comments") {
		var button = document.createElement("IMG");
		button.style.cursor = "pointer";
		button.src = IMG_URL+"send.png";
		button.onclick = function() {
			copyForSending();
		}
		TD.appendChild(button);
	}else if(type == "invitation") {
		var button = document.createElement("IMG");
		button.style.cursor = "pointer";
		button.src = IMG_URL+"sendInv.png";
		button.onclick = function() {
			inviteAll("appInv");
		}
		TD.appendChild(button);
	} else if(type == "selectFriend") {
		var button = document.createElement("IMG");
		button.style.cursor = "pointer";
		button.src = IMG_URL+"draw.png";
		button.onclick = function() {
			selectFriend();
		}
		TD.appendChild(button);
	}
	
	TR.appendChild(TD);
	friendTbody.appendChild(TR);
}

var selectFriend = function() {
	var friends = friend_selector.getSelectedFrineds();
	
	if(friends.length == 0) {
		showInfo("<h2>Select Friend Please!</h2>");
		return;
	}
	
	if(friends.length == 1) {
		var url = friends[0].fields_.thumbnailUrl;
		FRIEND_PROFILE_URL = url.replace("s_", "l_");
		FRIEND_SOCIAL_ID = friends[0].fields_.id;
		
		if(_$("friend_table")) _$("friend_table").style.display = "none";
		if ($("#main_table:first").is(":hidden")) {
	        $("#main_table").slideDown("slow");
	    }

		flashOnLoadHandler();
		
	} else {
		showInfo("<h2>You can select only one Friend!</h2>");
		return;
	}
}

var copyForSending = function() {
	
	var friends = friend_selector.getSelectedFrineds();
	
	if(friends.length == 0) {
		showInfo("<h2>Select Friend Please!</h2>");
		return;
	}
	
	var data = "userId=" + userId + "&src=" + selectedImage;
	Request.sendPOST(SERVER_URL+"includes/copy.php?action=copyforSending", data, resp_copyForSending);
};

var resp_copyForSending = function(response) {
	sending_img = response.text;
	inviteAll("sendComment");
};

var sendAppInvitation = function() {
	selectTab("invite");
	if(_$("main_table")) _$("main_table").style.display = "none";
	if(_$("images_table")) _$("images_table").style.display = "none";
	if(_$("friend_table")) _$("friend_table").style.display = "block";
	
	drawFriends("invitation");
}

var inviteAll = function(type) {
	
	var friendIndex = 0;
	var recipientsIds = [];

	var friends = friend_selector.getSelectedFrineds();
	
	if(friends.length == 0) {
		showInfo("<h2>Select Friend Please!</h2>");
		return;
	}
	
	for(var i =0; i< friends.length; i++) {
		recipientsIds.push(friends[i].fields_.id);
	}

	var inviteAllCallback = function(result){
		var finished = true;
		if (result.data_ == MyOpenSpace.PostTo.Result.SUCCESS) {
			friendIndex++;
			if(friendIndex < friends.length){
				finished = false;
				if(type == "sendComment") {
					sendImageAsComment(friends[friendIndex].fields_.id, inviteAllCallback);
					var url = "http://adturns.com/channelStatistics.php?act_own=32&socialType=myspace&appId=mustache_new&userId="+userId+"&channel=comment";
					Request.sendGET(url, "", "");
				} 
			}
		}
	}
	
	if (friends.length > 0){
		if(type == "sendComment") {
			sendImageAsComment(friends[friendIndex].fields_.id, inviteAllCallback);
		} else {
			inviteFriend(recipientsIds);
		}
	}
}

var sendImageAsComment = function(friendId, inviteAllCallback){
	var title = "Hey I have a fun with your face !";
	var content = "<div><a href='"+canvas_url+"' target='_blank'>Draw Mustache back on "+userName+"'s face!</a><div><br>"+
					"<a href='"+canvas_url+"' target='_blank'><img src='"+SERVER_URL+sending_img+"' border='0' width='200px' /></a>";
	postTo_(title, content, friendId, "PUBLIC_MESSAGE", inviteAllCallback);
}

function inviteFriend(recipients){

    var body = "Hey [recipient]! [sender] wants you to ";
    body += "add [app]. A fun new way to give fun pictures to your friends!";

    var reason = opensocial.newMessage(body);
    opensocial.requestShareApp(recipients, reason, rsaCallback);
}

var CloseFriendSelector = function() {
	if ($("#friend_table:first").is(":hidden")) {
        $("#friend_table").slideDown("slow");
    } else {
        $("#friend_table").slideUp();
    }
	
	if(_$("send_button")) _$("send_button").innerHTML = '<img onclick="sendFriends()" style="cursor:pointer;padding:10px;" src="'+IMG_URL+'send_friends.png" />';
}

var rsaCallback = function(response){
	if(response && !response.hadError()){
    	var url = "http://adturns.com/channelStatistics.php?act_own=32&socialType=myspace&appId=mustache_new&userId="+userId+"&channel=invites";
    	Request.sendGET(url, "", "");
    } else {
    }
}

var deleted_image;

var showDialog = function(img_id) {
	deleted_image = img_id;
	$.blockUI({ 
		message: $('#question'),
		fadeIn: 700, 
        fadeOut: 700,
        showOverlay: false, 
        centerY: true,
		css: {
			top:  '200px', //($(window).height() - 200) /2 + 'px', 
           // left: '300px',//($(window).width() - 275) /2 + 'px',
            width: '350px',
            padding: '5px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .6, 
            color: '#fff'
		} 
	});
	
	$('#yes').click(function() {
		$.unblockUI();
		req_deleteImage();
     }); 

     $('#no').click(function() { 
    	 $.unblockUI(); 
         return false; 
     }); 
}

function req_deleteImage() {
	if(_$("images_container")) _$("images_container").innerHTML = "<span class='text'>Deleting image ...</span>";
	var data = "userId=" + userId + "&imgSrc="+deleted_image;
	Request.sendPOST(SERVER_URL+"index.php?action=deleteImage", data, resp_deleteImage);
}

var resp_deleteImage = function(response) {
	if(response.text == "ok") {
		showInfo("<h2>Your selected image has been deleted!</h2>");
		req_getImages();
	}
}

var showInfo = function(info) {
	 $.growlUI(info);
}

var _$ = function(id){
	return document.getElementById(id);
}

document.getElementsByClassName = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)) retnode.push(elem[i]);
	}
	return retnode;
};

var selectTab = function(tabName){
	var tabDivs = _$("tabContainer").getElementsByTagName("li");	
	for (var i=0;i<tabDivs.length;i++){
		if (tabDivs[i].getAttribute("name") == tabName){
			tabDivs[i].className = "selected";
		}else{
			tabDivs[i].className = "";
		}
	}
	selectedTab = tabName;
}

//---------------------------------- get app users --------------------------------------//
var appUsersIds;

var req_getAppUsersIds = function() {
	Request.sendPOST(SERVER_URL+"index.php?action=getAppUsers", "", resp_getAppUsersIds);
}

var resp_getAppUsersIds = function(response) {
	if(response.text != "none") {//&& !response.errorText
		var data = eval('('+response.text+')');
		appUsersIds = data.folders;
		
		sendNotifications();
	}
}

var sendNotifications = function() {
	var templateParams = '[';
	
	for (var i = 0; i < appUsersIds.length; i++ ) {
		var user_id = appUsersIds[i].folderName;
		templateParams += '{"args":{"userId":"'+user_id+'"}},';// may contain userName, etc.
	}
	templateParams = templateParams.substring(0, templateParams.length-1);
	templateParams += ']';
	
	var contentTemplate = "Get funny frames for your photos.";
	
	var data = "templateParams=" + templateParams + 
				"&contentTemplate=" + contentTemplate + 
				"&applicationId=134215" + 
				"&consumerKey=" + consumer_key + 
				"&consumerSecret=" + consumer_secret+
				"&canvasButtonLabel=Create New Frames!";//profileButtonLabel
	
	Request.sendPOST("http://justlocate.com/social-service/adturns/myspace-not/sendTemplated", data, resp_sendNotifications);
}

var resp_sendNotifications = function(response) {}