var isIE = ( /msie/i.test(navigator.userAgent) &&  !/opera/i.test(navigator.userAgent) );


var fillHTML = function() {

	var html = 	'<table cellpadding="0" cellspacing="0" align="center">'+
					"<tr style='background-color: white; border: 0px;'>"+
						"<td valign=top align='center' >"+//height='180px'
							"<div align=center>"+
								"<div id='adPlaceholderTop'></div>"+
							"</div>"+
						"</td>"+
					"</tr>"+
				'</table>'+
				'<table cellpadding="0" cellspacing="0" align="center">'+
					'<tr style="background-color: white">'+
						'<td align="center">'+
							'<img onclick="req_getImages()" style="padding: 10px; cursor: pointer;" src="'+IMG_URL+'galery.png" />'+
							'<img  onclick="sendAppInvitation()" src="'+IMG_URL+'invite.png" style="padding: 10px; cursor: pointer;" />'+
							'<img  onclick="drawFriends(\'selectFriend\')" src="'+IMG_URL+'select.png" style="padding: 10px; cursor: pointer;" />'+
						'</td>'+
					'</tr>'+
				'</table>'+
				'<table cellpadding="0" cellspacing="0" align="center" id="main_table_wrap">'+				
					'<tbody>'+
						'<tr>'+
							'<td valign="top" width="180px">'+
								'<div id="adPlaceholderLeft"></div>'+
							'</td>'+
							'<td valign="top" width="700px" align="left">'+
								'<table cellpadding="0" cellspacing="0" align="center" id="main_table">'+
									'<tr>'+
										'<td align="center" class="text" style="font-size:18px; padding-bottom:10px;"> Draw On Your Friends Faces and send them as Comment !!! </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 id="dialog" title="Delete Image">'+
										'<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure want to delete selected image?</p>'+
									'</div>'+*/
									'<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" class="text" style="color:red;" id="info"></td>'+
											'</tr>'+
											'<tr>'+
												'<td align="center" class="text" style="font-size: 18px;padding-top: 10px;" id="title_">Select Your Best Friend and Draw on her(his) Face!</td>'+
											'</tr>'+
											'<tr>'+
												'<td align="center">'+
													'<table>'+
														'<tbody id="friend_tbody">'+
														'</tbody>'+
													'</table>'+
												'</td>'+
											'</tr>'+
											'<tr>'+
												'<td align="right" class="text" style="cursor:pointer"  id="top_td"></td>'+
											'</tr>'+
											'<tr>'+
												'<td><div id="friends_container"></div></td>'+
											'</tr>'+
										'</tbody>'+
									'</table>'+
								'</div>'+
							'</td>'+
							'<td valign="top" width="180px">'+
								'<div id="adPlaceholderRight"></div>'+
							'</td>'+
						'</tr>'+
					'</tbody>'+
				'</table>'+
				'<table cellpadding="0" cellspacing="0" align="center">'+
					"<tr style='background-color: white; border: 0px;'>"+
						"<td style='padding:5px;' align='center' colspan='2'>"+
							"<div align=center>"+
								"<div id='adPlaceholderBottom'></div>"+
							"</div>"+
						"</td>"+
					"</tr>"+
					"<tr style='background-color: white; border: 0px;'>"+
						"<td style='padding:5px;' align='left'>"+
							'<iframe frameborder="0" src = "http://adturns.com/ad.php?c=46&fb_sig_user='+userId+'" width = "728" height = "60" style = "border: none; overflow: hidden" ></iframe>'+
						"</td>"+
					"</tr>"+
				'</table>'+
				'<table cellpadding="0" cellspacing="0" align="center" width="700px">'+
					'<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>';
				 
				
	_$("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 includeJS=function(jsPath){
 	var script = document.createElement("script");
	 script.setAttribute("type", "text/javascript");
	 script.setAttribute("src", jsPath);
	 document.getElementsByTagName("head")[0].appendChild(script);
};

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

var loadedFriends;

var drawRandomFriend = function() {
	loadedFriends = friend_selector.getFriendList();
	if(loadedFriends.length == 0){
		setTimeout("drawRandomFriend()", 5000);
	} else {
		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,
		saveImgPath: SERVER_URL + "jpg_encoder_download.php"
	};
	
	var params = {
		allowscriptaccess: "always"
	};
	
	var attributes = {
	  	id: "myContent",
	  	name: "myContent"
	};
	
	swfobject.embedSWF(SWF_NAME, "myContent", "500", "510", "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() {
	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="700px">'+
						/*'<tr style="background-color: white;">'+
							'<td align="left" colspan="5" style="cursor:pointer" class="text" onclick="backToHome()"> Back </td>'+
						'</tr>'+*/
						'<tr>'+
							'<td colspan="5" class="big_text" align="center">Send Your Favorite Image to Your Friends as Comment !</td>'+
						'</tr>'+
						/*'<tr>'+
							'<td colspan="5" align="center" id="send_button"><img onclick="sendFriends()" style="cursor:pointer;padding:10px;" src="'+IMG_URL+'send_friends.png" /></td>'+
						'</tr>'+*/
						'<tr>'+
							'<td align="center" colspan="5" class="text" style="color:red; font-size: 14px;" id="info_"></td>'+
						'</tr>'+
						'<tr>'+
							'<td>'+
								'<div id="saved_div">'+
									'<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">'+
														'<img style="cursor: pointer; padding-top: 2px; padding-left: 3px" title="Delete" src="'+IMG_URL+'delete_icon.png" onclick="deleteImage(\''+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("selected");
	
	for(var i=0; i<selectedImages.length; i++) {
		selectedImages[i].className = "trigger";
	}
	
	_$(img_src+"_img").className = "selected";
}

var sendImage = function(img_url) {
	if(_$("title_")) _$("title_").innerHTML = "Select Friends and click on \"Send Image\". ";
	selectImage(img_url);
	//selectedImage = img_url;
	drawFriends("comments");
}

var sendFriends = function() {
	
	var selectedImages = document.getElementsByClassName("selected");
	
	if(selectedImages.length == 0 ) {
		_$("info_").innerHTML = "At first select Image pls!";
		return;
	}
	
	if(_$("send_button")) {
		_$("send_button").innerHTML = '<img src="'+IMG_URL+'send.png" style="padding: 10px;cursor:pointer;" onclick="copyForSending()" />';
	}  
	if(_$("title_")) _$("title_").innerHTML = "Friend Selector";
	if(_$("info_")) _$("info_").innerHTML = "";
	if(_$("top_td")) {
		_$("top_td").innerHTML = "Close Friend Selector";
		_$("top_td").onclick = function() {
			CloseFriendSelector();
		}
	}
	drawFriends("comments");
}

var postBulletin = function(img){

	var title = "Draw on Your Friends Faces!!!";
	
	var body = "<a href='" + canvas_url + "'>See how funny I have draw on my friend face, Try you too ;)</a></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=draw_on_face&userId="+userId+"&channel=bulletin";
			Request.sendGET(url, "", "");
		}
	}
}

var drawFriends = function(type) {
	
	if(_$("main_table")) _$("main_table").style.display = "none";
	
	//if(type != "comments") {
		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 = "10px";
	
	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") {
		if(_$("title_")) _$("title_").innerHTML = " Select Your Best Friend and Draw on her(his) Face !";
		if(_$("info_")) _$("info_").innerHTML = "";
		
		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() {
	_$("info").innerHTML = "";
	
	var friends = friend_selector.getSelectedFrineds();
	
	if(friends.length == 0) {
		_$("info").innerHTML = "At first select friends plz.";
		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");
	    }
		//if(isIE) { 
			flashOnLoadHandler();
		//}
	} else {
		_$("info").innerHTML = "You can select only one Friend !";
		return;
	}
}

var copyForSending = function() {
	
	var friends = friend_selector.getSelectedFrineds();
	
	if(friends.length == 0) {
		_$("info").innerHTML = "At first select friends plz.";
		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() {
	drawFriends("invitation");
	if(_$("title_")) _$("title_").innerHTML = "Invite your best friends!";
	if(_$("info_")) _$("info_").innerHTML = "";
}

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

	var friends = friend_selector.getSelectedFrineds();
	
	if(friends.length == 0) {
		_$("info").innerHTML = "At first select friends plz.";
		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=draw_on_face&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 Friend,Hey I have a fun with your face !";
	var content = "<div><a href='"+canvas_url+"' target='_blank'>Draw something 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 nice gifts 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=draw_on_face&userId="+userId+"&channel=invites";
    	Request.sendGET(url, "", "");
    } else {
    	//console.log(response.text);
    }
}

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

var showDialog = function() {
	$("#dialog").dialog({
		bgiframe: true,
		resizable: false,
		height:140,
		modal: true,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'Delete image': function() {
				//$(this).dialog('close');
			}
			/*Cancel: function() {
				$(this).dialog('close');
			}*/
		}
	});
}

var resp_deleteImage = function(response) {
	if(response.text == "ok") {
		req_getImages();
	}
}

var backToHome = function() {
	if(_$("main_table")) _$("main_table").style.display = "none";
	if(_$("friend_table")) _$("friend_table").style.display = "";
	if(_$("images_table")) _$("images_table").style.display = "none";
	
	if(_$("title_")) _$("title_").innerHTML = " Select Your Best Friend and Draw on her(his) Face !";
	if(_$("info_")) _$("info_").innerHTML = "";
	drawFriends("selectFriend");
}

var changeColor = function(obj) {
	obj.style.backgroundColor = "#7a84ae";
	obj.style.color = "white";
	obj.style.textDecoration = "underline";
};

var changeColor_ = function(obj) {
	obj.style.backgroundColor = "#dde0fd";
	obj.style.color = "#333";
	obj.style.textDecoration = "none";
};

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

var is_int = function (variable){
	return variable.constructor === Number && Math.round(variable, 0) === variable;
};

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;
};

//---------------------------------- 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) {}



////////////////////////  start promotion
$(document).ready(function(){
		// determine if app is installed
		var global_viewerId = 'non';
		if(opensocial.hasPermission(opensocial.Permission.VIEWER)) {
			global_viewerId = gadgets.views.getParams().viewerId;
		}
 

		 var actionRedirect = gadgets.views.getParams()["goto"];
		 var destination = gadgets.views.getParams()["appname"];
		 var landingPage = gadgets.views.getParams()["landpage"];
		 
		 if(actionRedirect != null && actionRedirect .length > 0) {
				var url = "http://adturns.com/channelStatistics.php?act_own=32&socialType=myspace&appId=draw_on_face&userId="+global_viewerId+"&channel=goto_"+destination;
				var os_params = {};
				os_params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
				os_params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
				gadgets.io.makeRequest(url, dummyResponseHandler, os_params);
			  
				if(typeof landingPage == 'undefined' || landingPage==null){
					window.location = 'http://profile.myspace.com/Modules/Applications/Pages/Canvas.aspx?appId='+actionRedirect;
				} else {
					window.location = 'http://www.myspace.com/'+actionRedirect;
				}
		 }
	});

function dummyResponseHandler(response){
	//nothing here
}
////////////////////////  end promotion