@extends('layout.basic_front')

@section("content")
<!--style>
        .post {
            height:570px;
            overflow:hidden;
        }
    /*@media screen and (max-width: 1400px)
    {
        .post {
            height:430px;
        }
    }
    @media screen and (max-width: 1400px)
    {
        .post {
            height:370px;
        }
    }*/
    .product {
        height:50%;
        overflow:hidden;
    }

    .pull-right {
        background-color: white;    
    }

    .pull-right li a{
        padding: 0px 10px 0px 10px;
    }
</style-->

<div class="col-xs-12 home_video">

	<video preload="auto" autoplay = "autoplay" loop="loop" id="pretzel-video" class="video-playing hidden-sm hidden-xs" style="min-width:100%;min-height:100%;position: relative;">
		<source src="{{ $home[0]->video }}" type="video/mp4">
		<source src="{{ $home[0]->video }}" type="video/webm">
	</video>
         <img class="hidden-lg hidden-md" src="http://i.huffpost.com/gen/1633005/images/o-FASHION-MODELS-facebook.jpg">
		<div class="home_video_text text-center">
        <img style="width:324px;position: relative;" src="{{asset($home[0]->logo_image)}}">
        </div>

</div>
<div id="anchor" class="col-md-12 look_container" style="background-color: rgb(249, 247, 241);margin-top:-150px;padding-top:50px;">

{{--	@include('slider')	--}}

{{--	<div class="col-md-10 col-md-offset-1">	--}}
		<div class="container">

		<div class="col-md-3 page_title hidden-xs hidden-sm" style="padding-right:50px;margin-bottom:50px;">
			<div class="col-xs-12" style="background-color:#fff;padding:20px;margin-bottom:15px;">
				<div class="col-md-12 home_tag">
                <h2 style="font-size:20px">
		@if(isset($_GET['cid']))
			{{$option[$_GET['cid']]}}
		@endif
		</h2>
                <h2 style="margin-top:-10px;font-size:20px;">LOOKNOW</h2>
				<hr>
					@foreach ($tags as $key=>$value)
		                <a  class="tag tags">#{{$key}}</a>
					@endforeach	
			</div>
		</div>
		@if ($home[0]->image1 != "")
            <a href="{{URL::to($home[0]->link1)}}" target="_blank">
                    {{ HTML::image($home[0]->image1,"",['class'=>"home_pic"]) }}
            </a>
		@endif
		@if ($home[0]->image2 != "")
            <a href="{{URL::to($home[0]->link2)}}" target="_blank">
                {{ HTML::image($home[0]->image2,"",['class'=>"home_pic"]) }}
            </a>
        @endif

		<div class="fb-page" data-href="https://www.facebook.com/LookNow-381813788673375/timeline/" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
			<div class="fb-xfbml-parse-ignore">
				<blockquote cite="https://www.facebook.com/LookNow-381813788673375/timeline/">
					<a href="https://www.facebook.com/gapure.official?ref=ts&amp;fref=ts">Gapure</a>
				</blockquote>
			</div>
		</div>
	</div>

{{--
    <div class="col-md-9" id="content">
		<div class="text_wave" style="margin:0px 0px 33px -10px;    width: 250px;">                
			<a href="#new" id="new">
				<img style="margin-right: 7px;" src="{{asset('images/icons/shine.png')}}">
					<span class="newpop">NEW</span>
			</a>
			<a style="margin-left:28px;" href="#popular" id="popular">
				<img style="margin-right: 7px;" src="{{asset('images/icons/icon_like_on.png')}}">
					<span class="newpop">HOT</span>
			</a>
		</div>
--}}
	<div class="col-sm-9">
		<div style="margin:0px 0px 33px -10px;    width: 160px;">
			<div class="btn-group btn-group-justified" role="group" aria-label="..." style="min-width:160px;">
				<div class="btn-group" role="group">
					<button type="button" class="btn btn-looknow unactive" id="new">最新</button>
				</div>

				<div class="btn-group" role="group">
					<button type="button" class="btn btn-looknow actived" id="popular">熱門</button>
				</div>
			</div>
		</div>	
				<div id="clean">
                    <div class="row" id="row" style="clear:both;">
                        @if(count($articles) > 0)
                        @foreach ($articles as $article)
                        
		                    <div class="window col-md-4">
        		                <div class="post">
									<div>	
                        		        <div class="col-xs-2 narrow">
                                			<a href="{{URL::to('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("Y/m/d",strtotime($article->created_at))}}
												</p>
                                    		</div>
                                		</div>

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

        			                </div>	
				 <div class="text-overflow">
                        		<a href="{{ URL::to('front/video/'.$article->id) }}">
									<span class="post_title">{{$article->title}}</span>
								</a>
				</div>
                            	<a href="{{ URL::to('front/video/'.$article->id) }}">
                        			<div class="screen">
										<div class="product">
											{{ HTML::image($article->img_path,"",['class'=>"media-object",'style'=>'width:100%;']) }}
											<img class="newest_post" src="{{asset('images/icons/new_bg.png')}}">
        		                    	</div>
            		                	<div class="cover">
                		            		<img  src="{{asset('images/icons/logo_white.png')}}" />
	                	    	        </div>
									</div>
								</a>
							</div>
                        </div>
					@endforeach
					@endif
	            </div>
            </div>
		</div>

		<div class="col-xs-12 text-center text_wave mores" style="margin-top:50px;">
			<a href="#more" id="more"><span>LOOK&nbsp;&nbsp;MORE</span></a>
		</div>

{{--		<div class="col-xs-12 text-center more">
			<a href="#more" id="more">
				<span class="more">LOOOK</span>
			</a>
		</div>--}}
	</div>
</div>
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){


@if(isset($_GET['tag']))
	$('.home_video').hide();
	$('#anchor').css('padding-top','200px');
@endif
@if(isset($_GET['cid']))
	$('.home_video').hide();
	$('#anchor').css('padding-top','200px');
@endif

	var From = 9;
	var popular = 1;
	var username = {{ json_encode($username) }};
	var userphoto = {{ json_encode($userphoto) }};
	var likearticle = {{ json_encode($likearticle) }};
	var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
	var articlelength = "{{ json_encode($articlelength) }}";
	if(articlelength <= From){
		$(".mores").hide();
	}

    // scroll screen
    $(".addlooknow").click(function(){
        $("body").animate({ scrollTop: $("#pretzel-video").height() - 100 }, 600);;
    });


	$("#more").click(function(){
		$.get("{{URL::to('front/append/1')}}", {from:From,popular:popular}, function(data){
			console.log(data);
			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('front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].created_at);
				var datess = dates.getFullYear()+'/'+ (dates.getMonth()+1) + '/' + dates.getDate();
//				var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
				var action = "oneAction('ARTICLE','"+data[i].id+"','LIKE','"+data[i].blogger_id+"');";
                var base_url = "{{ URL::to('/')}}";

                content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'">';
                content += '<img class="media-object img-circle" src='+base_url+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">';
                content += '<a class="like" onclick="oneAction(\'ARTICLE\',\''+ data[i].id +'\',\'LIKE\',\''+ data[i].blogger_id +'\');">';
                content += '<img class="like_btn" id="ARTICLE_'+ data[i].id +'" style="margin-bottom: 2px;" height="16" src=' + base_url+ '/images/icons/icon_like_off.png />';
                content += '<span id="like_'+data[i].id+'"class="like_count">'+like+'</span>';
                content += '</a></div></div><div class="text-overflow"><a href="'+articleurl+'"><span class="post_title">'+data[i].title+'</span></a></div><a href="'+articleurl+'"><div class="screen"><div class="product">';
                var path = base_url.concat(data[i].img_path);
                content += '<img src='+ path +' style="width:100%">';
                content += '</div><div class="cover"><img style="margin-top: 45%;" src="' +base_url+ '/images/icons/logo_white.png" /></div></div></a></div></div>';

                /*
				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:35px"></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="#like" onclick="'+action+'"><img id="ARTICLE_'+data[i].id+'" style="margin-bottom: 2px;" height="16" src="../images/icons/icon_like_off.png" /><span class="like_count" id="like_'+data[i].id+'">'+like+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+data[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen"><div class="product"><img src="../'+data[i].img_path+'" style="width:100%"><img class="newest_post" src="../images/icons/new_bg.png"></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 = ''+content+'';
			$("#clean .row").append(str);
//是否點like過
        $(".like_btn").each(function(){
                id = $(this).attr("id");
                islike(id);
        });
		popular = 0;

			if(data == "" || data.length < 9){
				$(".mores").hide();
			}
            screenHover();
            $('.fanpage').animate({bottom:'-190px',opacity:'0'},"fast");
		});
		From += 9;
	});

	$("#new").click(function(){
		From = 9;
		if(articlelength > From)
			$(".mores").show();

		$("#new").attr('class', 'btn btn-looknow actived');
		$("#popular").attr('class', 'btn btn-looknow unactive');
//是否點like過
        $(".like_btn").each(function(){
                id = $(this).attr("id");
                islike(id);
        });
		popular = 0;
		From = 9;
		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 action = "oneAction('ARTICLE','{{$article->id}}','LIKE','{{$article->blogger_id}}')";
				var lookerurl = "{{ URL::to('front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].created_at);
				var datess = dates.getFullYear()+'/'+ (dates.getMonth()+1) + '/' + dates.getDate();
			//	var datess = dates.getDate()+' '+(dates.getMonth()+1)+' '+dates.getFullYear();
                var base_url = "{{ URL::to('/')}}";
                content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'">';
                content += '<img class="media-object img-circle" src='+base_url+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" onclick='+action+'>';
                content += '<img class="like_btn" id="ARTICLE_'+ data[i].id +'" style="margin-bottom: 2px;" height="16" src=' + base_url+ '/images/icons/icon_like_off.png /><span class="like_count">'+like+'</span></a></div></div><div class="text-overflow"><a href="'+articleurl+'"><span class="post_title">'+data[i].title+'</span></a></div><a href="'+articleurl+'"><div class="screen"><div class="product">';
                
                var path = base_url.concat(data[i].img_path);
                content += '<img src='+ path +' style="width:100%">';
                //content += '<img src="../'+data[i].img_path+'" style="width:100%">';
                content += '</div><div class="cover"><img style="margin-top: 45%;" src="' +base_url+ '/images/icons/logo_white.png" /></div></div></a></div></div>';

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

	$("#popular").click(function(){
		From = 9;
		if(articlelength > From)
			$(".mores").show();
		$("#new").attr('class', 'btn btn-looknow unactive');
		$("#popular").attr('class', 'btn btn-looknow actived');
//是否點like過
        $(".like_btn").each(function(){
                id = $(this).attr("id");
                islike(id);
        });
		popular = 1;
		From = 9;
		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 action = "oneAction('ARTICLE','{{$article->id}}','LIKE','{{$article->blogger_id}}')";
				var lookerurl = "{{ URL::to('front/lookerinfo/') }}"+'/'+data[i].blogger_id;
				var likeurl = "{{URL::to('article/like/')}}"+'/'+data[i].id+'/'+data[i].blogger_id;
				var articleurl = "{{ URL::to('front/video/') }}"+'/'+data[i].id;
				var dates = new Date(data[i].created_at);
				var datess = dates.getFullYear()+'/'+ (dates.getMonth()+1) + '/' + dates.getDate();
                var base_url = "{{ URL::to('/')}}";

                content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'">';
                content += '<img class="media-object img-circle" src='+base_url+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" onclick='+action+'>';
                content += '<img class="like_btn" id="ARTICLE_'+ data[i].id +'" style="margin-bottom: 2px;" height="16" src=' + base_url+ '/images/icons/icon_like_off.png /><span class="like_count">'+like+'</span></a></div></div><div class="text-overflow"><a href="'+articleurl+'"><span class="post_title">'+data[i].title+'</span></a></div><a href="'+articleurl+'"><div class="screen"><div class="product">';
                var path = base_url.concat(data[i].img_path);
                content += '<img src='+ path +' style="width:100%">';
                //content += '<img src="../'+data[i].img_path+'" style="width:100%">';
                content += '</div><div class="cover"><img style="margin-top: 45%;" src="' +base_url+ '/images/icons/logo_white.png" /></div></div></a></div></div>';

/*
				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"><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);
        screenHover();
	});


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

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

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

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

//	$("#menu").css({'z-index':'100','background-color': 'rgba(255, 255,255,0)'});

});
</script>

<script>

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

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

$(function(){
		$(window).resize(function(){    
			video_height = $(window).height();
			video_text_left = ($('.home_video').width() - $('.home_video_text').width())/2;
            video_text_top = (video_height - $('.home_video_text').height())/2;

			$('.home_video').height(video_height);

			$('.home_video_text').css('left',video_text_left);
			$('.home_video_text').css('top',video_text_top);
			});
		$(document).ready(function(){           
			video_height = $(window).height();
			video_text_left = ($('.home_video').width() - $('.home_video_text').width())/2;
			video_text_top = (video_height - $('.home_video_text').height())/2;
//			video_text_left = ($('.home_video').width() -210)/2;
//			video_text_top = (video_height -243)/2;

			$('.home_video').height(video_height);

			$('.home_video_text').css('left',video_text_left);
			$('.home_video_text').css('top',video_text_top);
			});
});

{{--註解掉
@if(!(isset($_GET['tag']) || isset($_GET['cid'])))
$(function(){
		$(window).scroll(function(){ 
			mouse_scroll = $(window).scrollTop();
			window_height = $('.home_video').height();

			if(mouse_scroll >=  window_height){
			$('.navbar-looknow').css('background-color','rgba(255, 255, 255, 1)');
			//$('.tag').text(mouse_scroll);
			}
			else {
			$('.navbar-looknow').css('background-color','rgba(255, 255, 255, 0)');
			}
			});
		//$('body').css('float','left');
		});
@endif
--}}

$(function(){
    $(window).resize(function(){    
        windows_size = window.innerWidth;
        if (windows_size < 992){
            $(".page_title").css("paddingRight","15px");
        }
    });
    $(document).ready(function(){           
        windows_size = window.innerWidth;
        if (windows_size < 992){
            $(".page_title").css("paddingRight","15px");
        }
    });
});


</script>
@stop