/*********************************************
    Main function
    1. Navi    - show navigation
    2. setlist - show list and register event in list
    3. Cookie
    order of Excute
        1. Excute Ajax - this is variable: {articleid:1,page:1,countck:1}
        2. Excute Navi
        3. Excute setlist
        4. register Event
    *********************************************/
$(document).ready(function(){
	/* Pagging Variable */
	var page = 1;
	var limitlist = 10;
	var limitpage = 10;
	var totalpage = 1;
	var totalcount = 0;
	var prepage    = 1;
	var nextpage   = 1;        
	
	function navi(ct){
		/* Caculate variable for paging */
		$("#commentcount").empty();
		$("#commentcount").html(ct);
		totalpage        = Math.ceil(ct/limitlist);
		totalcount       = ct;
		var startpagenum = Math.floor(page /  limitpage)*limitpage + 1;
		var endpagenum   = totalpage > startpagenum + limitpage -1 ? startpagenum + limitpage -1 : totalpage;
		var str          = "<ul>";
		prepage      = page == 1 ? 1 : page - 1;
		nextpage     = page == totalpage ? totalpage : page + 1;


		/* Print Navigation */
		str                     += "<li class=\"comment_paging\" id=\"arrow_left\" ><A>Prev</A></li>";
		for(var i=startpagenum ;i <= endpagenum ;i++){
					str += "<li class=\"comment_paging\" id=\"cm_pg_"+  i +"\" ><A> "+ i +" </A></li>";
		}
		
		str                     += "<li class=\"comment_paging\" id=\"arrow_right\" ><A>Next</A></li>";
		str                     += "</ul>";
		$("#number").html(str);
		$("#cm_pg_"+page+" a").attr("class","current");
		/* To add loading bar  for content */
		$.get("/article/comments/getnav.php",{articleid:article_id,"page":page},function(data){ 
			setlist(data);
		},'json');
		
		/* Register Event */
		$("ul#number li").click(function(){
			var pastpage = page;
			if($(this).attr('id') == 'arrow_left'){
			   page = prepage; 
			}else if($(this).attr('id') == 'arrow_right'){
			   page = nextpage;
			}else{
			   var getid   = $(this).attr('id');
			   var id_arr  = getid.split('_');
			   var idnum   = id_arr[2]; 
			   page = idnum;
			}
			if(pastpage != page){
				/* To add loading bar  for content */
				$("div#comment_lists").html("<div class=\"loading\" ><img src=\"http://img.ibtimes.com/www/site/us/images/ajax_load.gif\" ></div>");                      
		//$("#comment_lists .loading").show();

				$.get("/article/comments/getnav.php",{articleid:article_id,"page":page},function(data){
					/* get list using ajax  */
					setlist(data); 
				},'json');    
			}       
			 prepage      = page == 1 ? 1 : parseInt(page) - 1;
			 nextpage     = page == totalpage ? totalpage : parseInt(page) + 1;
			
			$("#cm_pg_"+pastpage+" a").attr("class","nocurrent");
			$("#cm_pg_"+page+" a").attr("class","current");

		});
		
		function setlist(data){
			/* Print lists using Ajax */
			var str1 = "";
			
			for(d in data["data"]){
				var replyid  = data["data"][d].replyid > 0 ? data["data"][d].replyid : data["data"][d].id;
				var stepnum  = parseInt(data["data"][d].step);
				
				for(var i=0;i < stepnum;i++){
					str1 += "<div class=\"reply_wrap\"> ";
				}
				var flagenavble = 'a';
				if(data["data"][d].flag == 'Y')flagenavble = 'no';

				str1     +=  "<div class=\"comment_box\"> ";
				str1     += "        <div id=\"ct_txt_"+data["data"][d].id+"\" class=\"txt_comment\">";
				str1     += "           <div  class=\"tool_comment\">";
				str1     += "                <img class=\"rec_up\" id=\"rc_up_"+data["data"][d].id+"\" src=\"http://img.ibtimes.com/www/site/us/images/icon_up.gif\" align=\"absmiddle\" /> +<span id=\"recommend_up_"+data["data"][d].id+"\">"+data["data"][d].recommendup+"</span> ";
				str1     += "               <img  class=\"rec_down\" id=\"rc_dn_"+data["data"][d].id+"\" src=\"http://img.ibtimes.com/www/site/us/images/icon_down.gif\" align=\"absmiddle\" /> -<span id=\"recommend_down_"+data["data"][d].id+"\">"+data["data"][d].recommenddown+"</span><br/> ";
				str1     += "               <a class=\"areply\" id=\"reply_a_"+data["data"][d].id+"\" href=\"javascript:;\">Reply</a> | <a class=\""+flagenavble+"flag\" id=\"flag_a_"+data["data"][d].id+"\" href=\"javascript:;\">Flag</a> ";
				
				str1     += "           </div>";
				str1     += "           <p class=\"writer\">"+data["data"][d].name+"</p> \r\n";
				str1     += "           <p class=\"date\">"+data["data"][d].datetime+"</p>    \r\n";
				
				str1     += "                                   <p ";
				if(data["data"][d].flag == 'Y')    str1     += " style=\"display:none;\" ";    
				str1     += "                                   class=\"comment\">"+data["data"][d].comment+"</p>  \r\n";
				str1     += "  <p class=\"flagcomment\">";
				if(data["data"][d].flag == 'Y')    str1     += " Flagged as inappropriate. <a id=\"flagshow_"+data["data"][d].id+"\" href=\"javascript:;\">show</a> ";    
				str1     += "  </p> ";    
				str1     += "        </div>";    
				str1     += "        <div class=\"clear\"></div>";
				str1     += "        <div class=\"divreply\" id=\"comment_box_" + data["data"][d].id + "\" >";   
				
				str1     += "           <form class=\"replyform\" onsubmit=\"javascript:return false;\" id=\"formcomment_" + data["data"][d].id + "\" method=\"post\" > ";
				str1     += "           <input  id=\"fc_article_id\" type=\"hidden\" name=\"article_id\"  value=\""+data["data"][d].article_id+"\"   />   ";
				str1     += "           <input  id=\"fc_reply\" name=\"replyid\" type=\"hidden\" value=\""+replyid+"\" />               ";
				str1     += "           <input  id=\"fc_step\" name=\"step\"  type=\"hidden\" value=\""+ (parseInt(data["data"][d].step) + 1) +"\"  />              ";
				str1     += "           <input  id=\"fc_level\" name=\"level\"  type=\"hidden\" value=\""+ (data["data"][d].level) +"\"  />             ";
				str1     += "           <div class=\"rp_box\">                                                                        ";
				str1     += "               <div class=\"title\"><h2>Reply</h2>  </div>";				
				str1     += "               <div class=\"content\">";	                 
				str1     += "                   <input type=\"text\" name=\"name\" class=\"form_name\" onClick=\"clearTimeout(rtid);\"> <span class=\"word\">* Name</span> ";
				str1     += "                   <textarea rows=\"7\" cols=\"40\" name=\"comment\" class=\"form_discuss\" onClick=\"clearTimeout(rtid);\"></textarea>    ";
				str1     += "					<div class=\"clear\"></div>";				  
				str1     += "                   <div class=\"securebox\">                                                                    ";
				str1     += "                       <div class=\"sb_box\"></div>                                                         ";
				str1     += "                       <div class=\"sb_form\">                                                                 ";
				str1     += "                           <span class=\"textbold\">Security Code</span>                               ";
				str1     += "                           <input type=\"text\"  name=\"securitykey\"  maxlength=\"6\" size=\"6\" onKeyUp=\"this.value=this.value.toUpperCase();\"/> ";
				str1     += "                           <div class=\"sb_words\" class=\"reddot\"></div>                                         ";
				str1     += "                       </div>                                                                                          ";
				str1     += "                   </div>                                                                                              ";
				str1     += "                   <div id=\"bt_discuss\"><input style=\"cursor:pointer;\" id=\"postbutton_"+data["data"][d].id+"\" type=\"button\" value=\"Post your comment\" class=\"bt_discuss\" /></div>"; 
				str1     += "					<div class=\"clear\"></div>";
				str1     += "                   <div class=\"commenterror\"></div>                                                                   ";
				str1     += "               </div>                                                                                                  ";
				str1     += "            </div>                                                                                                  ";
				str1     += "           </form>                                                                                                 ";
				
				str1     += "        </div>";                                                                                                   
				str1     += "</div>";

				for(var i=0;i < stepnum;i++){
					str1 += " </div> ";
				}
				
				
			}
			$("#comment_lists").html(str1);
            /**********************************************
			Reguster Event
			1. show Reply form
			2. Flag
			3. Recommend
			4. submit reply
			**********************************************/
			$("div.tool_comment a.areply").click(function(){
				var getid   = $(this).attr('id');
				var id_arr  = getid.split('_');
				var idnum   = id_arr[2];
				if($("#comment_box_"+idnum).css('display') == 'block')$("#comment_box_"+idnum).slideUp();
				else{ 
					$("#comment_box_"+idnum).slideDown();
					$("#comment_box_"+idnum+" div.securebox div.sb_box").empty();
					$("#comment_box_"+idnum+" div.securebox div.sb_box").html("<img src=\"/services/security_key.php\" alt=\"International Business Times Secutiry Check\" />");
				}
			});

			$("div.tool_comment a.aflag").click(function(){
				var getid   = $(this).attr('id');
				var id_arr  = getid.split('_');
				var idnum   = id_arr[2];
				
				$.get("/article/comments/flag.php",{commentid:idnum,flag:"Yes"},function(data){
							if(data.status == 'Success'){
									$("#ct_txt_"+data.commentid+" p.flagcomment").html("Flagged as inappropriate. <a id=\"flagshow_"+data.commentid+"\" href=\"javascript:;\">show</a>  ");
									$("#ct_txt_"+data.commentid+" p.comment").css("display","none");
									 $("p.flagcomment a").click(function(){
										set_showflag(data.commentid);
									  });
							}
									
							},'json');
			});   
			
			$("p.flagcomment a").click(function(){
				var getid   = $(this).attr('id');
				var id_arr  = getid.split('_');
				var idnum   = id_arr[1];
				
				set_showflag(idnum);
			});
			
			function set_showflag(num){
				$("#ct_txt_"+num+" p.flagcomment").slideUp();    
				$("#ct_txt_"+num+" p.comment").slideDown();                
			}
			
			$(".tool_comment .rec_up").click(function(){
				var getid   = $(this).attr('id');
				var id_arr  = getid.split('_');
				var idnum   = id_arr[2];
				ajax_recommend(idnum,"up");
			});
			
			$(".tool_comment .rec_down").click(function(){
				var getid   = $(this).attr('id');
				var id_arr  = getid.split('_');
				var idnum   = id_arr[2];
				ajax_recommend(idnum,"down");
			});
			
			
			function ajax_recommend(idnum,direction){
				var surlstr = "/article/comments/recommend"+"."+"php";
				$.get(surlstr,{"commentid":idnum,"arrow":direction},function(data){
					//var str_cm = getCookie('ibt_cm');
					//var json_cm = eval('(' + str_cm + ')');
					var i=0;
					if(data.status == 'Sucess'){
						var cookiestring = "{\"recommend\":[";
						var get_data     = new Array();
						var i=0;
						for (var k in data.cookie.recommend){
							get_data[i] = "\""+data.cookie.recommend[k]+"\"";
							i++;
						}
						var get_str = "";
						var get_str = get_data.join(',');
						cookiestring += get_str+"]}";
						setCookie('ibt_cm',cookiestring,3);
						if(data.direction == 'up'){
							  $("#ct_txt_"+data.commentid+" #recommend_up_"+data.commentid).html(data.recup);
						}else{
							$("#ct_txt_"+data.commentid+" #recommend_down_"+data.commentid).html(data.recdown);
						}
						
					}else if(data.status == 'Error'){
						alert(data.message);
						
					}
				},'json');
			}
			
			
			
			$(".replyform .bt_discuss").click(function(){
				var getid  = $(this).attr('id');   
				var id_arr  = getid.split('_');
				var idnum   = id_arr[1];
			   
			   var fields = $("#formcomment_"+idnum+" :input").serializeArray(); 
			   /* To add loading bar  for reply */
			   $("#formcomment_"+idnum+" .bt_discuss").attr("value","Posting...");
			   /* Ajax */
			   $.post("/article/comments/update.php",fields, function(data){
				   $("#formcomment_"+idnum+" .bt_discuss").attr("value","Post your comment");
										var errorstr = "";            
										if(data.status == "Error"){
											errorstr = "<ul>";
											for(var d in data.error ){
												errorstr += " <li>"+data.error[d]+"</li>"; 
											}
											errorstr += "</ul>";
											$("#comment_box_"+idnum+" .commenterror").html(errorstr);
										}else if(data.status == 'Success'){
											$("#formcomment_"+idnum+" :input").attr("value","");    
											totalcount = parseInt(totalcount) + 1;
											navi(totalcount);
										}else{

										}
									},"json");
				
			});

			
		}

	}

	
	
	
   /******************************************************************
	excute event first (Initialize)
	1. Cookie  - for Recommend
	2. get navigation(paging) -> excute navi
	----------------------------------------
	3. register submit Event(Comment)
	******************************************************************/
	var ibtComments =  getCookie("ibt_cm");
	if(!ibtComments){
		setCookie('ibt_cm','{"recommand":[]}',3);
	}
	

	$.get("/article/comments/getnav.php",{articleid:article_id,page:1,countck:1},function(data){
															navi(data.count);
	},'json');
	
	
	$("#postbutton").click(function(){
	   var fields = $("#formcomment :input").serializeArray();
		/* To add loading bar  for comment */
		$("#formcomment #postbutton").attr("value","Posting...");
		/* Ajax */
		$.post("/article/comments/update.php",fields, function(data){
										$("#formcomment #postbutton").attr("value","Post your comment");
										var errorstr = "";            
										if(data.status == "Error"){
											errorstr = "<ul>";
											for(var d in data.error ){
												errorstr += " <li>"+data.error[d]+"</li>"; 
											}
											errorstr += "</ul>";
											$(".commenterror").html(errorstr);
										}else if(data.status == 'Success'){
											$("#formcomment #name_comment").attr("value",""); 
											$("#formcomment #security_words").attr("value","");    
											$("#formcomment #textarea_comment").attr("value","");    
											totalcount = parseInt(totalcount) + 1;
											navi(totalcount);
										}else{
											
										}
									   
			
									},"json");
									
																														
	});
	
	
}) ;

function refresh_secureimg(){
	currentDate = new Date();
	security_img_num = 1;
	security_img_num++;
	document.getElementById('box_code').src='/services/security_key.php?number='+currentDate.getHours()+currentDate.getMinutes()+currentDate.getSeconds()+security_img_num;
	//$("#box_code").html("");
	//$("#box_code").html("<img src=\"/services/security_key.php\" alt=\"International Business Times Secutiry Check\">");
	
}