<style>
#container { width:457px; }
.comments li.grey-comment .meta li.image-reply img { margin-right: 101px; }
</style>
<script type="text/javascript">

$('textarea#resize-demo').autoResize({
  // On resize:
  onResize : function() {
      $(this).css({opacity:0.8});
   },
  // After resize:
   animateCallback : function() {
       $(this).css({opacity:1});
    },
   // Quite slow animation:
   animateDuration : 300,
   // More extra space:
   extraSpace : 0
	});

</script>
<script type="text/javascript">
$(function(){

	//hover states on the static widgets
	$('.dialog_link, ul.icons li').hover(
		function() { $(this).addClass('ui-state-hover'); },
		function() { $(this).removeClass('ui-state-hover'); }
	);
		
$(".fbLikeButtontochange").bind('click', function() {
		
		if( $(this).attr('liked') == "true" )
			return false
		var oid = $(this).attr("oid")
		var url = '<?php echo $this->moduleBaseUrl ?>/service/like/pid/<?php echo $this->pid ?>/oid/' + oid;
		var newCount = parseInt($(this).attr('count'))+1
		var _this = this	
		$.getJSON(url,null,function(data, textStatus) {
			
			if( $(_this).hasClass('fbPostLikesCounter') )
				$(_this).parent().children('div.ReplyDrop').children('a.arrow').html( newCount )
			else if( $(_this).hasClass('fbCommentLikesCounter') )
				$(_this).html( "Like (" + newCount + ")" )
			$(_this).attr('count', newCount )
			/*
			var $likes = $(".fbObject[oid=\"" + oid + "\"]").children('.likes:first')
			if( $likes.attr('count') == "0" )
			{
				if( $likes.attr('numberOnly') == "true" )
					$likes.html( parseInt($likes.attr('count'))+1 + " likes.")
				else
					$likes.append(myFbName)
				$likes.show('slow')
			}
			else
			{
				if( $likes.attr('numberOnly') == "true" )
					$likes.html( parseInt($likes.attr('count'))+1 + " likes.")
				else
					$likes.append(", " + myFbName)
				
			}
			$likes.attr('count', parseInt($likes.attr('count'))+1 )	
			*/
			$(_this).attr("liked", "true")
			
			
		});
		
	})
	
	$.fn.pushTwitterMessageRow = function(oid, commenterId, message, newOid)
	{

		context = this
		// OK, so we have a message. Who is it from?
	//	$("LI.smsMsg").each( $(this).removeClass('latestMsg') );
		newNode = $(".twitterMyCommentTemplate:first").clone();

		// Toggle as a blank response
		$(newNode).removeClass('grey-comment');
		$(newNode).removeClass('blue-response');

		//$(newNode).addClass('latestMsg');

		// Choose the response, from me, or from someone else
		if(commenterId == myid)
			$(newNode).addClass('grey-comment');
		else
			$(newNode).addClass('blue-response');

		$('.facebookPhoto', newNode).attr('style', "background: url('" + myTwitterProfileImageUrl + "') !important;")
		$(newNode).hide();
		$(".commentArea", newNode ).html( message );	
		//TODO populate new nodes like attr with new oid - deferrd cos not commonly used
		$(context).append(newNode);
		$(newNode).fadeIn('slow');

	}
	
	$("#commentButtonSend").bind('click', function() {
		
		
		var oid = $(this).attr("oid")
		var folder = $(this).attr("folder")
		var message = $("textarea[name=reply]").attr("value");
		var url = '<?php echo $this->moduleBaseUrl ?>/service/post/pid/<?php echo $this->pid ?>/oid/' + oid ;
		
		var _this = this	
		$.getJSON(url,{"message":message, "folder":folder},function(data, textStatus) {
			
			$('.postComments').pushTwitterMessageRow( oid, myTwitterId, message,data['id_str']);

			
		});
		
		
	})
});
</script>

<div id="facebook_wrapper">
	<div class="message">
		<div class="message_outer">
			<div class="message_inner">

				<div class="details">


					<div class="fbmeta">
						<div class="button">
							<a href="#" class="fbLikeButton retweetsCounter" pid="<?php echo $this->pid ?>" oid="<?php echo $this->thread['id_str'] ?>" retweet_count="<?php echo ($this->thread['retweet_count']>0?$this->thread['retweet_count']:'0') ?>"><strong><img style="padding-top: 4px;" alt="Likes" src="<?php echo $this->siteBaseUrl ?>images/extensions/icon-like-fb.png" /></strong></a>
							<div class="ReplyDrop"><a class="arrow"><?php //echo $this->thread['likes']['count'] ?></a></div>
						</div>
					</div><!-- End Meta -->

					<div class="fbtop">
						<span class="facebookPhotoLarge floatLeft" title="<?php echo $this->thread['user']['screen_name'] ?>" style="background: url('<?php echo $this->thread['user']['profile_image_url'] ?>') transparent !important;"></span> 
						<h1><?php echo $this->thread['user']['screen_name'] ?></h1>
						<h2 class="timestamp"><?php echo timeago( strtotime($this->thread['created_at']) ) ?> ago</h2>
					</div><!-- End FbTop -->


				</div><!-- End Details -->

				<div class="body">
					<p><?php echo $this->thread['text']?></p>
				</div>

				<div id="comments">
					<div id="container">

						<ol class="comments">
							<div class="coments">
									<br />
									<ol class="postComments">
										<li class="grey-comment twitterMyCommentTemplate" style="display:none;">
											<ul class="meta">
												<li class="image"> <span class="photo" title="" style=""> </span> </li>
											</ul>
											<div class="message-bubble">
												<div class="white-bg-sms-top"></div>
												<div class="white-bg-sms commentArea" style="width: 290px;">
												</div>
												<div class="white-bg-sms-bottom"></div>
											</div>
											<div class="grey-comment-bottom"></div>
										</li>

						<?php 	if( !empty($this->thread['comments']) && $this->thread['comments']['count'] > 0 ) : ?>
						<?php 		foreach( $this->thread['comments']['data'] as $r ) : ?>
										<li class="vm blue-comment" pid="<?php echo $this->thread['pid'] ?>" oid="<?php echo $r['id'] ?>">
											<ul class="meta">
												<li class="image"> <span class="facebookPhoto" title="<?php echo $r['from']['name'] ?>" style="background: url('<?php echo "https://graph.facebook.com/" . $r['from']['id'] . "/picture" ?>') !important;"> </span> </li>
											</ul>
											<div class="message-bubble">
												<div class="player_container">
													<ul class="ui-widget ui-helper-clearfix">
														<li class="fbLikeButton fbCommentLikesCounter" pid="<?php echo $this->pid ?>" oid="<?php echo $r['id'] ?>" liked="false" count="<?php echo $r['likes']>0?$r['likes']:'0' ?>">Like
															<?php 		if( !empty($r['likes']) && $r['likes'] > 0 ) : ?>
																(<?php echo $r['likes'] ?>)
															<?php 		endif ?>
														</li>
													</ul>
												</div>
												<div class="white-bg-voicemail-top"></div>
												<div class="white-bg-voicemail"> <span> <?php echo $r['message']?> <br/>
													<abbr class="tstamp" style="float:left;" title="<?php echo $r['created_time'] ?>"></abbr>
													<?php if( !empty($r['application']) ) echo "from " . $r['application']['name'] ?>
												</span> </div>
												<div class="white-bg-voicemail-bottom"></div>
											</div>
											<div class="blue-comment-bottom"></div>

										</li>
						<?php 		endforeach ?>
						<?php 	endif ?>
									</ol>
							</div>




							<ol class="comments" id='reply'>
								<li class="grey-comment">
									<ul class="meta">
										<li class="image-reply"><span id="commentButtonSend" title="Comment" oid="<?php echo $this->thread['id'] ?>" folder="<?php echo $this->thread['folder'] ?>">Twitter</span></li>
									</ul>
									<div class="message-bubble">
										<div class="white-bg-sms-top"></div>
										<div class="white-bg-sms" style="width: 290px;">
											<textarea style="width: 300px; padding: 0px 10px 10px; height: 30px; display: block; overflow: hidden; border: none; background: transparent;" id="resize-demo" name="reply"></textarea>
											<input type='hidden' name='oid' value="<?php echo $this->thread['id'] ?>"/>
										</div>
										<div class="white-bg-sms-bottom"></div>
									</div>
									<div class="grey-comment-bottom"></div>
								</li>
							</ol>
						</ol>
					</div>
				</div><!-- End Comments -->


			</div>
		</div>
	</div>
</div>

<pre style='display:none'>
	<?php //echo print_r($this->thread) ?>
</pre>