/* Initialisasi */
	$(function() {
		$("#all_id").attr('value',"");
		$("#txtonly").live("click", function() {
        	create_text("txtonly");
 		});
 		
 		var icon_name=["smile", "love", "shy", "sad", "angel", "angry", "devil", "dizzy", "surprise", "kiss", "ninja", "clown", "silent", "dj", "beer", "cheers", "monkey", "sleep", "cake", "lip", "dance", "fall", "satisfaction", "funky", "cool", "hot", "sexy"];
		for(x=0;x<icon_name.length;x++){
			create3icon(icon_name[x]);	
		}		 
		
		$("#bubble01").live("click", function(){
			if($("#div_comment").attr("style")=="display: none;"){
				create_bubble("tail_01");	
			}else{
				alert("Please save previous Bubble!");
			}
        });
        
        $("#bubble02").live("click", function(){
			if($("#div_comment").attr("style")=="display: none;"){
				create_bubble("tail_02");	
			}else{
				alert("Please save previous Bubble!");
			}
        });
        
		$("#bubble03").live("click", function(){
			if($("#div_comment").attr("style")=="display: none;"){
				create_bubble("tail_03");	
			}else{
				alert("Please save previous Bubble!");
			}
        });
        
		$("#bubble04").live("click", function(){
			if($("#div_comment").attr("style")=="display: none;"){
				create_bubble("tail_04");	
			}else{
				alert("Please save previous Bubble!");
			}
        });
        
		$("#bubble05").live("click", function(){
			if($("#div_comment").attr("style")=="display: none;"){
				create_bubble("tail_05");	
			}else{
				alert("Please save previous Bubble!");
			}
        });
        
        $("#bubble06").live("click", function(){
			if($("#div_comment").attr("style")=="display: none;"){
				create_bubble("tail_06");	
			}else{
				alert("Please save previous Bubble!");
			}
        });
   });
   /* End Initialisasi */
     
    /* Bubble Operation */
    
    function save_bubble(tm){
		$("#id_"+tm).append('<input type="hidden" name="bubble_'+tm+'" id="bubble_'+tm+'" value="">');
		$("#bubble_"+tm).attr('value', tinyMCE.activeEditor.save());
		$("#p_"+tm).remove();
		$("#rz_"+tm).append('<div style="position:relative;left:0px;top:0px;" id="p_'+tm+'"><a href="javascript:edit_bubble('+tm+');" id="edit_'+tm+'" style="color:#000000;" title="Click here to edit text">'+tinyMCE.activeEditor.save()+'</a></div>');
		$("#all_id").attr('value',$("#all_id").val()+'#'+tm);
		$("#div_comment").attr("style","display:none;");
   }
   
   function edit_bubble(id){
   		var cm =$("#bubble_"+id).val();
   		$("#p_"+id).remove();
   		$("#edit_"+id).remove();
   		$("#div_comment").attr("style","border:1px solid #999999;padding:10px;margin-top:10px;display:block;");
   		$("#div_comment").html('<textarea id="comment_textarea" name="comment_textarea" cols="50" rows="3">'+cm+'</textarea><div class="pcrpc-button"><center><a href="javascript:edit_bubble_save('+id+');">Edit</a></center></div>');
   		tiny();
	}
   
   function edit_bubble_save(id){
	   	$("#bubble_"+id).attr('value', tinyMCE.activeEditor.save());
	   	$("#rz_"+id).append('<div style="position:relative;left:0px;top:0px;" id="p_'+id+'"><a href="javascript:edit_bubble('+id+');" id="edit_'+id+'" style="color:#000000;" title="Click here to edit text">'+tinyMCE.activeEditor.save()+'</a></div>');
  		$("#div_comment").attr("style","display:none;");
    }
    
    /* End bubble operation */    
    
    /* Text Operation */
	function save_txt(tm){
		var res=tinyMCE.activeEditor.save();
		$("#p_"+tm).remove();		
		$("#id_"+tm).append('<input type="hidden" name="txtonly_'+tm+'" id="txtonly_'+tm+'" value="">');
		$("#txtonly_"+tm).attr('value', res);
		$("#id_"+tm).append('<span id="p_'+tm+'" style="color:#000000;"><a href="javascript:edit_txt('+tm+');" id="edit_'+tm+'" style="color:#000000;" title="Click here to edit text">'+res+'</a></span>');
		$("#all_id").attr('value',$("#all_id").val()+'#'+tm);
		$("#div_comment").attr("style","display:none;");
   }
   function edit_txt(id){
   		var cm =$("#txtonly_"+id).val();
   		$("#div_comment").attr("style","border:1px solid #999999;padding:10px;margin-top:10px;display:block;");
   		$("#div_comment").html('<textarea id="comment_textarea" name="comment_textarea" cols="50" rows="3">'+cm+'</textarea><div class="pcrpc-button"><center><a href="javascript:edit_txt_save('+id+');">Edit</a></center></div>');
   		tiny();
	}
   
    function edit_txt_save(id){
   		$("#p_"+id).remove();
   		$("#edit_"+id).remove();
	   	$("#txtonly_"+id).attr('value', tinyMCE.activeEditor.save());
		$("#id_"+id).append('<span id="p_'+id+'" style="color:#000000;"><a href="javascript:edit_txt('+id+');" id="edit_'+id+'" style="color:#000000;float:right;" title="Click here to edit text">'+tinyMCE.activeEditor.save()+'</a></span>');
  		$("#div_comment").attr("style","display:none;");
    }
    /* End text operation */
   
   /* General Function */
   function reset_all(){   		
   		$("#div_comment").attr("style","display:none;");
   		$("#all_id").attr('value',"");
   		$("#reset").html('<div  id="dropable"  style="overflow:hidden;width:752px;height:520px;"><img src="'+$("#bg_image").val()+'" alt="pruimcity" style="width:752px;height:auto;"/></div>');
   }
   
   function tiny(){
		tinyMCE.init({themes : "simple,advanced",languages : "en",disk_cache : false,debug : false, font_size_style_values : "8pt,x-small,small,medium,large,x-large,xx-large"});
		tinyMCE.init({
		mode : "exact",
		theme : "advanced",
		plugins : "",
		theme_advanced_buttons1 : "bold,italic,underline,separator,fontselect,fontsizeselect,separator, forecolor, backcolor",
		theme_advanced_buttons2 : "",
		theme_advanced_toolbar_location : "top",
		elements : "comment_textarea"
		});
   }   
   
   function create_icon(value,size, icon){
		var myDate=new Date();
		var tm =myDate.getTime();
  		var tmp="";
  		var zindex=1;
		tmp=$("#all_id").val();
		zindex=tmp.split('#').length;  
		
		$("#dropable").after(
			  	'<div id="id_'+tm+'" class="draggable"  style="z-index:'+zindex+'; position: absolute; left: 300px; top: 240px;">'
			   +'<input type="hidden" name="z_'+tm+'" id="z_'+tm+'" value="'+zindex+'">'
			   +'<input type="hidden" name="type_'+tm+'" id="type_'+tm+'" value="'+value+'">'
			   +'<input type="hidden" name="left_'+tm+'" id="left_'+tm+'" value="300">'
			   +'<input type="hidden" name="top_'+tm+'" id="top_'+tm+'" value="240">'
			   +'</div>'
		);
		$("#id_"+tm).append('<img src="'+IMG_URL+'editor/'+icon+'.png" style="width:'+size+'px;height:'+size+'px;" />');
		$("#all_id").attr('value',$("#all_id").val()+'#'+tm);
		$("#id_"+tm).draggable({
			containment: '#dropable',
			stop: function(){    
	          if(tmp==""){            
	            //$("#ie_"+value).remove();
	            //$("#dropable").after('<div id="ie_"'+value+' style="width:1px;height:1px;">&nbsp;</div>');
	          }
				$("#left_"+tm).attr('value',$(this).position().left);
				$("#top_"+tm).attr('value',$(this).position().top);
			}	
		});
   }
   
   function create_text(value){
		var myDate=new Date();
		var tm =myDate.getTime();
		var tmp="";
		var zindex=1;
		tmp=$("#all_id").val();
		zindex=tmp.split('#').length;  
		
		$("#dropable").after(
			  	'<div id="id_'+tm+'" class="draggable"  style="z-index:'+zindex+';position: absolute; left: 300px; top: 240px;">'
			   +'<input type="hidden" name="z_'+tm+'" id="z_'+tm+'" value="'+zindex+'">'
			   +'<input type="hidden" name="type_'+tm+'" id="type_'+tm+'" value="'+value+'">'
			   +'<input type="hidden" name="left_'+tm+'" id="left_'+tm+'" value="300">'
			   +'<input type="hidden" name="top_'+tm+'" id="top_'+tm+'" value="240">'
			   +'</div>'
		);
		$("#id_"+tm).append('<span id="p_'+tm+'" style="color:#000000;">Your text</span>');
		$("#id_"+tm).draggable({
			containment: '#dropable',
			stop: function(){
			      if(tmp==""){            
			        $("#ie_text").remove();
			        $("#dropable").after('<div id="ie_text" style="width:1px;height:1px;">&nbsp;</div>');
			      }
				$("#left_"+tm).attr('value',$(this).position().left);
				$("#top_"+tm).attr('value',$(this).position().top);
			}	
		});
		$("#div_comment").attr("style","border:1px solid #999999;padding:10px;margin-top:10px;display:block;");
		$("#div_comment").html('<textarea id="comment_textarea" name="comment_textarea" cols="50" rows="3">Your text</textarea><div class="pcrpc-button"><center><a href="javascript:save_txt('+tm+');">Save</a></center></div>');
		tiny();  
   }
   
   function create3icon(value){
   		// 100, 75, 50, 37.5
  		$("#"+value+"_big").live("click", function() {
        	create_icon(value+"_big", 100, value);
 		});
   		
   		$("#"+value).live("click", function() {
			create_icon(value, 75 , value);
        });
        		
		$("#"+value+"_mid").live("click", function() {
        	create_icon(value+"_mid", 50, value);
 		});
 		
 		$("#"+value+"_sml").live("click", function() {
        	create_icon(value+"_sml", 37.5, value);
 		});
   }
   
   function create_bubble(position){
		var myDate=new Date();
		var tm =myDate.getTime();
		var tmp="";
		var zindex=1;
		tmp=$("#all_id").val();
		zindex=tmp.split('#').length;  
		
		$("#dropable").after(
			  	'<div id="id_'+tm+'" class="draggable"  style="z-index:'+zindex+';position: absolute; left: 300px; top: 240px;">'
			   +'<input type="hidden" name="z_'+tm+'" id="z_'+tm+'" value="'+zindex+'">'
			   +'<input type="hidden" name="type_'+tm+'" id="type_'+tm+'" value="bubble">'
			   +'<input type="hidden" name="left_'+tm+'" id="left_'+tm+'" value="300">'
			   +'<input type="hidden" name="top_'+tm+'" id="top_'+tm+'" value="240">'
			   +'<input type="hidden" name="width_'+tm+'" id="width_'+tm+'" value="100">'
			   +'<input type="hidden" name="height_'+tm+'" id="height_'+tm+'" value="50">'
			   +'<input type="hidden" name="position_'+tm+'" id="position_'+tm+'" value="'+position+'">'
			   +'</div>'
		);
		//tail_05
		$("#id_"+tm).append('<div id="tail01">'
		    +'<div id="bb_'+tm+'" class="bubble_block" style="width:100px;height:50px;">'
		        +'<div class="Rounded_TL">&nbsp;</div><div class="Rounded_TR">&nbsp;</div>'
		        +'<div class="Rounded_BL">&nbsp;</div><div class="Rounded_BR">&nbsp;</div>'
		        +'<div class="'+position+'" style="z-index:0;"><img src="'+IMG_URL+'facefiles/'+position+'.png" alt="" /></div>'
		        +'<div style="width:100%;height:100%;" id="rz_'+tm+'">'
		        +'<div style="position:relative;left:15px;top:0px;" id="p_'+tm+'>Your Text</div></div>'
		    +'</div>'
		+'</div>');
		
		$("#id_"+tm).draggable({
			containment: '#dropable',
			stop: function(){
			      if(tmp==""){            
			        $("#ie_bubble").remove();
			        $("#dropable").after('<div id="ie_bubble" style="width:1px;height:1px;">&nbsp;</div>');
			      }
				$("#left_"+tm).attr('value',$(this).position().left);
				$("#top_"+tm).attr('value',$(this).position().top);
			}	
		});
		
		$("#rz_"+tm).resizable({
			containment: '#reset',
			minWidth: 100,
			minHeight: 50,	
			resize: function(event, ui) {
				$("#bb_"+tm).attr('style',"width:"+ui.size.width+"px;height:"+ui.size.height+"px;");
			},
			stop: function(event, ui){
				$("#width_"+tm).attr('value',ui.size.width);
				$("#height_"+tm).attr('value',ui.size.height);				
			}	
		});
		
		$("#div_comment").attr("style","border:1px solid #999999;padding:10px;margin-top:10px;display:block;");
		$("#div_comment").html('<textarea id="comment_textarea" name="comment_textarea" cols="50" rows="3">Type your ballon content here!!</textarea><div class="pcrpc-button"><center><a href="javascript:save_bubble('+tm+');">Save</a></center></div>');
		tiny();  
   }