//var serverURL = "http://localhost:8080/friend-circle/";
var serverURL = "http://justlocate.com/friend-circle/";
var serviceURL = serverURL + "circleservice";
 

var IMG_URL = serverURL + "img/"; 
var UPLOADED_IMG = serverURL+"images/uploads/";
var UPLOADED_FC_IMG = serverURL+"images/circle_uploads/";

var CANVAS_URL = "http://profile.myspace.com/Modules/Applications/Pages/Canvas.aspx?appId=";
var PROFILE_URL = "http://www.myspace.com/";
var SOCIAL_TYPE = "myspace";

var mainContent;
var content;
var selectedMenuItem = null;
var stickerUrl=null;
var Request = new Object();
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var pagingLength = 8;
var POST_COUNT = 7;
var REPLY_COUNT = 7;
var MEMBERS_COUNT = 12;
var MEMBERS_COUNT_ALL = 100;
var socialUserId;
var circleId;
var friend_selector = null;
var IS_LIVE = true;
var currentCircleId = null;
var userName;
var circleMembers = new Array();
var consumer_key,consumer_secret;
var eiframe;


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

var drawContent = function(){

   if (typeof gadgets == "undefined"){
      IS_LIVE = false;
  }
  
   mainContent = _$("mainContent");
   
   var headerDiv =  '<div id="headerContent" align="center"></div>';
   var contentTable  = '<table style="margin-top:10px;">'+
                         '<tr>'+
                            '<td valign="top"><div id="leftAd"></div></td>'+
                            '<td valign="top"><div id="content"></div></td>'+
                         '</tr>'+
                       '</table>';
   var reportsLink = ' <table width="100%"><tbody><tr><td style="font-size:19px;padding-top:10px; padding-left: 90px; color:#8BA4B0"><b>For Report Abuse, please click <a href="http://www.myspace.com/418754980" target="_blank">Here</a></b></td></tr></tbody></table>';
   var topAd = '<div id="topAd"></div>';
   var bottomAd = '<div align="center" id="bottomAd"></div>';

   
   mainContent.innerHTML =headerDiv + contentTable + bottomAd + reportsLink;
   content = _$("content");
   
   var header =  _$("headerContent");
   header.innerHTML = getHeader() + getMenu() +topAd;

   //getAd();

   
   
   getUser(resp_getUser);
 
 //Add tooltip
 $('#menu img').tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	
        fade: 250
});
 
 applyAds('adDivTop', 'topAd');
 applyAds('adDivBottom', 'bottomAd');
 applyAds('adDivLeft', 'leftAd');
 try{
   setTimeout("sr_gof()",2000);
 }catch(ex){}
 
}


var getUser = function(callback) {
  if (!IS_LIVE){
	   	user = {};
		socialUserId = "2";
		userAge = 20;
	    userGender = 1;
		userThumbnail = "http://images.askmen.com/galleries/actress/paz-vega/pictures/paz-vega-picture-2.jpg";
		userName = "Paz Vega";
		userProfile = "http://profile.com";
	    userCountry = "am";
	    userCity = "yerevan";
	    userRegion = "yerevan";
	    userPostalCode = "374";

		   var data="query=addUser&"+getUserPostData();
 	       Request.sendPOST(serviceURL,data, resp_addUser);
 	        //  Request.sendGET(serverURL+"/circleservice?query=getProfile&socialId="+socialUserId+"&circleTypeId="+circleTypeId,resp_getProfile);
 	     
 
 	}else{
 	  var request = opensocial.newDataRequest();
      var fields = [opensocial.Person.Field.ABOUT_ME,
                    opensocial.Person.Field.AGE,
                    opensocial.Person.Field.BODY_TYPE,
                    opensocial.Person.Field.BOOKS,
                    opensocial.Person.Field.CHILDREN,
                    opensocial.Person.Field.CURRENT_LOCATION,
                    opensocial.Person.Field.DATE_OF_BIRTH,
                    opensocial.Person.Field.DRINKER,
                    opensocial.Person.Field.ETHNICITY,
                    opensocial.Person.Field.GENDER,
                    opensocial.Person.Field.HAS_APP,
                    opensocial.Person.Field.HEROES,
                    opensocial.Person.Field.ID,
                    opensocial.Person.Field.INTERESTS,
                    opensocial.Person.Field.JOBS,
                    opensocial.Person.Field.LOOKING_FOR,
                    opensocial.Person.Field.MOVIES,
                    opensocial.Person.Field.MUSIC,
                    opensocial.Person.Field.NAME,
                    opensocial.Person.Field.NETWORK_PRESENCE,
                    opensocial.Person.Field.NICKNAME,
                    opensocial.Person.Field.PROFILE_SONG,
                    opensocial.Person.Field.PROFILE_URL,
                    opensocial.Person.Field.RELATIONSHIP_STATUS,
                    opensocial.Person.Field.RELIGION,
                    opensocial.Person.Field.SEXUAL_ORIENTATION,
                    opensocial.Person.Field.SMOKER,
                    opensocial.Person.Field.STATUS,
                    opensocial.Person.Field.THUMBNAIL_URL,
                    opensocial.Person.Field.TV_SHOWS,
                    opensocial.Person.Field.URLS,
                    MyOpenSpace.Person.Field.MEDIUM_IMAGE,
                    MyOpenSpace.Person.Field.LARGE_IMAGE];

    var paramsOwner = {};
    paramsOwner[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = fields;
  
    request.add(request.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER, paramsOwner), "owner");
    request.add(request.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER, paramsOwner), "viewer");
   
    request.send(callback);
	} 
};



var getOwner = function(data){
     try{
     
	  	var viewer = data.get("viewer").getData();
	    var viewerId = viewer.getField(opensocial.Person.Field.ID);
	        viewerId= parseInt(viewerId.substring(viewerId.lastIndexOf(":")+1));
	       	
	    var viewerThumbnail = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
	    var viewerName 	= viewer.getField(opensocial.Person.Field.NAME);
	    var viewerProfile = viewer.getField(opensocial.Person.Field.PROFILE_URL);
	    var viewerGender = viewer.getField(opensocial.Person.Field.GENDER);
  	   
  	  var user = data.get('owner').getData();
	    socialUserId =  user.getId();  
	    socialUserId= parseInt(socialUserId.substring(socialUserId.lastIndexOf(":")+1));  
	    userThumbnail = user.getField(opensocial.Person.Field.THUMBNAIL_URL);
	    userName = user.getDisplayName();
	    userProfile = user.getField(opensocial.Person.Field.PROFILE_URL);
	    userGender = user.getField(opensocial.Person.Field.GENDER).getKey(); 
	    
	    var address = user.getField(opensocial.Person.Field.CURRENT_LOCATION);	        
	    userCity = address.getField(opensocial.Address.Field.LOCALITY);
        userCountry = address.getField(opensocial.Address.Field.COUNTRY);
        userRegion = address.getField(opensocial.Address.Field.REGION);
        userPostalCode = address.getField(opensocial.Address.Field.POSTAL_CODE);
	    userAge = user.getField(opensocial.Person.Field.AGE);

	       if (typeof userAge == "undefined" || userAge == null){
		         userAge = 0;
	            }
	      if (typeof userPostalCode == "undefined" || userPostalCode == null){
		          userPostalCode = "";
	        }
	        
	        req_analytic(socialUserId,"canvas");
	      
	       var data="query=adduser&"+getUserPostData();
 		   Request.sendPOST(serviceURL,data, resp_addUser);
	        
	 }catch(ex){
	    showMask();
	 }       
	        
  }


var resp_getUser = function(response) {
        getOwner(response);
       
		
}
  
  
var resp_getProfileUser = function(data){
    getOwner(data);
    Request.sendGET(serverURL+"/circleservice?query=getProfile&socialId="+socialUserId+"&circleTypeId="+circleTypeId,resp_getProfile);
}  
  
var resp_getProfile = function(response){
    var json = response.data;
    var memberCount = json.memberCount;
    var postCount = json.postCount;
    var postInfoJson = json.postInfo;
    var posts = postInfoJson.posts;
    var postStr = "";
     
   

  if(posts.length!=0) {  
      postStr +='<table width="100%">';

     for(var i=0;i<posts.length;i++){
         var post = posts[i];
      
          var commentType = (post.type=="post")?"posted" : "replied";   
              postStr +='<tr>'+
                     
                      '<td style="width:140px;" valign="top">'+
                         '<div class="userImageDiv" style="background:url('+IMG_URL+'image_frame.png)">'+
                             '<a href="'+post.userProfile+'" target="_blank"><img class="userImgSmall" src="'+post.userImg+'"></a>'+
                         '</div>'+
                         '<div align="center"><a href="'+post.userProfile+'" class="userNameStyle" target="_blank">'+post.userName+'</a></div>'+
                      '</td>'+
                      
                      '<td>'+
                         '<div style="color:#cccccc;font-size:12px;margin-left:20px;margin-right:130px;">';
                           if(post.type=="post"){
                              postStr += '<div style="color:#6F6F6F;">add new&nbsp;'+post.postType+'&nbsp;&nbsp;<a class="linkStyle" a href="'+PROFILE_URL+profileId+'" target="_blank">'+ post.subject +'</a>&nbsp;'+ getDateAsString(post.postDate) +'</div>';
                           }
                            if(post.type=="reply"){
                             postStr += '<div style="color:#6F6F6F;">'+commentType+'&nbsp;on&nbsp;<a class="linkStyle">'+ post.subject +'</a>&nbsp;'+post.postType+'&nbsp;'+ getDateAsString(post.postDate) +'</div>';
                           }
                          postStr +=// '<hr style="width:100%;background-color:#cccccc;height:1px;border:none;" />'+    
                         '</div>'+
                        '</td>'+
                     '</tr>'+
                     '<tr>'+
                         '<td colspan="2"><hr style="width:95%;background-color:#cccccc;height:1px;border:none;" /></td>'+   
                     '</tr>';
             }

  
         postStr += '</table>'; 
       }
       postStr +=  '<div align="center" style="cursor:poiter"><a href="'+PROFILE_URL+profileId+'" target="_blank"><img class="cursorStyle"  src = "'+IMG_URL+'join.png"></a></div>';
       postStr +=  '<div class="profileMiniBox"><span style=" color:#625F7F;font-size:12px;margin-left:5%;font-weight: bold; margin-top:6px;">members : </span>'+memberCount+'</div>';
       postStr +=  '<div class="profileMiniBox"><span style=" color:#625F7F;font-size:12px;margin-left:5%;font-weight: bold; margin-top:6px;">posts : </span>'+postCount+'</div>';

  _$("profileContent").innerHTML = postStr;
     gadgets.window.adjustHeight(); 
     
    
} 
  
var getUserPostData = function(){
	var str = "userName="+encodeURIComponent(userName)+
			  "&thumbnail="+userThumbnail+
			  "&country="+encodeURIComponent(userCountry)+
			  "&city="+encodeURIComponent(userCity)+
			  "&region="+encodeURIComponent(userRegion)+
	    	  "&postalCode="+encodeURIComponent(userPostalCode)+
    		  "&profile="+userProfile+
    		  "&gender="+userGender+
    		  "&age="+userAge+
	    	  "&sotialId="+socialUserId+
	    	  "&socialType="+SOCIAL_TYPE;
	
	  return str;
	
}

var req_addCircleMember = function(userId){
 	var data="query=addCircleMember&circleId="+circleId+"&sotialId="+ userId;
    Request.sendPOST(serviceURL,data, resp_addCircleMember);
}  
  
  
var resp_addCircleMember = function(){
}
    
var resp_addUser = function(){ 
    req_createCircle();
 }  
   
var req_createCircle = function(){
     var data = "query=createCircle&socialId=" + socialUserId + "&circleTypeId="+circleTypeId;
	 Request.sendPOST(serviceURL, data, resp_createCircle);
}

var resp_createCircle = function(response){
   json = response.data;
   circleId = json.circleId;
   currentCircleId = circleId;
   req_addCircleMember(socialUserId);    
   openMainPage();
   req_getMembersCount();
} 

var req_getMembersCount = function(){
	Request.sendGET(serverURL+"/circleservice?query=getMembersCount&circleId="+circleId,resp_getMembersCount);
}

var resp_getMembersCount = function(response){
	var json = response.data;
	var membersCount = json.membersCount;
	if(membersCount < 10){
		 initDiv('friends',true);   
	}
}

var getHeader = function(){
   var headerStr =  '<div id="logoDiv"></div>'+
                      '<div align="center">'+
                      '<img  id="headerImg" src="'+IMG_URL +'1.png" class="headerImg"  usemap="#headermap">'+
                      
						'<map name="headermap">'+
						  '<area shape="rect" coords="36,15,120,93"  href="javascript:initDiv(\'friends\')"/>'+
						  '<area shape="rect" coords="780,15,865,103" href="javascript:initDiv(\'settings\')" />'+
						'</map>'+
						'<div class="headerMenu">'+
						  '<table>'+
						     '<tr>'+
						        '<td><div class="headerMenuText"><a class="cursorStyle" onclick="initDiv(\'friends\')" >Add Friends</a></div></td>'+
						        '<td><div class="headerMenuText"><a class="cursorStyle" onclick="openYourCircle()">Your Circle</a></div></td>'+
						        '<td><div class="headerMenuText"><a class="cursorStyle" onclick="openYourCircle()">'+circleName+'</a></div></td>'+
						        '<td><div class="headerMenuText"><a class="cursorStyle" onclick="req_getCircleYouAreIn()">Circles you are In</a></div></td>'+	
						        '<td><div class="headerMenuText"><a class="cursorStyle" onclick="initDiv(\'settings\')">Settings</a></div></td>'+					        
						     '</tr>'+
						  '</table>'+
						'</div>'+
                   '</div>';
   return headerStr;                
}  


var getMenu = function(){
    var menuStr = '<table id="menu" align="center" class="menu">'+
                      '<tr>'+
                         '<td><div><img id="textId"    title="Add text post"     onclick="openAddPost(this)"  class="menuItem" src='+IMG_URL+'text_dis.png></div></td>'+
                         '<td><div><img id="photoId"   title="Add photo post"    onclick="openAddPost(this)"  class="menuItem" src='+IMG_URL+'photo_dis.png></div></td>'+
                         '<td><div><img id="videoId"   title="Add video post"    onclick="openAddPost(this)"  class="menuItem" src='+IMG_URL+'video_dis.png></div></td>'+
                         '<td><div><img id="stickerId" title="Add sticker post"  onclick="openAddPost(this)"  class="menuItem" src='+IMG_URL+'sticker_dis.png></div></td>'+
                      '<tr>'+
                  '</table>';
                  
       return menuStr;           
}             


var openAddPost = function(event){

   var item = event.id.substring(0,event.id.indexOf("Id"));
   selectMenuItem(item);
   if(item == "text"){
      drawAddText();
   }
   if(item == "sticker"){
     drawAddSticker();
   }
   
   if(item == "photo"){
      drawAddPhoto();
   }
   
   if(item == "video"){
     drawAddVideo();
   }
}



var selectMenuItem = function(item){
   if(selectedMenuItem !=null){
       _$(selectedMenuItem+"Id").src = IMG_URL + selectedMenuItem+"_dis.png";
   }
    selectedMenuItem = item;
   _$(item+"Id").src = IMG_URL + item+".png";
}   


//----------------  Editor -------------------------------------

var getEditor = function(type){
   var editorStr  = '<div id="editorId">'+
                          '<textarea  name="description" id="id_description" class="rte-zone"   height="150"></textarea>'+
                          '<span><img class="cursorStyle" style="margin-top:20px;margin-left:10px" src="'+IMG_URL+'main/post.png" onclick="checkPostEmpty(\''+type+'\')" ></span>'+
                          '<span class="cursorStyle" style="margin-left:285px"><img style="margin-top:20px;" src="'+IMG_URL+'main/cancel.png" onclick="openMainPage()"/></span>'+
                    '</div>';  
                    
                    
     return  editorStr; 
                  
} 

var getSubject = function(){
     var subjectStr = '<div class="contentMargin">'+
                         '<span class="subjectStyle"> Subject:</span>'+ 
                         '<input id="textSubject" type="text"/>'+
                     '</div>';
                   
     return  subjectStr;            
}  

var initEditor = function(){
    $('#textSubject').example('Your Subject');
  
    $(".rte-zone").rte({
      content_css_url: "rte.css",
      media_url: ""
   });  
}   
  
  
var getErrorPanel = function(){
   var errorDiv = '<div id="errorDiv" class="error"></div>';
   return errorDiv;
}  
//------------ Text --------------------------------------------  
                    
var drawAddText = function(){
     content.innerHTML = getFrame("text"); 
     _$("frameContent").innerHTML = getErrorPanel() + getSubject() + getEditor("text"); 

	   initEditor();
      if(IS_LIVE){
         setTimeout("gadgets.window.adjustHeight()",300); 
     } 
}   
 
 
//------------ Sticker ------------------------------------------- 
 
var drawAddSticker = function(){
  
  var searchName = circleName.substring(0,circleName.indexOf("Circle"));
  
  var stickerStr = //'<div class="subjectStyle" style="margin-bottom:10px">Add sticker</div>'+
                   '<div id="image">'+
	               '<span class="search">'+
		               '<span class="bodyText"> Search and add sticker:</span>'+
                       '<span><input style="width:250px;" value="'+searchName+'"/></span>'+
                    '</span>'+
                      '<div class="result clearfix">'+
                      '<div class="floatleft">'+
                      '<div class="search_control" class="clearfix">Loading...</div>'+
                    '</div>'+
                   '<div class="floatright">'+
                      '<div class="saved_results">'+
	                  '<img src="" alt="" />'+
	                  '<p class="demo_description">Selected image will display over here when you click the select button or the image. The image url is passed to the callback to do whatever with...</p>'+
		              '<div style="margin-left:30px" id="stickerSubjectId"></div>'+
		              '<div style="margin-left:30px" style="margin-top:10px;margin-bottom:10px;" id="stickerCommentId"></div>'+
		           '</div>'+
		          '<div align="center" style="margin-top:5px;" id="postStickerId"><span style="margin-left:50px"><img class="cursorStyle" class="cursorStyle" src="'+IMG_URL+'main/cancel_small.png" onclick="openMainPage()"/></span></div>'+
                  '</div>'+  
                '</div>'+
              '</div>';
  
    

     content.innerHTML = stickerStr;         
    // removeTabMask();         

     jGoogleImage();
      $("#image input").keyup(function() { 
          jGoogleImage();
         });
         
             if(IS_LIVE){
               setTimeout("gadgets.window.adjustHeight()",1000);
              } 
       
    } 

   var jGoogleImage = function() { 
	    // the following lines are all you need to invoke this plugin
        $('#image .search_control').jGoogle({
	      searchString: $("#image input").val(),
          callbackKeep: doSomethingWithImage
        });
        // end plugin code
      }

    

      // callback
      var doSomethingWithImage = function(url) { 
      
  
      ///subject
       var subjectStr ='<div style="color:#625F7F;font-weight: bold;font-size:10px;"> Subject:</div>'+ 
                       '<input id="stickerSubject" style="width:190px" type="text"/>';
                        
         _$("stickerSubjectId").innerHTML = subjectStr;
	   
	 ////comment
	     var commentStr = '<div style="color:#625F7F;font-weight: bold;font-size:10px;"> Comment:</div>'+ 
                          '<textarea id="stickerComment" style="width:190px;height:115px"/>';
                       
                        
	     _$("stickerCommentId").innerHTML = commentStr;
	     
	 ////post
	 
	    var butStr =   '<div>'+
                         '<span><img class="cursorStyle" onclick="postSticker()" src='+IMG_URL +'main/post_small.png></span>'+
                         '<span style="margin-left:50px"><img class="cursorStyle" class="cursorStyle" style="margin-top:20px;" src="'+IMG_URL+'main/cancel_small.png" onclick="openMainPage()"/></span>'+
                       '</div>';


	  _$("postStickerId").innerHTML =butStr;

	   
	   var alt="result";
	   stickerUrl=url;
        $("#image .saved_results p").slideUp(); 
        $("#image .saved_results img").attr({ src: url }); 
        $("#image .saved_results img").show(); 
        
         if(IS_LIVE){
             setTimeout("gadgets.window.adjustHeight()",1000);
        } 
   }
  
  
 var postSticker = function(){
     var subject = _$("stickerSubject").value;
     var comment =  _$("stickerComment").value; 
       if(IS_LIVE){
          var cont = userName + " Add new sticker in " + circleName;
          sendNotifications(cont,circleMembers);
         }
     var data = "query=addPost&type=sticker&socialId=" + socialUserId + "&circleId="+currentCircleId+"&subject="+subject+"&body="+comment+"&resource=" + stickerUrl;
	 Request.sendPOST(serviceURL, data, openMainPage);
   
     
 }


//------------- Photo ---------------------------------------------
var uploadedImage = null;
var isCorrectFormat = false;
var uploadRundomNumber = 0;
// action="circleservice?query=upload"

var drawAddPhoto = function(){
   uploadRundomNumber = Math.floor(Math.random() * 99999);
   var addPhotoStr =  '<div id="imageDiv"></div>'+
                      '<div id="uploadPhotoError" class="error"></div>'+
                      '<form class="contentMargin"  action="'+serviceURL+'?query=upload" enctype="MULTIPART/FORM-DATA" method="post" name="upload"' +
                        'onsubmit="return AIM.submit(this, {onStart : startUploadPhoto, onComplete : completeImgUpload})">'+
                          '<span class="subjectStyle">Add Photo:</span>'+ 
                          '<input type="file" name="image" id="photoFileId" />'+
                          '<input type="hidden" name="img_ext" value="'+uploadRundomNumber+'" />'+
                          '<input id="uploadbutton"  type="submit" value="Upload"/>'+
                      '</form>';
                      
     
     content.innerHTML = getFrame("photo");
    _$("frameContent").innerHTML =  getErrorPanel() + addPhotoStr + getSubject() + getEditor("photo");

   //removeTabMask();
    initEditor();
     if(IS_LIVE){
       setTimeout("gadgets.window.adjustHeight()",300);
     } 
}


 var startUploadPhoto = function(){
    var extArray = new Array("jpg","png","gif","jpeg");

    var name = _$("photoFileId").value;
    if(name.lastIndexOf(".")!=-1){
    
       var ext = name.substring(name.lastIndexOf(".")+1)
        for(var i=0;i<extArray.length;i++){
        if((new String(ext)).toLowerCase()==(new String(extArray[i])).toLowerCase()){
          //if(ext==extArray[i]){
            isCorrectFormat = true;
             break;
           }else
             isCorrectFormat = false;
         }
       
       }else{
         isCorrectFormat = false;
      }
    
   if(isCorrectFormat){
        uploadedImage = name;
        return true;
        
     }else{
       _$("uploadPhotoError").innerHTML = "Please choose correct image type";
       return false;
       }
 }
 
 
 var completeImgUpload = function(){
   if(isCorrectFormat){
     _$("uploadPhotoError").innerHTML = "";
     _$("errorDiv").innerHTML = "";
     _$("imageDiv").innerHTML='<img style="height:100px;margin-bottom:10px;" src="'+UPLOADED_IMG+ uploadRundomNumber + "_" + uploadedImage+'">';
   }
   if(IS_LIVE){
        setTimeout("gadgets.window.adjustHeight()",500);
      } 
}
 
 
 
var AIM = {

    frame : function(c) {
       var n = 'f' + Math.floor(Math.random() * 99999);
        var d = document.createElement('DIV');
        d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\', \''+c.id+'\')"></iframe>';
        document.body.appendChild(d);

        var i = document.getElementById(n);
    
        if (c && typeof(c.onComplete) == 'function') {
             i.onComplete = c.onComplete;
        }

        return n;
    },

    form : function(f, name) {
        f.setAttribute('target', name);
    },

    submit : function(f, c) {
        AIM.form(f, AIM.frame(c));
        if (c && typeof(c.onStart) == 'function') {
            return c.onStart(c.id);
            } else {
            return true;
        }
    },

    loaded : function(id, qId) {
        var i = document.getElementById(id);
        if (typeof(i.onComplete) == 'function') {
            i.onComplete(qId);
            
        }
    }
}




//-------------- Video ---------------------------------------------

var drawAddVideo = function(){
    var addVideoString ='<div class="contentMargin">'+
                          '<span class="subjectStyle">YouTube Video URL:</span>'+ 
                          '<input style="width:200px" id="videoURL" type="text"/>'+
                       '</div>';
      content.innerHTML = getFrame("video"); 
     _$("frameContent").innerHTML = getErrorPanel() + addVideoString + getSubject() + getEditor("video"); 

      //removeTabMask();

      initEditor();
        if(IS_LIVE){
           setTimeout("gadgets.window.adjustHeight()",300);
        }
      $('#videoURL').example('Add URL');
}


//-----------------------------------------------------------------------------------  
  
var getFrame = function(type){
  var frameStr = '<div class="frameBox frameMargin" style="width:620px">'+
                    '<div class="innerFrameBox">'+
                         '<div class="subjectStyle" style="margin-bottom:10px">Create your '+type+' post</div>'+
                         '<div class="frameBox2">'+
                         '<div id="frameContent" class="innerBox2">'+
                             '</div>'+ 
                         '</div>'+    
                    '</div>'+
                '</div>';
    return  frameStr;           
                
} 
//-----------------------------
var getDateAsString = function(data){
        var date = new Date(data);
		var hours = date.getHours();
		var minutes=date.getMinutes();
		minutes=((minutes < 10) ? "0" : "") + minutes;
		var dateStr = monthname[date.getMonth()] + " " + date.getDate() + " , " +
					   date.getFullYear() + " " + hours + ":" + minutes;
					   
      return dateStr;					   
}

//--------------------------  Add Reply ---------------------------------------------
 
var req_addReply = function(postId){
     var comment = _$("reply").value;
     
     if(comment!=null && comment!=""){ 
	     var data = "query=addReply&socialId="+socialUserId+ "&postId="+postId+"&comment="+ comment;
		 Request.sendPOST(serviceURL, data, resp_addReply);
	 }
 } 


var resp_addReply = function(response){
   var json = response.data;
   var postId = json.postId;
   req_showFullStory(postId,1);
}

//-------------------------  FullStory -------------------------------------------------

var req_showFullStory = function(postId,page){
    Request.sendGET(serverURL+"/circleservice?query=getFullStory&postId="+postId+"&page="+page + "&count="+REPLY_COUNT,resp_showFullStory);
}

var startNum2 = 1;

var resp_showFullStory = function(response){
   var json=response.data;
   var replies = json.replies;
   var post = json.post;
   var currentPage = json.page;
   
   var fullStoryStr = '<div  class="fullStory fullStoryPost">'+
                          '<table>'+
                             '<tr>'+
                                '<td style="width:140px;margin-top:8px;" valign="top">'+
                                    '<div class="userImageDiv" style="background:url('+IMG_URL+'image_frame.png)">'+
                                        '<a href="'+post.userProfile+'" target="_blank"><img class="userImgSmall" src="'+post.userImg+'"></a>'+
                                    '</div>'+
                                    '<div align="center"><a href="'+post.userProfile+'" class="userNameStyle" target="_blank">'+post.userName+'</a></div>'+
                                '</td>'+
                                '<td valign="top">'+
                                   '<div style="color:#cccccc;font-size:12px;margin-left:0px;margin-right:20px;">'+
                                      '<div style="color:#6F6F6F;">Posted &nbsp;<a class="linkStyle">'+ post.subject +'&nbsp</a>'+ getDateAsString(post.postDate) +'</div>'+
                                      '<hr style="width:100%;background-color:#cccccc;height:1px;border:none;" />'+    
                                   '</div>'+
                                '<div style="color:#333333;font-size:12px;margin-left:30px;margin-top:10px;word-wrap:break-word;">'+replaceBody(post.body,40)+'</div>';

  
                                    if(post.postType == "photo"){   
                                        fullStoryStr += '<div class="postPhotoDiv"><img class="postPhoto" src="'+ UPLOADED_IMG + circleId + "/"+post.resourceUrl+'"></div>';                       
                                        }
                                        
                                    if(post.postType == "sticker"){   
                                        fullStoryStr += '<div class="postPhotoDiv"><img class="postPhoto" src="'+post.resourceUrl+'"></div>';                       
                                        }
                                            
                                    if(post.postType == "video"){
                                       var videoUrl = post.resourceUrl.substring(0,post.resourceUrl.indexOf("?"))+"/v/" + post.resourceUrl.substring(post.resourceUrl.indexOf("=")+1,post.resourceUrl.length);
                                       fullStoryStr +='<div class="postVideoDiv"><embed src="'+videoUrl+'&autoplay=0" type="application/x-shockwave-flash" allowscriptaccess="always" bgcolor="000000" allowfullscreen="never" width="300" height="225" wmode="opaque"></embed></div>';
                                       }    
         fullStoryStr +=       '</td>'+
                               '</tr>'+
                             '</table>'+
                         '</div>';
                         
    
   fullStoryStr +=  '<div style="margin-left:160px;margin-top:15px;">'+
                       '<div  style="color:#625F7F;font-weight: bold;font-size:10px;">Add Comment:</div>'+ 
                       '<textarea id="reply" style="width:220px;height:115px;border"1px solid red;"></textarea>'+
                       '<div>'+
                         '<span><img style="height:30px;margin-top:5px;" onclick="req_addReply('+post.postId+')" class="cursorStyle" src='+IMG_URL +'main/reply_small.png></span>'+
                         '<span style="margin-left:70px"><img class="cursorStyle" style="margin-top:20px;" src="'+IMG_URL+'main/cancel_small.png" onclick="openMainPage()"/></span>'+
                       '</div>'+
                    '</div>';      
                         
   
  fullStoryStr +='<table class="fullStory" style="margin-top:30px;width:500px;">';
  
  if(replies.length!=0){ 
   for(var i=0;i<replies.length;i++){
     var reply = replies[i];
       fullStoryStr +='<tr>'+
                        '<td style="width:140px;margin-top:8px;" valign="top">'+
                         '<div class="replyUserImageDiv" style="background:url('+IMG_URL+'image_frame_small.png)">'+
                             '<a href="'+reply.userProfile+'" target="_blank"><img class="replyUserImgSmall" src="'+reply.userImg+'"></a>'+
                         '</div>'+
                         '<div align="center"><a href="'+reply.userProfile+'" class="userNameStyle" target="_blank">'+post.userName+'</a></div>'+
                      '</td>'+
                      
                      '<td valign="top">'+
                         '<div style="color:#cccccc;font-size:12px;margin-left:20px;margin-right:160px;">'+
                            '<div style="color:#6F6F6F;">replyed&nbsp;'+ getDateAsString(reply.commentDate) +'</div>'+
                            '<hr style="width:100%;background-color:#cccccc;height:1px;border:none;" />'+    
                         '</div>'+
                         '<div style="color:#333333;font-size:12px;margin-left:30px;margin-top:10px;">'+reply.comment+'</div>'+
                     '</td>'+
                     '</tr>'+
                    '<tr>'+
                      '<td COLSPAN="2">'+
                          '<div><hr style="width:95%;background-color:#cccccc;height:1px;border:none;" /></div>'+
                       '</td>'+
                    '</tr>';
           }
  
      fullStoryStr += '</table>';
      fullStoryStr += '<div id="pagingDiv">';
     
   
   ///////////////////////
     var pagingStr ='<div id="pagingContent" class="fullStory" style="margin-top:25px;">'; 
     var pageCount = Math.ceil(json.total / REPLY_COUNT);
     
    
  if(pageCount>1){    
  
    if(pageCount < pagingLength + 1){ 
       for (var p = 1; p<pageCount+1;p++){ 
         pagingStr += '<div id="page_'+p+'" onclick="req_showFullStory('+post.postId+','+p+')" class="gsc-cursor-page">'+p+'</div>';
       }  
    }
  
    else{
       if(startNum2>1){
          pagingStr += '<div id="previus" onclick="paging2(this); req_showFullStory(\''+post.postId+'\',\''+(startNum2-1)+'\')" class="gsc-cursor-page"> << Previus </div>'; 
       }
      
      for (var p = startNum2; p< startNum2+pagingLength;p++){ 
         pagingStr += '<div id="page_'+p+'" onclick="req_showFullStory('+post.postId+','+p+')" class="gsc-cursor-page">'+p+'</div>'; 
      }  
      
      if (startNum2+pagingLength < pageCount+1){
			 pagingStr += '<div id="next" onclick="paging2(this); req_showFullStory('+post.postId+',\''+(startNum2+pagingLength)+'\')" class="gsc-cursor-page"> Next>> </div>'; 
	   }
	    
   }
  
    
    pagingStr += '</div>';
    fullStoryStr += pagingStr;  
    fullStoryStr += '</div>';

    
    
    }
  }
 
  content.innerHTML = fullStoryStr;
  
  $('textarea.resizable:not(.processed)').TextAreaResizer();
 

  if(pageCount>1) {
     _$("page_" + currentPage).className="gsc-cursor-page gsc-cursor-current-page";
   }  
}


var paging2 = function(event){
   if(event.id=="next"){
      startNum2++;
   }
   if(event.id=="previus"){
       startNum2--;
   }
}

 
//-------------------------- Main Page --------------------------------------------------
var startNum = 1; 




var openMainPage = function(){ 
  req_getCurrentCircleInfo();
  initMainContent(); 
  req_getPosts(1);
  setTimeout("req_getMembers()",500);
  
   Request.sendGET(serverURL+"/circleservice?query=getMembers&circleId="+currentCircleId+"&count="+MEMBERS_COUNT_ALL+"&socialType="+SOCIAL_TYPE,resp_getMembers_all);
  
}

var resp_getMembers_all = function(response){
    var json = response.data;
    var members = json.members;

    for(var i=0;i<members.length;i++){
      var member = members[i];
      circleMembers[i] = member.socialUserId;
  }
}





var openYourCircle = function(){
   currentCircleId = circleId;
   openMainPage();
}

var openCircle = function(circle_id){
   currentCircleId = circle_id;
   openMainPage();
}

var req_getCircleYouAreIn = function(){
	  //showTabMask();
      Request.sendGET(serverURL+"/circleservice?query=getCircleIn&socialId="+socialUserId,resp_getCircleYouAreIn); 
}

var resp_getCircleYouAreIn = function(response){
   var circleStr = "";
   var json = response.data;
   var circles = json.circles;
  
   circleStr += '<div class="miniHeaderDiv circleHeaderDiv">Circle you are in</div>';
   circleStr += '<table style="margin-left:25px;">';
   for(var i=0;i<circles.length;i++){
      var circle = circles[i];
        circleStr += '<tr>'+
        
                       '<td style="width:140px;" valign="top">'+
                          '<div class="circleImageDiv">'+
                             '<a onclick="openCircle('+circle.circleId+')"><img class="circleImg" src="'+circle.iconUrl+'"></a>'+
                          '</div>'+
                          '<div><a  onclick="openCircle('+circle.circleId+')" class="userNameStyle" target="_blank">'+circle.circleName+'</a></div>'+
                       '</td>'+
                      
                      '<td>'+
                         '<div style="color:#cccccc;font-size:12px;margin-left:20px;margin-right:130px;">'+
                              'owner is <a href="'+circle.ownerProfile+'" target="_blank" class="linkStyle">'+circle.ownerName+'&nbsp</a><img src="'+circle.ownerImg+'" class="miniUserImg">'+
                         '</div>'+
                      '</td>'+
                     '</tr>'+
                     
                     '<tr>'+
                         '<td colspan="2"><hr style="width:95%;background-color:#cccccc;height:1px;border:none;" /></td>'+   
                     '</tr>';
    } 
    
    circleStr +='</table>';
    
   content.innerHTML = circleStr;
   
   req_getCurrentCircleInfo();
   //removeTabMask();
   
}

///////////

var initMainContent= function(){
  var mainStr = '<div id="postContainer"  style="float:left">'+
                  ' <div id="loadingId" style="margin-top:40px;margin-left:250px;margin-right:40px;"><img src ="'+IMG_URL+'big-loading.gif"></div>'+
                '</div>'+
                '<div id="rightDiv" class="memberDiv" style="float:left">'+
                   '<div id="memberContainer"></div>'+
                   '<div id="rightAd" style="margin-top:20px;"></div>'+ 
               '</div>';    
 
   content.innerHTML = mainStr;
   getRightAd();
  // removeTabMask();
}
/////////

var req_getPosts = function(page){
     Request.sendGET(serverURL+"/circleservice?query=getPost&circleId="+currentCircleId+"&page="+page+"&count=" + POST_COUNT,resp_getPosts);
}

var req_getMembers = function(){
     Request.sendGET(serverURL+"/circleservice?query=getMembers&circleId="+currentCircleId+"&count="+MEMBERS_COUNT+"&socialType="+SOCIAL_TYPE,resp_getMembers);
}




var resp_getMembers = function(response){

   var json = response.data;
   var members = json.members;
   var colCount = 2;

   var memberStr = '<div class="miniHeaderDiv memberHeaderDiv">Circle members</div>';
       memberStr+= '<table>';
 
    for(var i=0;i<members.length && i<colCount*6;i++){
      var member = members[i];
      var userName = member.name;
      if(userName.length >9 )
             userName = member.name.substring(0,9) + "...";
      
     if ( i % colCount == 0)
           memberStr += '<tr>';
           memberStr +='<td>'+
                          '<div align="center" class="memberPhotoDiv"><a target="_blank" href="'+member.profile+'"><img class="usrImg" src="'+member.userImg+'"></a></div>'+
                          '<div align="center"><a class="userNameStyle" target="_blank" href="'+member.profile+'">'+userName+'</a></div>'+
                        //  '<div style="color:#6F6F6F;">Joined</div>'+
                        //  '<div>'+getDateAsString(member.joinDate)+'</div>'+
                      '</td>';
  

    if ( i % colCount == (colCount-1) ) memberStr += "</tr>";                
     
  }

  _$("memberContainer").innerHTML = memberStr;

}



var cropText = function(body,max){
     var n=0;
     var newBody = "";
   if(body.length >max){
        n = body.length/max;
        for(var i=0;i<n;i++){
          newBody +=  body.substring(i*max,(i+1)*max)+"<br>";
        }   
        return newBody;
    }  
   else{
      return body;
   }

}


var replaceBody = function(body,max){
    var newBody = "";
    var splitBodyArray = body.split(" ");
   
  
  if(body.length >max){
     if(splitBodyArray.length==1){  
        for(var j=0;j<splitBodyArray.length;j++){
            var str = splitBodyArray[j];
            newBody += cropText(str,max);
          }
            return newBody;
       } 
  
    
  }
    return  body;
   
}


var resp_getPosts = function(response){

   var json=response.data;
   var posts = json.posts;
   var currentPage = json.page;

//------------postInfo
  var postStr = "";

 if(posts.length!=0) { 
   postStr =  '<div class="innerPostContainer" id="posts">';
   postStr +='<table width="100%">';
 
    
  for(var i=0;i<posts.length;i++){
     
     var post = posts[i];
    // var commentType = (post.type=="post")?"posted" : "replied";   
       var commentType = "posted";
         postStr +='<tr>'+
                     
                      '<td style="width:140px;margin-top:8px;" valign="top">'+
                         '<div class="userImageDiv" style="background:url('+IMG_URL+'image_frame.png)">'+
                             '<a href="'+post.userProfile+'" target="_blank"><img class="userImgSmall" src="'+post.userImg+'"></a>'+
                         '</div>'+
                         '<div align="center"><a href="'+post.userProfile+'" class="userNameStyle" target="_blank">'+post.userName+'</a></div>'+
                      '</td>'+
                      
                      '<td valign="top">'+
                         '<div style="color:#cccccc;font-size:12px;margin-left:20px;margin-right:130px;">'+
                            '<div style="color:#6F6F6F;">'+commentType+'&nbsp;<a class="linkStyle" onclick="req_showFullStory('+post.postId+',1)">'+ post.subject +'</a>&nbsp;'+ getDateAsString(post.postDate) +'</div>'+
                            '<hr style="width:100%;background-color:#cccccc;height:1px;border:none;" />'+    
                         '</div>'+
                         
                         
                       '<div style="color:#333333;font-size:12px;margin-left:30px;margin-top:10px;width:295px;word-wrap:break-word;">'+replaceBody(post.body,17)+'</div>';
                      
             
                             if(post.postType == "photo"){   
                                  postStr += '<div class="postPhotoDiv"><img class="postPhoto" src="'+UPLOADED_IMG + currentCircleId+"/"+post.resourceUrl+'"></div>';                       
                               }
                               if(post.postType == "sticker"){   
                                  postStr += '<div class="postPhotoDiv"><img class="postPhoto" src="'+post.resourceUrl+'"></div>';                       
                               } 
                              if(post.postType == "video"){
                                var  videoUrl = unescape(post.resourceUrl);
                                videoUrl =videoUrl.substring(0,videoUrl.indexOf("?"))+"/v/" + videoUrl.substring(videoUrl.indexOf("=")+1,videoUrl.length);
                                postStr +='<div class="postVideoDiv"><embed src="'+videoUrl+'&autoplay=0" type="application/x-shockwave-flash" allowscriptaccess="always" bgcolor="000000" allowfullscreen="never" width="300" height="225" wmode="opaque"></embed></div>';
                               }    
                      //     } 
                    if(post.type=="reply"){
                          postStr +='<div style="margin-top:50px;background:#F5FAFB;padding:10px;margin-right:10px;width:309px;">'+
                                        '<table>'+
                                            '<tr>'+
                                                '<td  valign="top">'+
                                                  '<a href="'+post.rProfile+'" target="_blank"><img class="miniUserImg" src="'+post.rImg+'"></a>'+
                                                  '<div align="center"><a href="'+post.rProfile+'" class="userNameStyle" target="_blank">'+post.rName+'</a></div>'+
                                                '</td>'+
                                                '<td valign="top">'+
                                                   '<div style="color:#cccccc;font-size:12px;">'+
                                                      '<div style="color:#6F6F6F;">last reply on &nbsp;'+ getDateAsString(post.rDate) +'</div>'+
                                                   '</div>'+
                                                   '<div style="color:#333333;font-size:12px;margin-left:15px;margin-top:10px;width:161px;word-wrap:break-word;">'+replaceBody(post.rBody,17)+'</div>'+
                                                '</td>'+ 
                                             '</tr>'+
                                        '</table>'+
                                    '</div>';
                                 }
                    
         postStr += '</td>'+
                   
                    '</tr>'+
                    '<tr>'+
                      '<td COLSPAN="2">'+
                         '<div style="width:123px;height:23px;" class="seeFullTextStyle" onclick="req_showFullStory('+post.postId+',1)"><img src="'+IMG_URL+'/main/seefullstory.png"/></div>'+
                         // '<div class="seeFullTextStyle" onclick="req_showFullStory('+post.postId+',1)">See full story</div>'+
                          '<div><hr style="width:80%;background-color:#cccccc;height:1px;border:none;" /></div>'+
                       '</td>'+
                       
                   '</tr>';
        }        
   postStr += '</table>'+
            '</div>'; 
 
   _$("postContainer").className="postContainer";
   _$("postContainer").innerHTML = postStr;
     
   

 ///--- paging ------------------------------------ 
   var pagingStr ='<div id="pagingContent" style="margin-top:25px;">'; 
   var pageCount = Math.ceil(json.total / POST_COUNT);
 
  if(pageCount>1){    
  
  if(pageCount < pagingLength + 1){ 
    for (var p = 1; p<pageCount+1;p++){ 
       pagingStr += '<div id="page_'+p+'" onclick="req_getPosts('+p+')" class="gsc-cursor-page">'+p+'</div>';
     }  
  }
  

  else{
      if(startNum>1){
         pagingStr += '<div id="previus" onclick="paging(this); req_getPosts('+(startNum-1)+')" class="gsc-cursor-page"> << Previus </div>'; 
      
       }
      for (var p = startNum; p< startNum+pagingLength;p++){ 
         pagingStr += '<div id="page_'+p+'" onclick="req_getPosts('+p+')" class="gsc-cursor-page">'+p+'</div>'; 
      }  
      
      if (startNum+pagingLength < pageCount+1){
			 pagingStr += '<div id="next" onclick="paging(this); req_getPosts('+(startNum+pagingLength)+')" class="gsc-cursor-page"> Next>> </div>'; 
	   }
	  
  }
   
    pagingStr += '</div>';
    
        
      
    _$("posts").innerHTML += pagingStr;
    _$("page_" + currentPage).className="gsc-cursor-page gsc-cursor-current-page";
      
    }
   } else{
      _$("loadingId").innerHTML = '<div align="center">Select text,photo,video or sticker to add post!</div>';
   }
   
    
     if(IS_LIVE){
         setTimeout("gadgets.window.adjustHeight(5000)",1000);
      } 
 }







var paging = function(event){
   if(event.id=="next"){
      startNum++;
   }
   if(event.id=="previus"){
     if(startNum>1){
         startNum--;
       }
   }
}


///-------------------------- Add Post --------------------------------------------------

var checkPostEmpty = function(type){
  var isEmpty = false;

  var iframes = $('iframe');
  
  for(var i=0;i<iframes.length;i++){
	  if(iframes[i].id == "id_description"){
		  eiframe = iframes[i];
	  }
	  
  }
  
  body =  $.fn.rte.html(eiframe); 

  
  if(type=="text"){
     if(body=="" || body=="null" || body=="<br>"){
       _$("errorDiv").innerHTML = "Please add post content";
        isEmpty = true;
      }
  }
  if(type=="photo"){
     if(_$("imageDiv").innerHTML==""){
      _$("errorDiv").innerHTML = "Please upload photo";
       isEmpty = true;
     }
  }
   
   if(type=="video"){
       var url = _$("videoURL").value;
       if(url.indexOf("youtube")==-1){
          _$("errorDiv").innerHTML = "Please enter youtube video URL";
          isEmpty = true;
       }
    }

  if(!isEmpty){
      addPost(type);
  }
}






var addPost = function(type){
   var subject = null
   var body = null;
   var resource = null;
 
 if(type=="text"){
     resource = null;
  }
 if(type=="photo"){
    resource = uploadRundomNumber+"_"+uploadedImage;
    }
 
 if(type == "video"){
    var resource = _$("videoURL").value;
 
 }      
  
      subject = _$("textSubject").value;
      body =  $.fn.rte.html(eiframe); 
     

      if(subject == "" || subject == null || subject == "Your Subject"){
        
           $("#textSubject").text(body);
        
       
         var bodyHTML =  $("#textSubject").text();
 
          if(body.length < 15)
             subject = bodyHTML;
          else
             subject = bodyHTML.substring(0,15)+"...";   
          }
       body = escape(body);
       subject = escape(subject);

       if(IS_LIVE){
          var cont = userName + " Add new " + type +" in " + circleName;
          
          sendNotifications(cont,circleMembers);
         }
       var data = "query=addPost&type="+type+"&socialId=" + socialUserId + "&circleId="+currentCircleId+"&subject="+subject+"&body="+body+"&resource="+resource;

       Request.sendPOST(serviceURL, data, openMainPage);
   
     //  Request.sendGET(serviceURL+"/addPost/"+type+"/"+ socialUserId+"/"+circleId+"/"+subject+"/"+body+"/"+ resource,openMainPage);
}
//--------------------------  Save Settings ---------------------------------------------
 
var req_saveSettings = function(imgUrl, desc){
     //var comment = _$("reply").value;
     document.getElementById("saveLoader").style.display = "block";
     var data = "query=saveSettings&circleId="+circleId+ "&imgUrl="+imgUrl+"&desc="+ desc;
	 Request.sendPOST(serviceURL, data, resp_saveSettings);
 } 


var resp_saveSettings = function(response){
   var json = response.data;
   if(response.status=="200"){
   	document.getElementById("saveLoader").style.display = "none";
   	closeDivs();
   }
   closeDivs();
}

//----------------------------- Invite Friend ------------------------------------------

var initFriends = function(){
	friend_selector = new FriendSelector("allContent",3, 7, "top");
	friend_selector.init();
	friend_selector.draw();
   
}

var saveFriends = function(){
     var friends = friend_selector.getSelectedFrineds();
     for(var i =0; i< friends.length; i++) {
         
        var str =  "userName="+friends[i].fields_.nickname+
			       "&thumbnail="+friends[i].fields_.thumbnailUrl+
			       "&profile="+friends[i].fields_.profileUrl+
                   "&sotialId="+friends[i].fields_.id+
                   "&socialType="+SOCIAL_TYPE;
                   
        var data="query=saveFriend&"+str+"&circleId="+circleId;
 	    Request.sendPOST(serviceURL,data, resp_saveFriends);
        
        }
 }

var resp_saveFriends = function(){
}

var req_analytic = function(suserId,channel){
   Request.sendGET("http://adturns.com/channelStatistics.php?act_own=32&socialType="+SOCIAL_TYPE+"&appId="+channelName+"&userId="+suserId+"&channel="+channel,resp_analytic);

}

var resp_analytic = function(){
}




var inviteFriend  = function(){
    
    req_analytic(socialUserId,"invite");
    
    var friends = friend_selector.getSelectedFrineds();
    var recipientsIds = [];
    for(var i =0; i< friends.length; i++) {
		recipientsIds.push(friends[i].fields_.id);
	}
	
	var params = {};
    var reason = opensocial.newMessage(body);
	
  
    var body = "Hey [recipient]! [sender] wants you to";
    body += "add [app]. A fun new way to view your profile!";
    var reason = opensocial.newMessage(body);
    opensocial.requestShareApp(recipientsIds, reason, rsaCallback);
}


var rsaCallback = function(response){
    if(response && !response.hadError()){
    	saveFriends(); 
    } else {
    	console.log(response.text);
    }
}

///------------------------ Request -----------------------------------------------------

Request.send = function(url, method, responseHandler, data, urlencoded) {

	var req;	
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	req.onreadystatechange = function() {
		if (req.readyState == 4) {// only if req shows "loaded"
			if (req.status < 400) {// only if "OK"
				 try{
				 	req.data = eval("("+req.responseText+")"); 
				 }catch(ex){
				 	
				 }
				 req.text = req.responseText;
				 responseHandler(req);
			}
		}
	}
	if (method=="POST") {
		req.open("POST", url, true);
		if (urlencoded) req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		req.send("" + data);
	}else{
		req.open("GET", url, true);
		req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		req.send(null);
	}
	
	return req;
}

Request.sendPOST = function(url, data, responseHandler) {
	if (IS_LIVE){
		var os_params = {};
		os_params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
		os_params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
		os_params[gadgets.io.RequestParameters.POST_DATA] = data;
		gadgets.io.makeRequest(url, responseHandler, os_params);
	}else{
		if(undefined == data) data = '';
		Request.send(url, "POST", responseHandler, data, true);
	}
}

Request.sendGET = function(url, responseHandler) {
	if (IS_LIVE){
		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, responseHandler, os_params);
	}else{
		Request.send(url, "GET", responseHandler);
	}
}

function showTabMask(){
               
	 var tabMask = document.createElement("div");
	 tabMask.className = "body-mask";
	 tabMask.style.height = "900px";
	 tabMask.setAttribute("text-align","center");
	
	 
	 tabMask.id = "tab-mask";
	 tabMask.onclick = function(ev){
	  if (window.event) ev = window.event;
	  ev.cancelBubble = true;
	  return false;
	 }  
	 // getEl("tabContainer").appendChild(tabMask); 
	 var div  = document.createElement("div");
	   //div.className = "preloading-dlg";
	
	 div.id = "loading-dlg";
	 div.innerHTML  ='<center><p style="font-size:12px;font-weight:bold;">Please wait...<img style="border:none;" src="'+IMG_URL+'loading.png"/></p></center>';
	 
	  tabMask.appendChild(div);
	  
	  _$("mainContent").appendChild(tabMask);

}



function removeTabMask() {
	 var node = _$("loading-dlg");
	     node.parentNode.removeChild(node);
	     node = _$("tab-mask");
	     node.parentNode.removeChild(node);
}


var showMask = function(){
	   var bodyMask = document.createElement("div");
		bodyMask.className = "body-mask";
		bodyMask.id = "body-mask";
		bodyMask.onclick = function(ev){
			if (window.event) ev = window.event;
			ev.cancelBubble = true;
			return false;
		}
		document.body.appendChild(bodyMask);
		
		var wizardBox = document.createElement("div");
		wizardBox.className = "wizardBox-dlg";
		wizardBox.id = "wizardBox-dlg";
		wizardBox.style.left = (75+circleName.length*10)+"px";
		wizardBox.innerHTML = 
		"<center><img src='"+IMG_URL+"arrow_jump.gif'></center>"+
		"<div style='border: 3px solid red; padding:13px'>"+
		"Add / Install this App to start using </div>";
		document.body.appendChild(wizardBox);
	}


//---------------------------  getAd --------------------------------------------
 var getAd = function(){
       _$("topAd").innerHTML = '<iframe frameborder="0" src = "http://adturns.com/ad.php?c=61" width = "728" height = "90"  border="0" style = "border: none; overflow: hidden" frameborder="0"  scrolling="no" />';
	   _$("bottomAd").innerHTML = '<iframe frameborder="0" src = "http://adturns.com/ad.php?c=61" width = "728" height = "90" border="0" style = "border: none; overflow: hidden" frameborder="0"  scrolling="no" />';
	  
 }
 

 var getRightAd = function(){
      _$("rightAd").innerHTML = '<iframe frameborder="0" src = "http://adturns.com/ad.php?c=85" width = "300" height = "250" border="0" style = "border: none; overflow: hidden" frameborder="0"  scrolling="no" ></iframe>';
 }

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

	}
 //------------------------- getCurrentCircleInfo  --------------------------------------------
 
 var req_getCurrentCircleInfo = function(){
     Request.sendGET(serverURL+"/circleservice?query=getCircleInfo&circleId="+currentCircleId,resp_getCurrentCircleInfo);
  
 }
 
 var resp_getCurrentCircleInfo = function(response){

    
     var json = response.data;
     
	 var iconUrl = json.iconUrl;
	 var desc = json.description;
	 var circleName = json.circleName;
	 var ownerName = json.ownerName;
	 var ownerProfile = json.ownerProfile;
	 var ownerImg = json.ownerImg;
	 
	 consumer_secret = json.consumerSecret;
	 consumer_key = json.consumerKey;
	 
	  var img = _$("headerImg");
	 
	 var top  = findPosY(img) + img.height/2-30 + "px";
	 var left = findPosX(img)+ img.width/2-30 + "px";
	 
	 var str = '<img class="logoStyle" src="'+iconUrl+'" style="position:absolute;top:'+top+';left:'+left+'" onclick="openMainPage()">';
	
	 _$("logoDiv").innerHTML = str; 
	
 }
 
 //------------------------- Notification -----------------------------------
 
 var sendNotifications = function(body,appUsersIds) {
 
 var templateParams = '';
 
 var data_part =  "&contentTemplate=" + body + 
                  "&applicationId=" + canvasId + 
                  "&consumerKey=" + consumer_key + 
                  "&consumerSecret=" + consumer_secret +
                  "&canvasButtonLabel=Join Auction!";//profileButtonLabel
 
 var counter=0;
   for (var i = counter; i < appUsersIds.length; i++ ) {
     var user_id = appUsersIds[i];
     templateParams += '{"args":{"userId":"'+user_id+'"}},';// may contain userName, etc. 418493483
  }
  
  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 = '';

}

var resp_sendNotifications = function(response){
 
}