<?php echo $this->Html->css(array('lightbox.min')); ?>
<?php echo $this->Html->script(array('site_js/common','site_js/lightbox-plus-jquery.min')); ?>
<?php echo $this->Html->script(array('site_js/common')); ?>
<?php 
echo $this->Html->script(array('site_js/wall'));
echo $this->Html->script('jstz.min');
?>
<?php $ww_root=$this->webroot;?>
<style>

#loading-image {
	width: 55px;
	height: 55px;
	position: fixed;
	top: 25%;
	right: 50%;
	z-index: 1;

}
</style>
<div id="loading-image" style="display: none;">
	<?php echo $this->Html->image('loading.gif',array('alt'=>'Loading......'));?>
</div>
<script type="text/javascript">
var path='<?php echo $ww_root;?>';
	function remove_cfrm(vals){
	    $("#commentForm"+vals).empty();
	    $("#commentForm"+vals).hide();
	
	}

	function getForm(vals){
		
		var psl=$("#commentwid"+vals).val();
		var comment=$("#comment"+vals).val();
		$.ajax({
	        type: "POST",
	        url: path+"wallcomments/addcomment",
	        data: {psl:psl,comment:comment}, 
	        success: function(data)
	        {
	        	
	        	$("#newcomment"+vals).prepend(data);
	        	$("#commentForm"+vals).empty();
	        	$("#commentForm"+vals).hide();
	        	
	        	var total_like=$("#btnCommentcnt"+vals).html();
	        	var comment=parseInt(total_like);
	        	var tcomment = parseInt(comment + 1);
	        	$("#btnCommentcnt"+vals).html(tcomment);

	        	
	        }
	      });
	 return false;
		
	}

	function remove_file(id) {
		$("#commentForm").css("display","none");

	}

	$("#asd").click(function(){
	    $("#commentForm").css("display","none");
	});

	function displayFrom(){
		$.ajax({
				url:path+"walls/wallload",
				type:"post",
				async: false,
				data: {
					"display":1
				},
				success:function(d) {
						$("#display_area").html(d);
					}
			})
	    }

	var interval = undefined;
	$( document ).ready(function(){
				
	 	$('#WallLnk').bind('paste', function(e) {
			var txt = e.originalEvent.clipboardData.getData('Text');
			var typ = $("#WallType").val();
		    var n = txt.indexOf("youtube.com");
            if(typ==4){
            	if(n==-1){
    		   	 	document.getElementById("WallLnk").innerHTML = "";
    		   	 	return false;
    		    }
            }
            if(typ==3){
            	if(n!=-1){
    		   	 	document.getElementById("WallLnk").innerHTML = "";
    		   	 	return false;
    		    }
            }
         
			$('#loading-image').show();
			$.ajax({
			   type: 'POST',
			   url: 'walls/pth',
			   data: {ajaxParam:txt,ajaxTyp:typ}, 
			   success: function(data) {
				   $('#loading-image').hide();
				   //alert(data);
					$("#imgs").html(data);
					var img = $(".slideshow img:first").attr('src');
					var video_img = $(".previewImgVdo").attr('src');
					if(img){
						$("#WallImglink").val(img);
					}else{
						$("#WallImglink").val(video_img);
					}
					$("#pastelink").html(txt);
			     	$("#uplink").show();
			     	
			  	}       
			});
		});
	 	 //interval = setInterval(getNext, 5000); // milliseconds
	 	 
	});

	// for play video
	function _vd(val,id) {
		$("#vdoImg_" + id ).remove();
		$("#Ytvd_" +id).html("<iframe src='https://www.youtube.com/embed/"+ val +"?autoplay=1' width='400' height='300'  frameborder='0' allowfullscreen></iframe>");
		
	}
</script>



<script type="text/javascript">
        function validate(file) {
        	var oFile = $('#WallImage')[0].files[0].size;
        	if (oFile> 10000 * 2048) {
           		$('.error')
           				.html(
           						'Maximum allowed file size is 20 MB.')
           				.show();
           		        $('#WallImage').val('');
           		return;
           	}
        	$('.error').html('');
    	    var ext = file.split(".");
    	    ext = ext[ext.length-1].toLowerCase();      
    	    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    	    if (arrayExtensions.lastIndexOf(ext) == -1) {
    	        alert("Wrong extension type. Only below file types that can be uploaded: jpg, jpeg, png, bmp, gif");
    	        $("#WallImage").val("");
    	    }
    	}

        function validate2(file) {
        	
           var oFile = $('#WallImage2')[0].files[0].size;

           if (oFile> 10000 * 2048) {
       		$('.error')
       				.html(
       						'Maximum allowed file size is 20 MB.')
       				.show();
       		        $('#WallImage2').val('');
       		return;
       	}
           $('.error').html('');
    	    var ext = file.split(".");
    	    ext = ext[ext.length-1].toLowerCase();      
    	    var arrayExtensions = ["docx" , "docm", "dotx", "dotm", "xlsx","xlsm" , "xltx", "xltm", "xlsb", "xlam","pptx" , "pptm", "potx", "potm", "ppam","ppsx" , "ppsm", "doc", "ppt", "pdf","odt" , "gif", "jpeg", "avi", "txt","tiff" , "jpg", "bmp", "rtf", "png","csv" , "xls", "html", "mp3", "zip","pps"];

    	    if (arrayExtensions.lastIndexOf(ext) == -1) {
    	        alert("Wrong extension type. Only below file types that can be uploaded: docx , docm, dotx, dotm, xlsx,xlsm , xltx, xltm, xlsb, xlam,pptx , pptm, potx, potm, ppam,ppsx , ppsm, doc, ppt, pdf,odt , gif, jpeg, avi, txt,tiff , jpg, bmp, rtf, png,csv , xls, html, mp3, zip,pps");
    	        $("#WallImage2").val("");
    	    }
    	}
        $(document).ready(function(){
            $("").click(function (){
              $("").toggleClass("");  
            });
        }); 
        </script>
        
        
        
        
<script type="text/javascript">
var timezone;

var tz = jstz.determine(); // Determines the time zone of the browser client
timezone = tz.name(); //'Asia/Kolhata' for Indian Time.

</script>

<style>
/*s-style*/
#sf{width: 90%;display: inline-block;}
#upfile,
#upimage,
#uplink{display: none;}
.error{color: red;}

/*style*/
#imgs{padding: 10px;}
.previewImgVdo{display: block;margin-top: 10px;}
#prev,#next{border: 0;padding: 0px 10px; background: #e4e4e4;}

.slideshow {
    position: relative;
    width: 100%;
    height: 135px;
}
.slideshow img {
    /*position: absolute;*/
    display: none;
	max-height: 130px;
	margin: 3px auto;
}
.slideshow img:first-child {
    display: block;
    /* overrides the previous style */
}
.blocktitle{
	width: 100%;
	float: none;
}
</style>


<!--Start Form -->
<div class="blocktitle"> Slate </div>
<div class="w99p pdl10">
	<div class="walls form userForm">
	<?php  echo $this->Form->create('Wall',array('type'=>'file')); ?>
	<fieldset>
		
		<?php echo $this->Form->hidden('id'); ?>
		<?php echo $this->Form->input('content',array('label'=>false,'rows'=>'3','cols'=>'30','placeholder'=>'Write your content here...','required','style'=>'resize:vertical; width:100%;')); ?>
		<div class="row-fluid">
			<div class="fl mrb5 btn-group w70p  gicon">
				<div class="btn btn-mini" onclick="h('1','a');" id='a' title="Attach"><i class="fa fa-paperclip fa-2x"></i></div>
				<div class="btn btn-mini" onclick="s('2','p');" id='p' title="Photo"><i class="fa fa-camera fa-2x"></i></div>
				<div class="btn btn-mini" onclick="s('3','l');" id='l' title="Link"><i class="fa fa-chain fa-2x"></i></div>
				<div class="btn btn-mini" onclick="s('4','v');" id='v' title="Video"><i class="fa fa-youtube-play fa-2x"></i></div>
			</div>
			
	<div class="fr insubmitmt0"> 
		<input onchange="fileSelectHandler()" class="btn btn-mini" type="submit" value="Post"> 
	</div>
			<div class="cb"></div>
			
			<!-- image-file-->
			<div style="display: none;" id="P">
				<?php echo $this->Form->input('image',array('type'=>'file','label'=>false,'onchange'=>"validate(this.value)")); ?>
				<div id="upimage">
					
				</div>
				<div class="error"></div>
			</div>
			
			<!-- attachment-file -->
			<div style="display: none;" id="F">
				<?php echo $this->Form->input('image2',array('type'=>'file','label'=>false,'onchange'=>"validate2(this.value)")); ?>
<!--				<div id="upfile">
					<div class="brd pd2 pdb0 pdt4 mrb5">
						<div class="row-fluid">
							<div class="span9"><div id="sf"></div></div>
							<div class="span3 tar pdr5"><i class="fa fa-times" onclick="removeThis('upfile','F');"></i></div>
						</div>
					</div>
				</div>-->
				
				<div class="error"></div>
			</div>
			<div style="display: none;" id="L" >
					<?php 
						if('<input id="WallType" type="hidden" value="3" name="data[Wall][type]">'){
							$placeholder='Add youtube video';
						}
					?>
				<?php echo $this->Form->input('lnk',array('type'=>'text','label'=>false,'placeholder'=>$placeholder)); ?>
				<?php echo $this->Form->hidden('imglink',array('type'=>'text','value'=>'')); ?>
			</div>
			<?php echo $this->Form->hidden('type',array('value'=>'')); ?>
		</div>
	</fieldset>
	
	<div id="uplink">
		<div class="brd pd2 mrb5">
			<div class="row-fluid">
				<div class="span11">
					<div id="imgs">
						<!-- link feedback shows here -->
					</div>
				</div>
				<div class="span1 tar pdr5"><i class="fa fa-times" onclick="removeThis('uplink','L');"></i></div>
			</div>
		</div>
		
	</div> 

	<?php echo $this->Form->end(); ?>
</div>

<div class="divline2 mrt0"></div>
<!--End Form -->


<!--Start  HTML APPEND VARIABLE Comment Form -->

<div id="aCommentForm" style="display: none;" class="cancel" >
	<?php //echo $this->Form->create('Wallcomment',array('controller'=>'wallcomments','action'=>'add')); ?>
	<fieldset>
		<?php
			echo $this->Form->hidden('wall_id',array('type'=>'text','id'=>'commentwid'.'VAR'));
			echo $this->Form->input('comment',array('label'=>false,'type'=>'textarea','rows'=>'2','id'=>'comment'.'VAR','style'=>'resize: vertical;'));
		?>
		<div style='float:right;'><input type="button" onclick="getForm(<?php echo 'VAR';?>)"  class="update_form btn btn-mini" value="Post"> </div>
		<div style="float:right;margin-right:2%;" class="btn btn-mini cancelcom" id="asd" onclick="remove_cfrm(<?php echo 'VAR';?>)">Cancel</div>
	</fieldset>
	<?php //echo $this->Form->end(); ?>
</div>	

<!--End  HTML APPEND VARIABLE Comment Form -->
<div class="row-fluid" >
	<div class="fnt80">
	
	<?php 
	
	$items_per_group = 5;
	$arr_wallList = sizeof($walllist);
	//pr($arr_wallList);

	$total_groups= ceil($arr_wallList/$items_per_group);


	
	?>
	<script type="text/javascript">
            $(document).ready(function() {
            var path='<?php echo $this->webroot?>';

                    var track_load = 0; //total loaded record group(s)
                    var loading  = false; //to prevents multipal ajax loads
                    var total_groups = '<?php echo $total_groups;?>'; //total record group(s)

                    $('#results').load(path+"walls/wallload", {'group_no':track_load,'timezone':timezone}, function() {track_load++;}); //load first group

                            $('.partA').bind('scroll', function()
                            {
                              if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
                              {

                                      if(track_load <= total_groups && loading==false) //there's more data to load
                                            {
                                                    //alert(track_load);	
                                                    loading = true; //prevent further ajax loading
                                                    $('.animation_image').show(); //show loading image

                                                    //load data from the server using a HTTP POST request
                                                    $.post(path+"walls/wallload",{'group_no': track_load,'timezone':timezone}, function(data){

                                                            $("#results").append(data); //append received data into the element

                                                            //hide loading image
                                                            $('.animation_image').hide(); //hide loading image once data is received

                                                            track_load++; //loaded group increment
                                                            loading = false; 

                                                    }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                                                            alert(thrownError); //alert with HTTP error
                                                            $('.animation_image').hide(); //hide loading image
                                                            loading = false;

                                                    });

                                            }
                              }
                     })



            });
        </script>
	
	<ol id="results">
	</ol>
<div class="animation_image" style="display:none" align="center"><img src="<?php echo $this->webroot;?>img/ajax-loader.gif"></div>
	
</div>
</div>
</div>




<?php echo $this->Html->script(array('jscroll/common','jscroll/jquery.jscroll.min','jscroll/jquery.sticky','jscroll/interface')); ?>