@section('content')
<div id="cover" class="jumbotron" style="background-image: url('/uploads/galleries/{{ $neighborhood->neighborhood_id }}/cover.jpg')">
	<div class="heading">
		<div class="container">
			<h1>{{ $neighborhood->tagline }}</h1>
		</div>
	</div>
	<div class="description">
	
	</div>
</div>

<div class="neighborhoods">
	<div id="neighborhood-nav" style="display:none">
		<ul class="nav">			
			<li><a href="#demographics">DEMOGRAPHICS</a></li>
			<li><a href="#vibes">VIBES</a></li>
			<li><a href="#photo-gallery">GALLERY</a></li>
			<li><a href="#events">EVENTS</a></li>
			<li><a href="#listings">LISTINGS</a></li>
		</ul>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-xs-2">
				<h2>{{ $neighborhood->name }}</h2>
			</div>
			<div class="col-xs-10">
				<p>{{ $neighborhood->description }}</p>
				
				<div class="buttons">
					<a href="{{ URL::to('events', array($neighborhood->alias)) }}" class="btn btn-green">{{ $neighborhood->name }} Events</a>
					<a href="{{ URL::to('apartments', array($neighborhood->alias)) }}" class="btn btn-blue">{{ $neighborhood->name }} Apartments</a>
					<a href="{{ URL::to('questions', array($neighborhood->alias)) }}" class="btn btn-red">{{ $neighborhood->name }} Q&amp;A</a>
				</div>
			</div>
			
		</div>
	</div>	
	<div class="demographics" id="demographics">
		<div class="container">
			<h3>Demographics</h3>
			
			<div class="statistics row">
				<div class="rates col-xs-6">
					<div class="rate">
						<h4 class="pull-left">Rental Rates</h4>
						<div class="scale">
							<div class="progress progress-striped">
			  					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ $rent_percent }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $rent_percent }}%">
			    					<span class="sr-only">{{ $rent_percent }}% Complete (success)</span>
			  					</div>
							</div>
							<div class="scale-left pull-left"><div class="horline"></div> ${{ number_format($rent_min_price) }}</div>
							<div class="scale-current" style="left: {{ $rent_percent }}%"><div class="horline"></div> <div class="text">${{ number_format($neighborhood->rental) }}</div></div>
							<div class="scale-right pull-right"><div class="horline"></div> ${{ number_format($rent_max_price) }}</div>
						</div>
					</div>
				</div>
				<div class="rates col-xs-6">
					<div class="rate">
						<h4 class="pull-left">Event Tickets</h4>
						<div class="scale">
							<div class="progress progress-striped">
			  					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ $ticket_percent }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $ticket_percent }}%">
			    					<span class="sr-only">{{ $ticket_percent }}% Complete (success)</span>
			  					</div>
							</div>
							<div class="scale-left pull-left"><div class="horline"></div> ${{ number_format($ticket_min_price) }}</div>
							<div class="scale-current" style="left: {{ $ticket_percent }}%"><div class="horline"></div> <div class="text">${{ number_format($neighborhood->events) }}</div></div>
							<div class="scale-right pull-right"><div class="horline"></div> ${{ number_format($ticket_max_price) }}</div>
						</div>
					</div>
				</div>
				
				<div class="item col-xs-6">
					<h4>Demographics</h4>
					<p class="clearfix">Total Population <b>{{ number_format($neighborhood->population_total) }}</b></p>
					<p class="clearfix">Male Population <b>{{ number_format($neighborhood->population_male) }}</b></p>
					<p class="clearfix">Female Population <b>{{ number_format($neighborhood->population_female) }}</b></p>
					<p class="clearfix">Median Age (years old) <b>{{ number_format($neighborhood->age_median) }}</b></p>
					<p class="clearfix">Average Income <b>${{ number_format($neighborhood->income_average) }}</b></p>
					<p class="clearfix">Median Income <b>${{ number_format($neighborhood->income_median) }}</b></p>				
				</div>
				<div class="item col-xs-6">
					<h4>Household Income</h4>		
					<div id="incomes" class="chart"><span class="loading">loading...</span></div>					
				</div>
				<div class="item col-xs-6 charts">
					<h4>Marital Status</h4>					
					<div id="marital-status" class="chart"><span class="loading">loading...</span></div>
				</div>
				<div class="item col-xs-6">
					<h4>Education</h4>	
					<div id="education" class="chart"><span class="loading">loading...</span></div>				
				</div>	
				<div class="clearfix"></div>
				<div class="rates full col-xs-12">
					<div class="rate">
						<h4 class="pull-left">Crime Rate</h4>
						<div class="scale">
							<div class="progress progress-striped">
			  					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ $neighborhood->crime }}" aria-valuemin="0" aria-valuemax="10" style="width: {{ $neighborhood->crime*10 }}%">
			    					<span class="sr-only">{{ $neighborhood->crime }} / 10</span>
			  					</div>
							</div>
							<div class="scale-left pull-left"><div class="horline"></div> 0</div>
							<div class="scale-current" style="left: {{ $neighborhood->crime*10 }}%"><div class="horline"></div> <div class="text">{{ $neighborhood->crime }}</div></div>
							<div class="scale-right pull-right"><div class="horline"></div> 10</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
		
	<div class="vibes" id="vibes">
		<div class="container">
			<h3>Vibes</h3>
			
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus varius faucibus. Aenean suscipit faucibus tellus, eu ornare turpis iaculis posuere. Fusce fringilla dapibus risus, sed volutpat ligula auctor quis. Vivamus laoreet molestie enim non tincidunt. Mauris nec cursus odio.</p>
			
			<div class="vibes-content">
			@if($vibes)
				@foreach($vibes as $vibe)
				<div class="item scale">
					<div class="heading">{{ $vibe->name }}</div>
					<div class="progress">
	  					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ $vibe->percent }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $vibe->percent }}%">
	    					<span class="sr-only">{{ $vibe->percent }}% Complete (success)</span>
	  					</div>
					</div>
					<div class="scale-current" style="left: {{ $vibe->percent-1 }}%"><div class="text">{{ $vibe->percent }}%</div></div>
				</div>
				@endforeach
				<div class="item all"><a href="javascript:;" data-href="{{ URL::to('vibes/view', $neighborhood->neighborhood_id)}}" class="btn btn-blue popup">View all {{ $neighborhood->name }} Vibes</a></div>
			@endif
			</div>
			
			<a href="javascript:;" data-href="{{ URL::to('vibes/vote', $neighborhood->neighborhood_id) }}" class="btn btn-green btn-lg popup">VOTE NOW</a>
		</div>		
	</div>
		
	<div class="galleries" id="photo-gallery">
		<div class="container">
			<h3>Photo Gallery</h3>
			
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus varius faucibus. Aenean suscipit faucibus tellus, eu ornare turpis iaculis posuere. Fusce fringilla dapibus risus, sed volutpat ligula auctor quis. Vivamus laoreet molestie enim non tincidunt. Mauris nec cursus odio.</p>
		</div>
		
		<div id="ib-main-wrapper" class="ib-main-wrapper">               
			@if($gallery)
			 <div class="ib-main">
				@foreach($gallery as $row)

				<a href="javascript:;" title="{{ $row->title }}">
					<img src="{{ Image::url($row->file_name, $row->file_path, 'gallery') }}" data-largesrc="{{ Image::url($row->file_name, $row->file_path) }}" alt="{{ $row->title }}" />
					<span>{{ $row->title }}</span>
				</a>

				@endforeach
			</div>
			@else
			<strong>There are no gallery yet. Please check back later.</strong>
			@endif
		</div>
	</div>
	<div class="events" id="events">
		<div class="container">
			<h3>UPCOMING EVENTS</h3>			
			@if(! $events->isEmpty())	
			<a href="{{ URL::to('events', array($neighborhood->alias)) }}" class="btn green viewall">View All {{ $neighborhood->name }} Events &raquo;</a>	
				@foreach($events as $event)			
				<div class="item col-xs-4">
					<div class="inner clearfix">
						<div class="image">
							<a href="{{ Link::to('event', $event->event_id) }}"><img src="{{ Image::link($event->cover_image) }}" alt="{{ $event->title }}" /></a>
						</div>
						<div class="content">					
							<h4><a href="{{ Link::to('event', $event->event_id) }}">{{ Str::limit($event->title, 40) }}</a></h4>
							<div class="date">{{ date('M j - g:i A', strtotime($event->start_time)) }}</div>
							<div class="desc">{{ Str::limit($event->place_name, 32) }}</div>
							<a href="{{ Link::to('event', $event->event_id) }}" class="btn btn-details">Details</a>
						</div>
					</div>
				</div>
				@endforeach	
			@else
				No events on this neighborhood yet.
			@endif
		</div>
	</div>
	
	<div id="listings" class="rentals">
		<div class="container">
			<h3>LISTINGS</h3>
			@if(! $rentals->isEmpty())		
			<a href="{{ URL::to('apartments', array($neighborhood->alias)) }}" class="btn green viewall">View All {{ $neighborhood->name }} Listings &raquo;</a>
				@foreach($rentals as $rental)
				<div class="item col-xs-3">
					<div class="inner clearfix">
						<div class="image">
							<a href="{{ Link::to('apartment', $rental->rental_id) }}">
							@if($rental->pictures->count()>0)					
								<img src="{{ Image::url($rental->pictures->first()->file, '/listings/'.$rental->rental_id, 'gallery') }}" alt="{{ $rental->title }}" />
							@else
								<img src="{{ Image::url('nopic.png', 'galleries', 'gallery') }}" alt="{{ $rental->title }}" />
							@endif
							</a>
						</div>
						<div class="rental-body">					
							<a href="{{ Link::to('apartment', $rental->rental_id) }}">
								{{ $rental->address }}, {{ $rental->address2 }} <br />
								{{ $rental->beds }} Bedrooms, {{ $rental->baths }} Bathrooms
							</a>
							<div class="price">${{ number_format($rental->price) }} month</div>
						</div>
					</div>
				</div>
				@endforeach		
			@else
				No events on this neighborhood yet.
			@endif
		</div>
	</div>	
</div>

@endsection

@section('scripts')
{{ HTML::script('/js/neighborhoods.js') }}  
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawCharts);
	function drawCharts() {      
        var options = {
          is3D: true, fontSize: '12', fontName: 'Montserrat, ​sans-serif', 'width': '95%', 'height': '300px', backgroundColor: '#f8f8f8', padding: 0,
          chartArea: { left: 30, top: 0, width: "100%", height: "100%"}
        };
        
        var marital_data = google.visualization.arrayToDataTable([
				['Marital Status', 'Percent'],
                ['Never Married', {{ $neighborhood->never_married }}],
                ['Married', {{ $neighborhood->married }}],
                ['Separated', {{ $neighborhood->separated }}],
                ['Widowed', {{ $neighborhood->widowed }}],
                ['Divorced', {{ $neighborhood->divorced }}]
		]);
		
        var marital_chart = new google.visualization.PieChart(document.getElementById('marital-status'));
        marital_chart.draw(marital_data, options);

        var edu_data = google.visualization.arrayToDataTable([
				['Education', 'Percent'],
                ['No High School', {{ $neighborhood->edu_no_high }}],
                ['Some High School', {{ $neighborhood->edu_some_high }}],
                ['Some College', {{ $neighborhood->edu_some_college }}],
                ['Associated Degree', {{ $neighborhood->edu_assoc }}],
                ['Bachelors Degree', {{ $neighborhood->edu_bachelor }}],
                ['Graduate Degree', {{ $neighborhood->edu_graduate }}]
		]);
                                                  		
        var edu_chart = new google.visualization.PieChart(document.getElementById('education'));
        edu_chart.draw(edu_data, options);

        var data = google.visualization.arrayToDataTable([
			['Income', 'Average Income', 'Median Income'],
            ['Average and Median Income', {{ $neighborhood->income_average }}, {{ $neighborhood->income_median }}]                                                          
        ]);

        var options = {        	
            fontSize: '12', fontName: 'Montserrat, ​sans-serif', 'width': '95%', 'height': '300px', backgroundColor: '#f8f8f8', padding: 0,
            legend: {position: 'top'}, vAxis: {format: '$#,###', minValue: 80000}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('incomes'));
        chart.draw(data, options);                                                        
	}
</script>
{{ HTML::script('/js/plugins/jquery.easing.1.3.js') }} 
{{ HTML::script('/js/plugins/jquery.gallery.js') }} 

<script id="previewTmpl" type="text/x-jquery-tmpl">
	<div id="ib-img-preview" class="ib-preview">
		<div class="ib-top" style="display:none"><h3>{{ $neighborhood->name }}</h3></div>
    	<img src="${src}" alt="" class="ib-preview-img"/>
        <span class="ib-preview-descr" style="display:none;">${description}</span>
        <div class="ib-nav" style="display:none;">
        	<span class="ib-nav-prev">Previous</span>
            <span class="ib-nav-next">Next</span>
		</div>
        <span class="ib-close" style="display:none;">Close Preview</span>
        <div class="ib-loading-large" style="display:none;">Loading...</div>
	</div>		
</script>
@endsection