@extends('layouts.main')

@section('title')
{{$title}}
@stop
@section('description')
{{$desc}}
@stop

@section('content')

<div class="pageGallery">
	<div class="wrapper">		
		@for($i = 0; $i < $number_schema; $i++)
		<div class="row">
			<div class="col-sm-6">			
				<div class="col-sm-12 block empty"></div>
				<div class="col-sm-6 block empty"></div>
				<div class="col-sm-6 block empty">	</div>
			</div>
			<div class="col-sm-6 padding-exception block empty"></div>
			<div class="col-sm-6">
				<div class="col-sm-6 block empty"></div>
				<div class="col-sm-6 block empty"></div>
				<div class="col-sm-12 block empty"></div>
			</div>
			<div class="col-sm-6">
				<div class="col-sm-6">
					<div class="col-sm-12 block empty"></div>
					<div class="col-sm-12 block empty"></div>
				</div>
				<div class="col-sm-6">
					<div class="col-sm-12 padding-exception block empty"></div>
				</div>
			</div>
		</div>
		@endfor
	</div>		
</div>
<div class="clear"></div>
<script>
	$(document).ready(function(){
		
		var photos = [
			@foreach($photos as $p)
			{
				'url': "{{ $p['url'] }}",
				'full_url': "{{ $p['full-url'] }}",
				'title': "{{ $p['title'] }}",
				'desc': "{{ $p['desc'] }}",
			},
			@endforeach
		];		
	    
	    var counter = 0;  
	    for(var i = 0; i < photos.length; i++){
		    var description = (photos[i].title != '' || photos[i].desc != '') ? '<div class="description"><h4>'+photos[i].title+'</h4><p>'+photos[i].desc+'</p></div>' : '';
		    $('.block.empty:first').removeClass('empty').html('<a href="'+photos[i].full_url+'" class="img-container fancybox" data-fancybox-group="gallery title="'+photos[i].desc+'"><div class="photo"><img src="'+photos[i].url+'"/>'+description+'</div></a>');
	    }
	    
		$('.photo').hover( 
		    function(){
		    	$(this).find('.description').stop().animate({bottom:'0px'},'fast')
		    },
		    function(){
				$(this).find('.description').stop().animate({bottom:'-100px'},'fast')
	    	}
	    );
	    
	    $(window).trigger('resize');
	    
	});
</script>
@stop