@extends('layout.basic_front')

@section("content")
        <div class="container inline-content">
            <div class="row">
				@foreach ($homeslides as $slide)
	                <div class="col-md-4">
    	                <a href="#">{{ HTML::image($slide->image,"",['class'=>"img-responsive",'style'=>'width:300px;height:100px']) }}
						</a>
        	        </div>
				@endforeach
            </div>
        </div>
        <div class="container">
            <div class="col-md-4  page_title">
                <h2>FASHION</h2>
                <h2 style="margin-top:-10px">LOOKNOW</h2>
                <p style="margin-top:55px">
					@foreach ($tags as $key=>$value)
		                <a href="#"><span class="label label-danger tags">{{$key}}</span></a>
					@endforeach	
                </p>
                <div id="test">
					{{ HTML::image($home[0]->image1,"",['class'=>"img-responsive",'style'=>'margin-top:25px;width:300px']) }}
                </div>
				@if ($home[0]->image2 != "")
	                <div>
						{{ HTML::image($home[0]->image2,"",['class'=>"img-responsive",'style'=>'margin-top:25px;width:300px']) }}
        	        </div>
				@else
				@endif
            </div>
            <div class="col-md-8" id="content">
            	<div style="margin:30px 0px;">
                	<a href="#" id="new"><img src=" {{asset('images/icons/shine.png')}}">New</a>
                    <a style="margin-left:28px;" href="#" id="popular"><img src="{{asset('images/icons/icon_like_on.png')}}">Popular</a>
           		</div>
				<div id="clean">
               		<div class="row" id="row">
						@foreach ($articles as $article)
		                    <div class="window col-md-4">
        		                <div class="post">
									<div>	
                        		        <div class="col-xs-2 narrow">
                                			<a href="{{URL::to('admin/front/lookerinfo/'.$article->blogger_id)}}">
												{{ HTML::image($userphoto[$article->blogger_id],"",['class'=>"media-object img-circle",'style'=>'width:35px;height:35px']) }}
                			                </a>
                     	       			</div>

		                                <div class="col-xs-6 narrow">
        		                            <div style="margin-left:7px;">
                		                        <p class="looker_name media-heading">{{$username[$article->blogger_id]}}</p>
                        		                <p class="post_date">
                                					{{date("d M Y",strtotime($article->updated_at))}}
												</p>
                                    		</div>
                                		</div>

                                		<div class="col-xs-4 narrow">
		                                    <a class="like" onclick="oneAction('ARTICLE','{{$article->id}}','LIKE','{{$article->blogger_id}}');"  {{--"{{URL::to('admin/article/like/'.$article->id.'/'.$article->blogger_id)}}" --}}>
												<img id="ARTICLE_{{$article->id}}" style="margin-bottom: 2px;" height="16" src="{{asset('images/icons/icon_like_off.png')}}" onload="islike({{$article->id}})")/>
												<span class="like_count" id="like_{{$article->id}}">
													@if ( empty($likearticle[$article->id]) )  0
													@else {{ $likearticle[$article->id] }}
													@endif
												</span>
											</a>
		                                </div>

        			                </div>	
                        		<a href="{{ URL::to('admin/front/video/'.$article->id) }}">
									<h2 class="post_title">{{$article->title}}</h2>
								</a>
                            	<a href="{{ URL::to('admin/front/video/'.$article->id) }}">
                        			<div class="screen" style="height:300px">
										<div class="product">
											{{ HTML::image($article->img_path,"",['class'=>"media-object",'style'=>'width:100%']) }}
        		                    	</div>
            		                	<div class="cover">
                		            		<img style="margin-top: 45%;" src="{{asset('images/icons/logo_white.png')}}" />
	                	    	        </div>
									</div>
								</a>
							</div>
                        </div>
					@endforeach
	            </div>
            </div>

                <div class="col-xs-12 text-center more">
                    <a href="#" id="more" class=""><img style="margin-bottom: 11px;" src="{{asset('images/icons/eyes.png')}}" />
                        <span>多看看</span></a>
                </div>
        		<div class="container">
		            <hr>
        		</div>

<script type="text/javascript" charset="utf-8">
////////Ajax////////
/*
function islike(article_id){ 
	var elementId = "ARTICLE_" + article_id; 
	var user_id = "{{Session::get('userId')}}";
	var URLs = "{{URL::to('admin/front/islike')}}";
	$.get(URLs, {"article_id":article_id, "user_id":user_id}, function(likeOrNot){
		if(likeOrNot >0)
			document.getElementById(elementId).setAttribute("src","{{asset('images/icons/icon_like_on.png')}}");
	});
}
function oneAction(thisObject,object_id,action,blogger_id){
	var elementId = thisObject +'_' +object_id;
	var likeNum = '#like_' +object_id;
	var user_id = "{{Session::get('userId')}}";
	var URLs = "{{URL::to('admin/front/oneAction')}}";
	$.get(URLs, {"object":thisObject ,"object_id":object_id,"action":action, "user_id":user_id,"blogger_id":blogger_id}, function(showview){
		if(showview['show'] >0)
			$("#"+elementId).attr("src","{{asset('images/icons/icon_like_on.png')}}");
		else
			document.getElementById(elementId).setAttribute("src","{{asset('images/icons/icon_like_off.png')}}");
		$(likeNum).text(showview['num']);
	});
}
*/

/////////////

$(document).ready(function(){

	var From = 3;
	var popular = 1;
	var username = {{ json_encode($username) }};
	var userphoto = {{ json_encode($userphoto) }};
	var likearticle = {{ json_encode($likearticle) }};

	$("#more").click(function(){
		$.get('./append/1', {from:From,popular:popular}, function(data){
			console.log(data);
			if(data == ""){
				$("#more").hide();
				return;
			}
			var content = "";

			for(i=0 ; i<data.length ; i++){
				if(likearticle[data[i].id] == null)
					var like = 0;
				else
					var like = likearticle[data[i].id];

				var lookerurl = "{{ URL::to('admin/front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('admin/article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('admin/front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].updated_at);
				var datess = dates.getDate()+' '+(dates.getMonth()+1)+' '+dates.getFullYear();

				content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[data[i].blogger_id]+'" style="width:35px;height:35x"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[data[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="'+likeurl+'"><img style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count">'+like+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+data[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen" style="height:300px"><div class="product"><img src="../../'+data[i].img_path+'" style="width:100%"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

//				console.log(content);
			}
			var str = '<div class="row">'+content+'</div>';
			$("#clean").append(str);
		});
		From += 3;
	});

	$("#new").click(function(){
		$("#more").show();
		popular = 0;
		From = 3;
		var data = {{json_encode($articlesnew)}};
		var content = "";

		for(i=0 ; i<data.length ; i++){
			if(likearticle[data[i].id] == null)
				var like = 0;
			else	
				var like = likearticle[data[i].id];

				var lookerurl = "{{ URL::to('admin/front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('admin/article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('admin/front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].updated_at);
				var datess = dates.getDate()+' '+(dates.getMonth()+1)+' '+dates.getFullYear();

				content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[data[i].blogger_id]+'" style="width:35px;height:35x"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[data[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="'+likeurl+'"><img style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count">'+like+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+data[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen" style="height:300px"><div class="product"><img src="../../'+data[i].img_path+'" style="width:100%"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

		}
		
		var str = '<div class="row" id="row">'+content+'</div>';
		$("#clean").html("");
		$("#clean").html(str);
	});

	$("#popular").click(function(){
		$("#more").show();
		popular = 1;
		From = 3;
		var data = {{json_encode($articles)}};
		var content = "";

		for(i=0 ; i<data.length ; i++){
			if(likearticle[data[i].id] == null)
				var like = 0;
			else	
				var like = likearticle[data[i].id];

				var lookerurl = "{{ URL::to('admin/front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('admin/article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('admin/front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].updated_at);
				var datess = dates.getDate()+' '+(dates.getMonth()+1)+' '+dates.getFullYear();

				content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[data[i].blogger_id]+'" style="width:35px;height:35x"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[data[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="'+likeurl+'"><img style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count">'+like+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+data[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen" style="height:300px"><div class="product"><img src="../../'+data[i].img_path+'" style="width:100%"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

		}

		var str = '<div class="row" id="row">'+content+'</div>';
		$("#clean").html("");
		$("#clean").html(str);
	});


	$(".category").click(function(){
		var url = "{{URL::to('admin/front')}}";
		window.location = url + '/?cid=' + $(this).data('id');
	});

	$(".tags").click(function(){
		console.log($(this).html());
		var url = "{{URL::to('admin/front')}}";
		window.location = url + '/?tag=' + $(this).html();
	});

	$('.screen').mouseenter(function(){
		$(this).children('.cover').fadeIn("fast");
	});

	$('.screen').mouseleave(function(){
		$(this).children('.cover').fadeOut("fast");
	});

});
</script>

@stop

	
}

/////////////

$(document).ready(function(){

	var From = 3;
	var popular = 1;
	var username = {{ json_encode($username) }};
	var userphoto = {{ json_encode($userphoto) }};
	var likearticle = {{ json_encode($likearticle) }};

	$("#more").click(function(){
		$.get('./append/1', {from:From,popular:popular}, function(data){
			console.log(data);
			if(data == ""){
				$("#more").hide();
				return;
			}
			var content = "";

			for(i=0 ; i<data.length ; i++){
				if(likearticle[data[i].id] == null)
					var like = 0;
				else
					var like = likearticle[data[i].id];

				var lookerurl = "{{ URL::to('admin/front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('admin/article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('admin/front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].updated_at);
				var datess = dates.getDate()+' '+(dates.getMonth()+1)+' '+dates.getFullYear();

				content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[data[i].blogger_id]+'" style="width:35px;height:35x"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[data[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="'+likeurl+'"><img style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count">'+like+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+data[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen" style="height:300px"><div class="product"><img src="../../'+data[i].img_path+'" style="width:100%"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

//				console.log(content);
			}
			var str = '<div class="row">'+content+'</div>';
			$("#clean").append(str);
		});
		From += 3;
	});

	$("#new").click(function(){
		$("#more").show();
		popular = 0;
		From = 3;
		var data = {{json_encode($articlesnew)}};
		var content = "";

		for(i=0 ; i<data.length ; i++){
			if(likearticle[data[i].id] == null)
				var like = 0;
			else	
				var like = likearticle[data[i].id];

				var lookerurl = "{{ URL::to('admin/front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('admin/article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('admin/front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].updated_at);
				var datess = dates.getDate()+' '+(dates.getMonth()+1)+' '+dates.getFullYear();

				content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[data[i].blogger_id]+'" style="width:35px;height:35x"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[data[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="'+likeurl+'"><img style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count">'+like+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+data[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen" style="height:300px"><div class="product"><img src="../../'+data[i].img_path+'" style="width:100%"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

		}
		
		var str = '<div class="row" id="row">'+content+'</div>';
		$("#clean").html("");
		$("#clean").html(str);
	});

	$("#popular").click(function(){
		$("#more").show();
		popular = 1;
		From = 3;
		var data = {{json_encode($articles)}};
		var content = "";

		for(i=0 ; i<data.length ; i++){
			if(likearticle[data[i].id] == null)
				var like = 0;
			else	
				var like = likearticle[data[i].id];

				var lookerurl = "{{ URL::to('admin/front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('admin/article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('admin/front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].updated_at);
				var datess = dates.getDate()+' '+(dates.getMonth()+1)+' '+dates.getFullYear();

				content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[data[i].blogger_id]+'" style="width:35px;height:35x"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[data[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="'+likeurl+'"><img style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count">'+like+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+data[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen" style="height:300px"><div class="product"><img src="../../'+data[i].img_path+'" style="width:100%"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

		}

		var str = '<div class="row" id="row">'+content+'</div>';
		$("#clean").html("");
		$("#clean").html(str);
	});


	$(".category").click(function(){
		var url = "{{URL::to('admin/front')}}";
		window.location = url + '/?cid=' + $(this).data('id');
	});

	$(".tags").click(function(){
		console.log($(this).html());
		var url = "{{URL::to('admin/front')}}";
		window.location = url + '/?tag=' + $(this).html();
	});

	$('.screen').mouseenter(function(){
		$(this).children('.cover').fadeIn("fast");
	});

	$('.screen').mouseleave(function(){
		$(this).children('.cover').fadeOut("fast");
	});

});
</script>

@stop