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>"+
							"<td align='center' >"+
								"<div align=center>"+
									"<div id='adPlaceholderTop'></div>"+
								"</div>"+
							"</td>"+
						"</tr>"+
					'</table>'+
					'<div id="main_table">'+
						'<table cellpadding="0" cellspacing="0" align="center" class="main-table" border="0">'+
							'<tr>'+
								'<td align="center"  width="150px" id="my_played" valign="top" style="padding-top: 54px;"></td>'+
								'<td align="center"  width="640px" id="puzzle"></td>'+
								'<td align="center"  width="150px" id="top10" valign="top" style="padding-top: 54px;"></td>'+
							'</tr>'+
							'<tr>'+
								'<td colspan="3"><img src="'+IMG_URL+'space.png" onload="getFriends()"></td>'+
							'</tr>'+
						'</table>'+
					'</div>'+
					'<div id="gallery">'+
						'<table cellpadding="0" cellspacing="0" align="center" class="gallery" border="0">'+
							'<tr>'+
								'<td align="left" class="text" style="cursor:pointer" onclick="CloseFriendSelector()"> Back </td>'+
							'</tr>'+
							'<tr>'+
								'<td align="center" id="gallery_td" valign="top"><img src="'+IMG_URL+'loading.gif" /></td>'+
							'</tr>'+
						'</table>'+
					'</div>'+
					'<div id="friend_table">'+
						'<table cellpadding="0" cellspacing="0" align="center">'+
							'<tbody id="friend_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;">Send Invitation to your friends!</td>'+
								'</tr>'+
								'<tr>'+
									'<td align="left" class="text" style="cursor:pointer" onclick="CloseFriendSelector()"> Back </td>'+
								'</tr>'+
								'<tr>'+
									'<td><div id="friends_container"></div></td>'+
								'</tr>'+
							'</tbody>'+
						'</table>'+
					'</div>'+
					'<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://adturns.com/ad.php?c=46&fb_sig_user='+userId+'" width = "728" height = "90" style = "border: none; overflow: hidden" ></iframe>'+
							"</td>"+
						"</tr>"+
					'</table>'+
					'<table cellpadding="0" cellspacing="0" align="center" 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>';
		
	$(html).appendTo("#container");
	
	storeUserAndAppInstalledInformation();
	drawMyPlayed();
	drawPuzzle();
	drawTop10();
	init(user);//"puzzle"
	//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 storeUserAndAppInstalledInformation = function() {
	var data = "social_id=" + userId +
				"&social_name=" + encodeURIComponent(userName) + 
				"&social_thumb_url=" + encodeURIComponent(userThumbnail) + 
				"&social_profile_url=" + encodeURIComponent(userProfile)+
				"&app_social_id=" + APP_SOCIAL_ID; 
	
	Request.sendPOST(SERVER_URL+"index.php?action=storeUserAndAppInstalledInf", data, doNothing);
}

var drawMyPlayed = function() {
	Request.sendPOST(SERVER_URL+"index.php?action=myPlayed", "userId=" + userId, resp_drawMyPlayed);
}

var resp_drawMyPlayed = function(response) {
	var colCount = 2;
	var rowCount = 3;
	
	if(response.text != "none") {
		
		var data = eval('('+response.text+')');
		var myPlayed = data.myPlayed;
		
		var html = '<table cellpadding="0" cellspacing="0" align="center" width="150px" class="border">'+
						'<tr><td colspan="2" align="center" class="info_td"> My Played <td></tr>';

		for ( var i = 0; i < myPlayed.length; i++ ) {
			var id 			= myPlayed[i].id;
			var url 		= GALLERY_IMG_DIR + myPlayed[i].puzzle_image;
			var type 		= myPlayed[i].type;
			var level 		= myPlayed[i].level;
			var score 		= myPlayed[i].score;
			var gallery_id 	= myPlayed[i].gallery_id;
			var published 	= myPlayed[i].published;
			
			if(i >= (rowCount*colCount)) break;
			if( i % colCount == 0 ) html += '<tr>';
			
			html += '<td style="padding: 2px; padding-top: 5px; padding-bottom: 5px">'+
						'<table cellpadding="0" cellspacing="0">'+
							'<tr>'+
								'<td align="center">'+
									'<img style="cursor:pointer;" onclick="loadNewLevelFromScript(\''+url+'\', '+level+', \''+type+'\')" src="'+url+'" class="played_img"/>'+
								'</td>'+
							'</tr>'+
							'<tr>'+
								'<td class="small_text" align="left">'+
									'<div>Level: '+level+'</div>'+
									'<div>Type: '+type+'</div>';
									if(score == -1) {
										html += '<div>Not compl..</div>';
									} else {
										html += '<div>Score: '+score+'</div>';
									}
						html += '</td>'+
							'</tr>'+
							'<tr>'+
								'<td class="small_text" style="color: #365466;cursor:pointer;font-size: 13px; text-decoration: underline;" onclick="loadNewLevelFromScript(\''+url+'\', '+level+', \''+type+'\')" align="center">Challenge</td>'+
							'</tr>'+
						'</table>'+
					'</td>';
			
			if( i % colCount == (colCount - 1) ) html += "</tr>";
		}
		
		html +=	"</table>";
			
		
		_$("my_played").innerHTML = html;
		
	} else {
		//_$("my_played").innerHTML = "Empty";
	}
}

var loadNewLevelFromScript = function(imgPath, level, complexity){
	SELECTED_IMAGE = imgPath;
	var obj = swfobject.getObjectById("myContent");
	if (obj && typeof obj.loadNewLevel != "undefined") {
		 try{
			 obj.loadNewLevel(imgPath, level, complexity);
		 }catch(err){
			// console.log(err);
	    }
	}
}

var drawPuzzle = function() {
	var html = '<table cellpadding="0" cellspacing="0" align="center" width="100%">'+
					'<tr>'+
						'<td>'+
							'<table cellpadding="0" cellspacing="5" align="center" width="100%">'+
								'<tr>'+
									'<td align="center">'+
										//'<img width="160px" style="cursor: pointer; padding: 0px 10px 0px 10px;" src="'+IMG_URL+'random.png" onclick="getRangomImageOnclickHandler()" />'+
										'<img width="160px" style="cursor: pointer; padding: 0px 10px 2px 10px;" src="'+IMG_URL+'gallery.png" onclick="openImageGallery()" />';
										if(userId == "418493483") {
											html += '<img width="160px" style="cursor: pointer; padding: 0px 10px 2px 10px;" src="'+IMG_URL+'upload.png" onclick="uploadImage()" />';
										}
							html += '</td>'+
								'</tr>'+
								'<tr>'+
									'<td class="info_td" id="info_td" align="center" style="display:none; font-size: 12px;"></td>'+
								'</tr>'+
								'<tr>'+
									'<td align="center" colspan="2">'+
										'<div id="flash_container">'+
											'<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>'+
								'<tr>'+
									'<td align="center">'+
										'<img width="160px" style="cursor: pointer; padding: 10px;" src="'+IMG_URL+'invite.png" onclick="drawFriends(\'invite\')" />'+
										'<img width="160px" style="cursor: pointer; padding: 10px;" src="'+IMG_URL+'challenge.png" onclick="drawFriends(\'challenge\')" />'+
									'</td>'+
								'</tr>'+
							'</table>'+
						'</td>'+
					'</tr>'+
				'</table>';
	
	$(html).appendTo("#puzzle");
	
	appParams = gadgets.views.getParams();
	
	if(appParams["userId"]) {
		appParamsLevel 	= appParams["challengeLevel"];
		appParamsImgUrl = appParams["challengeImgUrl"];
		appParamsType 	= appParams["challengeType"];
	}
	SELECTED_IMAGE = SERVER_URL + "random.jpg";
	flashCalling();
	//req_getUploadedImages("", "", 0);
}

var drawTop10 = function() {
	
}

var flashCalling = function(){
	
	var flashvars = {
		userId: userId
	};
	
	var params = {
		allowscriptaccess: "always",
		wmode: "transparent"
	};
	
	var attributes = {
	  	id: "myContent",
	  	name: "myContent"
	};
	
	swfobject.embedSWF(SWF_NAME, "myContent", "640", "480", "9.0.45", SERVER_URL+"expressInstall.swf", flashvars, params, attributes);
};

var flashOnLoadHandler = function() {
	if(appParams["userId"]) {
		loadNewLevelFromScript(appParamsImgUrl, appParamsLevel, appParamsType);
	} else {
		loadPuzzleImage(SELECTED_IMAGE);
	}
}

var loadPuzzleImage = function(img_url) {
	if(_$("info_td")) _$("info_td").style.display = "none";
	var obj = swfobject.getObjectById("myContent");
	if (obj && typeof obj.loadNewImage != "undefined") {
		 try{
			 obj.loadNewImage(img_url);
			 var data = "userId=" + userId + "&img_url=" + SELECTED_IMAGE.substring(43, SELECTED_IMAGE.length) + "&img_gallery_id=" + GALLERY_ID + "&published=" + published;
			 Request.sendPOST(SERVER_URL+"index.php?action=storePuzzleImage", data, doNothing);
		 }catch(err){
			// console.log(err);
	    }
	}
}

var getSelectedImage = function(img_url, isNone) {
	SELECTED_IMAGE = img_url;
	if(isIE || isNone == 1) {
		flashOnLoadHandler();
	} else {
		loadPuzzleImage(SELECTED_IMAGE);
	}
}

var levelCompleted = function(time, type, level) {
	challengeLevel = level;
	challengeImgUrl = SELECTED_IMAGE;
	challengeType = type;
	challengeScore = time;
	var data = "time=" + time + "&type=" + type + "&level=" + level + "&img_url=" + SELECTED_IMAGE.substring(43, SELECTED_IMAGE.length) + "&userId=" + userId;
	Request.sendPOST(SERVER_URL+"index.php?action=storePuzzleInf", data, resp_levelCompleted);
}

var resp_levelCompleted = function(response) {
	
	drawMyPlayed();
	//if(_$("info_td")) _$("info_td").style.display = "";
	
	/*if(!response.errorText) {
		if(response.text != "") {
			if(response.text == "0") {
				_$("info_td").innerHTML = "Your last score was better. Play again !";
			} else {
				_$("info_td").innerHTML = "Congratulations ! Now your score is "+response.text+" . You have played better then last time. )";
			}
		} else {
			_$("info_td").innerHTML = "Good, play again to compare your result.";
		}
	} else {
		_$("info_td").innerHTML = "Play again :)";
	}*/
}

var limit = 5;
var CURRENT_PAGE = 0;
var COUNT;

var req_getUploadedImages = function(clickCallBackParam, allContentDiv, page) {
	CURRENT_PAGE = page;
	_$("uploaded_images").innerHTML = "<span class='text'> Loading uploading images... </span>";
	var url = "http://justlocate.com/gallery/gallery/images?page="+page+"&limit="+limit+"&socialId="+userId+"&socialType=myspace";
	Request.sendGET(url, resp_getUploadedImages, "");
}

var resp_getUploadedImages = function(response) {
	
	var colCount = 5;
	var rowCount = 1;
	
	if(response.text != "none") {
		
		var data = eval('('+response.text+')');
		var uploadedImages = data.images;
		COUNT = data.count;
		
		var html = '<table cellpadding="0" cellspacing="0" align="center" width="640px">'+
						'<tr><td colspan="5" align="center" style="padding: 10px;color:white;">Create Puzzle from your uploaded images !<td></tr>';

		for ( var i = 0; i < uploadedImages.length; i++ ) {
			var smallUrl = GALLERY_IMG_DIR+uploadedImages[i].smallUrl;
			var url = GALLERY_IMG_DIR+uploadedImages[i].url;
			var id 	= uploadedImages[i].id;
			var published = uploadedImages[i].published;
			
			if(i >= (rowCount*colCount)) break;
			if( i % colCount == 0 ) html += '<tr>';
			
			html += '<td>'+
						'<table>'+
							'<tr>'+
								'<td>'+
									'<img style="cursor:pointer;" src="'+smallUrl+'" onclick="selectImage(\''+url+'\', '+id+', 1)" />'+
								'</td>'+
							'</tr>'+
						'</table>'+
					'</td>';
			
			if( i % colCount == (colCount - 1) ) html += "</tr>";
		}
		
		html +=	"<tr><td id='paging' colspan='5' align='right'></td><tr>"+
			"</table>";
		
		_$("uploaded_images").innerHTML = html;
		_$("paging").innerHTML = drawPaging(CURRENT_PAGE, COUNT, "req_getUploadedImages");
		
	} else {
		_$("uploaded_images").innerHTML = "You have not uploaded images!";
	}
}

var openImageGallery = function() {
	if($("#main_table")) $("#main_table").hide();
	if($("#friend_table")) $("#friend_table").hide();
	if($("#gallery")) $("#gallery").show();
	_$("gallery_td").innerHTML = '<img src="'+IMG_URL+'loading.gif" />';
	
	imageList("selectImage","gallery_td");
}

var selectImage = function(img_url, img_gallery_id, isNone) {
	published = 1;
	GALLERY_ID = img_gallery_id;
	getSelectedImage(img_url, isNone);
	if($("#main_table")) $("#main_table").show();
	if($("#friend_table")) $("#friend_table").hide();
	if($("#gallery")) $("#gallery").hide();	
	if(_$("gallery_td")) _$("gallery_td").innerHTML = "";
}

var uploadImage = function() {
	if($("#main_table")) $("#main_table").hide();
	if($("#friend_table")) $("#friend_table").hide();
	if($("#gallery")) $("#gallery").show();
	_$("gallery_td").innerHTML = '<img src="'+IMG_URL+'loading.gif" />';
	
	create_image("createUploadingPuzzle","gallery_td");
}

var createUploadingPuzzle = function(img_url, img_gallery_id, isPublished) {
	published = isPublished;
	GALLERY_ID = img_gallery_id;
	getSelectedImage(img_url); 
	if($("#main_table")) $("#main_table").show();
	if($("#friend_table")) $("#friend_table").hide();
	if($("#gallery")) $("#gallery").hide();
	if(_$("gallery_td")) _$("gallery_td").innerHTML = "";
}

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

var drawFriends = function(type) {
		
	if($("#main_table")) $("#main_table").hide();
	if($("#friend_table")) $("#friend_table").show();
	 
	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 == "invite") {
		var button = document.createElement("IMG");
		button.style.cursor = "pointer";
		button.src = IMG_URL+"sendInv.png";
		button.onclick = function() {
			inviteAllFriends();
		}
		TD.appendChild(button);
	}else if(type == "challenge") {
		var button = document.createElement("IMG");
		button.style.cursor = "pointer";
		button.src = IMG_URL+"challenge.png";
		button.onclick = function() {
			challengeFriendByComment();
		}
		TD.appendChild(button);
	}

	TR.appendChild(TD);
	friendTbody.appendChild(TR);
}

var challengeFriendByComment = function() {
	var friendIndex = 0;
	var recipientsIds = [];
	
	var friends = friend_selector.getSelectedFrineds();
	
	if(friends.length == 0) {
		_$("info").innerHTML = "At first select friends plz.";
		return;
	}
	
	var challengeFriendByCommentCallback = function(result){
		var finished = true;
		if (result == MyOpenSpace.PostTo.Result.SUCCESS) {
			friendIndex++;
			if(friendIndex < friends.length){
				finished = false;
				challengeFriend(friends[friendIndex].fields_.id, challengeFriendByCommentCallback);
				var url = "http://adturns.com/channelStatistics.php?act_own=32&socialType=myspace&appId=challenge_puzzle&userId="+userId+"&channel=challenge";
				Request.sendGET(url, "", "");
			}
		}
	}
	
	if (friends.length > 0){
		challengeFriend(friends[friendIndex].fields_.id, challengeFriendByCommentCallback);
	}
}

var challengeFriend = function(friendId, challengeFriendByCommentCallback){
	var title = "Hi Friend, want to challenge you to play my puzzle!";
	
	var jsonStr = '{"userId":"'+userId+'", "challengeLevel":"'+challengeLevel+'", "challengeImgUrl":"'+challengeImgUrl+'", "challengeType":"'+challengeType+'"}';
	var url = canvas_url + "&appParams=" + encodeURIComponent(jsonStr);
	
	var content = "<div><a href='"+canvas_url+"' target='_blank'>I have played this puzzle in "+challengeScore+" score. Play you too to compare our results!</a><div><br>"+
					"<a href='"+url+"' target='_blank'><b>Start Play!</b></a>";
	postTo_(title, content, friendId, "PUBLIC_MESSAGE", challengeFriendByCommentCallback);
}

var inviteAllFriends = function(type) {
	
	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);
	}
	
	inviteFriend(recipientsIds);
}

function inviteFriend(recipients){

    var body = "Hey [recipient]! [sender] advise you play ";
    body += " [app]. Click on Add Challenge Puzzle and Challenge your played puzzles with your Friends, compare results. Be The Best ;)";

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

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

var sendBulletin = function(){
    var body = "Try it out! Challenge yourself! Click ";
    	body += "<a href='" + canvas_url + "'> here </a> and solve your own created puzzles !<br />";
    	
    var title = "The best way to spend your time with Puzzle Challange";

    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){
	var url = "http://adturns.com/channelStatistics.php?act_own=32&socialType=myspace&appId=challenge_puzzle&userId="+userId+"&channel=bulletin";
	Request.sendGET(url, "", "");
}

var CloseFriendSelector = function() {
	if($("#main_table")) $("#main_table").show();
	if($("#friend_table")) $("#friend_table").hide();
	if($("#gallery")) $("#gallery").hide();
	if(_$("gallery_td")) _$("gallery_td").innerHTML = ""; 
}

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

var doNothing = function(response) {
}

//---------------------------------- get app users and send notifications--------------------------------------//
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.userIds;
		
		sendNotifications();
	}
}

var sendNotifications = function() {
	
	var contentTemplate = "asdasd";
	var consumerKey = "http://www.myspace.com/483235406";
	var consumerSecret = "5070e55fa92d44baa99852bb0d3b0052";
	var templateParams = '';
	var data_part = "&contentTemplate=" + contentTemplate + 
					"&applicationId=" + APP_SOCIAL_ID + 
					"&consumerKey=" + consumerKey + 
					"&consumerSecret=" + consumerSecret +
					"&canvasButtonLabel=Create New Puzzles!";//profileButtonLabel
	
	for (var i = counter; i < appUsersIds.length; i++ ) {
		var user_id = appUsersIds[i].userId;
		templateParams += '{"args":{"userId":"'+user_id+'"}},';// may contain userName, etc.
		
		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].userId;
			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) {
	
}
