var child_canvas_url = "http://profile.myspace.com/Modules/Applications/Pages/Canvas.aspx?appId=134215";
var flower_canvas_url = "http://profile.myspace.com/Modules/Applications/Pages/Canvas.aspx?appId=135917";
var sport_canvas_url = "http://profile.myspace.com/Modules/Applications/Pages/Canvas.aspx?appId=140063";

var fillHTML = function() {
	var html = 	'<table cellpadding="0" cellspacing="0" align="center">'+
					/*"<tr style='background-color: white; border: 0px;'>"+
						"<td style='padding:5px;' align='center' >"+
							"<div align=center>"+
								'<iframe frameborder="0" src = "http://adturns.com/ad.php?c=61&fb_sig_user='+userId+'" width = "728" height = "90" border="0" style = "border: none; overflow: hidden" frameborder="0"  scrolling="no" ></iframe>'+
							"</div>"+
						"</td>"+
					"</tr>"+*/
					"<tr>"+
						"<td style='padding-top:10px;' align='center'>"+
							"<div align=center><div id='adPlaceholderTop'></div></div>"+
						"</td>"+
					"</tr>"+
				'</table>'+
				'<table cellpadding="0" cellspacing="0" align="center" class="main_table" id="main_table">'+
					'<tr>'+
						'<td colspan="2" width="100%" height="207px" align="center">'+
							'<img src="'+IMG_URL+'top.png" />'+
						'</td>'+
					'</tr>'+
					'<tr>'+
						'<td width="50%" height="600px" align="center" valign="top" id="leftTD"></td>'+
						'<td width="50%" height="600px" align="center" valign="top" id="rightTD"></td>'+
					'</tr>'+
					'<tr>'+
						'<td colspan="2"><img src="'+IMG_URL+'space.png" onload="getFriends()"></td>'+
					'</tr>'+
					'<tr style="background-color: white">'+
						'<td align="center" colspan="2">'+
							'<img onclick="drawSavedPicture()" style="padding: 10px; cursor: pointer;" src="'+IMG_URL+'galery.png" />'+
							'<img  onclick="sendAppInvitation()" src="'+IMG_URL+'invite.png" style="padding: 10px; cursor: pointer;" />'+
						'</td>'+
					'</tr>'+
				'</table>'+
				'<table cellpadding="0" cellspacing="0" align="center" id="friend_table" style="display: none;">'+
					'<tbody id="friend_tbody">'+
						'<tr>'+
							'<td align="left" style="cursor:pointer" class="text" onclick="backToHome()"> Back </td>'+
						'</tr>'+
						'<tr>'+
							'<td align="center" class="text" style="color:red;" id="info"></td>'+
						'</tr>'+
						'<tr>'+
							'<td align="center" class="text" id="title"></td>'+
						'</tr>'+
						'<tr>'+
							'<td><div id="friends_container"></div></td>'+
						'</tr>'+
					'</tbody>'+
				'</table>'+
				'<table cellpadding="0" cellspacing="0" align="center" id="images_table" style="display: none;">'+
					'<tr>'+
						'<td align="center" id="images_container"></td>'+
					'</tr>'+
				'</table>'+
				'<table cellpadding="0" cellspacing="5">'+
					'<tr>'+
						'<td class="text" style="font-size: 21px;">Related Apps: </td>'+
						'<td>'+
							'<a target="_blank" href="'+child_canvas_url+'">'+
								"<div class='img-shadow'>"+
									'<img src="'+IMG_URL+'child.jpg" border="0" />'+
								"</div>"+
							'</a>'+
						'</td>'+
						'<td class="text">Make Your Kids Photo Frames !</td>'+
						'<td>'+
							'<a target="_blank" href="'+flower_canvas_url+'">'+
								"<div class='img-shadow'>"+
									'<img src="'+IMG_URL+'flower.jpg" border="0" />'+
								"</div>"+
							'</a>'+
						'</td>'+
						'<td class="text">Make Your Flower Photo Frames !</td>'+
						'<td>'+
							'<a target="_blank" href="'+sport_canvas_url+'">'+
								"<div class='img-shadow'>"+
									'<img src="'+IMG_URL+'sport.jpg" border="0" />'+
								"</div>"+
							'</a>'+
						'</td>'+
						'<td class="text">Make Your Sport Photo Frames !</td>'+
					'</tr>'+
				'</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>"+
								'<iframe frameborder="0" src = "http://adturns.com/ad.php?c=61&fb_sig_user='+userId+'" width = "728" height = "90" border="0" style = "border: none; overflow: hidden" frameborder="0"  scrolling="no" ></iframe>'+
							"</div>"+
						"</td>"+
					"</tr>"+*/
					"<tr>"+
						"<td style='padding-top:10px;' align='center'>"+
							"<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>';
				
	_$("container").innerHTML = html;
	drawLeftTD();
	drawRightTD();
	//req_getAppUsersIds();

	applyAds('adDivTop', 'adPlaceholderTop');
        applyAds('adDivBottom', 'adPlaceholderBottom');
//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 drawLeftTD = function() {
	var html = '<table cellpadding="0" cellspacing="0" align="center" width="100%">'+
					/*'<tr>'+
						'<td align="center" class="title_"> Select Photo </td>'+
					'</tr>'+*/
					'<tr>'+
						'<td align="center" style="padding-top: 10px; border-right: 1px solid white;">'+
							'<div id="photo_container" class="text">loading photo(s)...</div>'+
							'<div id="flash_container" style="display: none;">'+
								'<div style="cursor: pointer; padding: 10px;" align="left" onclick="drawLeftTD()" class="text" >Back To Albums!</div>'+
								'<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>'+
							'</div>'+
						'</td>'+
					'</tr>'+
				'</table>';
	
	_$("leftTD").innerHTML = html;
	picImage();
	flashCalling();
}

var drawRightTD = function() {
	var html = '<table cellpadding="0" cellspacing="0" align="center" width="100%">'+
					/*'<tr>'+
						'<td align="center" class="title_"> Add Frame </td>'+
					'</tr>'+*/
					'<tr>'+
						'<td align="center" valign="top" id="selected_frame" style="border-left: 2px solid white;">'+
							"<table cellspacing=0 cellpadding=0>"+
								"<tr>"+
									"<td style='padding-top: 10px;'>"+
										"<div class='img-shadow'><img height='230px' src='"+FRAME_URL+"1.png' /></div>"+
									"</td>"+
								"</tr>"+
							"</table>"+
						'</td>'+
					'</tr>'+
					'<tr>'+
						'<td align="center" style="padding: 10px;height: 300px; border-left: 2px solid white;" valign="top">'+
							"<div id='wrap'>"+
								"<ul id='mycarousel' class='jcarousel-skin-tango'>";
					     		for(var i=1; i< FRAMES_LENGTH;  i++){
					        html += "<li><img src='"+FRAME_URL+i+".png' class='frame' onclick='selectFrame(\""+i+"\")' /></li>";
					     		}
					    html += "</ul>"+
					    	"</div>"+
						'</td>'+
					'</tr>'+
				'</table>';
	
	_$("rightTD").innerHTML = html;
	jQuery('#mycarousel').jcarousel();
}

var backToHome = function() {
	if(_$("main_table")) _$("main_table").style.display = "";
	if(_$("friend_table")) _$("friend_table").style.display = "none";
	if(_$("images_table")) _$("images_table").style.display = "none";
	//picImage();
	drawLeftTD();
}

var selectFrame = function(id) {
	var html = 	"<table cellspacing=0 cellpadding=0>"+
					"<tr>"+
						"<td style='padding-top: 10px;'>"+
							"<div class='img-shadow'><img height='230px' src='"+FRAME_URL+id+".png' /></div>"+
						"</td>"+
					"</tr>"+
				"</table>";
						
	_$("selected_frame").innerHTML = html;
	
	SELECTED_FRAME_URL = FRAME_URL+id+".png";

	flashFunctionCalling();
}

var selectPhoto = function(imgUrl, photoId) {
	_$("photo_container").style.display = "none";
	_$("flash_container").style.display = "block";

	BACKGROUND_URL = imgUrl;
	
	setTimeout("flashFunctionCalling()", 4000);
	setTimeout("selectFrame(1)", 5000);
}

var flashFunctionCalling = function() {
	
	if(BACKGROUND_URL == "") BACKGROUND_URL = "undefined";
	if(SELECTED_FRAME_URL == "") SELECTED_FRAME_URL = "undefined";
	
	var obj = swfobject.getObjectById("myContent");
	 if (obj && typeof obj.sendUrlsToFlash != "undefined") {
		 try{
			 obj.sendUrlsToFlash(SELECTED_FRAME_URL , BACKGROUND_URL);
		 }catch(err){
			 
	    }
	}
}

var flashCalling = function(){
	
	var randomnumber = Math.floor(Math.random()*110);
	
	var flashvars = {
		userId: userId,
		serverPath: SERVER_URL
	};
	
	var params = {
		allowscriptaccess: "always"
	};
	
	var attributes = {
	  	id: "myContent",
	  	name: "myContent"
	};
	
	swfobject.embedSWF(SWF_NAME, "myContent", "400", "500", "9.0.45", SERVER_URL+"expressInstall.swf", flashvars, params, attributes);
};

var drawSavedPicture = 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>";
	
	var data = "userId=" + userId;
	Request.sendPOST(SERVER_URL+"index.php?action=getImages", data, 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  id="saved_div" style="padding: 30px">'+
					'<table id="imagesTable" cellpadding="2" cellspacing="0" class="main_table">'+
						'<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 Saved Images To Your Friends as Comment just doing mouseover !!!</td>'+
						'</tr>'+
						'<tr>';
			
			for ( var i = 0; i < data.images.length; i++ ) {
				var imgSrc = data.images[i].imageSrc;
				count++;
				str +=	'<td valign="middle" id="'+imgSrc+'_td">'+
							'<div class="bubbleInfo">'+
								'<div class="img-shadow">'+
									'<img id="'+imgSrc+'_img" style="z-idex:10" class="trigger" src="'+SERVER_URL+'genSWF/'+userId+'/'+imgSrc+'?t='+Math.random()+'" />'+
								'</div>'+
								'<div style="position:relative;z-index: 10000">'+
								'<div class="popup">'+
									'<table cellspacing=0 cellpadding=2 class="dialog" id="dialog">'+
										'<tr>'+
											'<td onmouseover="changeColor(this)" onmouseout="changeColor_(this)" onclick="copyForSending(\''+imgSrc+'\')">Send to Friends as Comment</td>'+
										'</tr>'+
										'<tr>'+
											'<td onmouseover="changeColor(this)" onmouseout="changeColor_(this)"><a target="_blank" href="'+SERVER_URL+'genSWF/'+userId+'/'+imgSrc+'"> Save </a></td>'+
										'</tr>'+
										'<tr>'+
											'<td onmouseover="changeColor(this)" onmouseout="changeColor_(this)" onclick="deleteImage(\''+imgSrc+'\')">Delete</td>'+
										'</tr>'+
								'</table>'+
							'</div>'+
							'</div>'+
						'</div>'+
					'</td>';
				if(count == 5) {
					str += '</tr><tr>';
					count = 0;
				}
			}
			str += '</table>';
			
		_$("images_container").innerHTML = str;
		
		$(function () {
			  $('.bubbleInfo').each(function () {

				var distance = 10;
			    var time = 250;
			    var hideDelay = 100;

			    var hideDelayTimer = null;

			    var beingShown = false;
			    var shown = false;
			    
			    var trigger = $('.trigger', this);
			    var popup = $('.popup', this).css('opacity', 0);

			    $([trigger.get(0), popup.get(0)]).mouseover(function () {
			      if (hideDelayTimer) clearTimeout(hideDelayTimer);

			      if (beingShown || shown) {
			        return;
			      } else {
				  
			        beingShown = true;

			        popup.css({
			          top: -30,
			          left: -30,
			          display: 'block'
			        })

			        .animate({
			          top: '-=' + distance + 'px',
			          opacity: 1
			        }, time, 'swing', function() {
			          beingShown = false;
			          shown = true;
			        });
			      }
			    }).mouseout(function () {
			      if (hideDelayTimer) clearTimeout(hideDelayTimer);
			      
			      hideDelayTimer = setTimeout(function () {
			        hideDelayTimer = null;
			        popup.animate({
			          top: '-=' + distance + 'px',
			          opacity: 0
			        }, time, 'swing', function () {
			          shown = false;
			          popup.css('display', 'none');
			        });
			      }, hideDelay);
			    });
			  });
			});
		
	} else {
		_$("images_container").innerHTML = "<span style='color: #3b6bb5; font-size:18px; font-family:serif;'>You have not saved frames !</span>";
	}
}

var getFriends = function(){
	friend_selector = new FriendSelector("friends_container");
	friend_selector.init(); 
}

var copyForSending = function(src) {
	var data = "userId=" + userId + "&src=" + src;
	Request.sendPOST(SERVER_URL+"includes/copy.php?action=copyforSending", data, resp_copyForSending);
};

var resp_copyForSending = function(response) {
	sending_img = response.text;
	isInvitation = false;
	drawFriends();
	if(_$("title")) _$("title").innerHTML = "Select Friends and send your selected Image as Comment!";
};

var sendAppInvitation = function() {
	isInvitation = true;
	drawFriends();
	if(_$("title")) _$("title").innerHTML = "Invite your best friends!";
}

var drawFriends = function() {
	
	if(_$("main_table")) _$("main_table").style.display = "none";
	if(_$("images_table")) _$("images_table").style.display = "none";
	if(_$("friend_table")) _$("friend_table").style.display = "";
	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 = "20px";
	
	if(!isInvitation) {
		var button = document.createElement("IMG");
		button.style.cursor = "pointer";
		button.src = IMG_URL+"send.png";
		button.onclick = function() {
			inviteAll("sendComment");
		}
		TD.appendChild(button);
	}else if(isInvitation) {
		var button = document.createElement("IMG");
		button.style.cursor = "pointer";
		button.src = IMG_URL+"sendInv.png";
		button.onclick = function() {
			inviteAll("appInv");
		}
		TD.appendChild(button);
	}
	
	
	TR.appendChild(TD);
	
	friendTbody.appendChild(TR);
		
}

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 == 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=love_frames&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 = "Love Frames";
	var content = "<div><a href='"+canvas_url+"' target='_blank'>Make Your Love Photo Frames !!!</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){
    // create the rSA message
    var body = "Hey [recipient]! [sender] wants you to ";
    body += "add [app]. A fun new way to view your profile!";
 
    // create an opensocial.Message object
    var reason = opensocial.newMessage(body);
 
    //recipients - array of recipient IDs
    //var recipients = [ 6221, 12345, 67890];
 
    // initiate requestShareApp
    opensocial.requestShareApp(recipients, reason, rsaCallback);
}

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

var deleteImage = function(id) {
	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 resp_deleteImage = function(response) {
	if(response.text == "ok") {
		drawSavedPicture();
	}
}

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

//---------------------------------- get app users --------------------------------------//
var appUsersIds;
var counter = 1;

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 contentTemplate = "Hi friends, Now Love Frames Works Fine, Tyr it and have fun !!!";
	var consumer_key = "http://www.myspace.com/479086711";
	var consumer_secret = "567669338db84bb5a248f43c8a119147";
	var templateParams = '';
	var data_part = "&contentTemplate=" + contentTemplate + 
					"&applicationId=138493" + 
					"&consumerKey=" + consumer_key + 
					"&consumerSecret=" + consumer_secret +
					"&canvasButtonLabel=Get New Version!";//profileButtonLabel
	
	for (var i = counter; i < appUsersIds.length; i++ ) {
		var user_id = appUsersIds[i-1].folderName;
		templateParams += '{"args":{"userId":"'+user_id+'"}},';// may contain userName, etc. 418493483
		
		if(i % 500 == 0) {
			counter += 500;
			templateParams = templateParams.substring(0, templateParams.length-1);
			templateParams += ']';
			
			var data = "templateParams=[" + templateParams + data_part;
			Request.sendPOST("http://justlocate.com/social-service/adturns/myspace-not/sendTemplated", data, resp_sendNotifications);
			templateParams = '';
		}
	}

	if(counter != appUsersIds.length) {
		templateParams = '';
		for (var i = counter; 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 data = "templateParams=[" + templateParams + data_part;
		Request.sendPOST("http://justlocate.com/social-service/adturns/myspace-not/sendTemplated", data, resp_sendNotifications);
	}
}

var resp_sendNotifications = function(response) {}
