Added an image scroller for reports

.gitignore

@@ -2,3 +2,4 @@
 *~
 application/logs/*
 application/cache/*
+media/uploads/*

.htaccess

@@ -12,4 +12,4 @@ RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 
 # Rewrite all other URLs to index.php/URL
-RewriteRule .* index.php/$0 [PT,L]
+RewriteRule .* index.php/$0 [PT,L]

application/controllers/reports.php

@@ -90,6 +90,7 @@ public function view( $id = false )
 		$this->template->header->js->default_zoom = Kohana::config('settings.default_zoom');
 		$this->template->header->js->latitude = $incident->location->latitude;
 		$this->template->header->js->longitude = $incident->location->longitude;
+		$this->template->header->js->incident_photos = $incident_photo;
 	}
 
-} // End Main
+} // End Main

application/views/header.php

@@ -4,7 +4,9 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title><?php echo $site_name; ?></title>
 	<style media="all" type="text/css">@import "<?php echo url::base() ?>media/css/all.css";</style>
+	<style media="all" type="text/css">@import "<?php echo url::base() ?>media/css/photoslider.css";</style>
 	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="<?php echo url::base() ?>/media/css/ie6.css" media="screen"/><![endif]-->
+
 	<?php echo html::script('media/js/jquery'); ?>
 	<?php echo html::script('media/js/jquery.form'); ?>
 	<?php echo html::script('media/js/jquery.ui.min'); ?>
@@ -18,6 +20,7 @@
 		echo html::stylesheet('media/css/jquery-ui-themeroller');
 		echo $api_url . "\n";
 	}
+	echo html::script('media/js/photoslider.js');
 	?>
 	<script type="text/javascript" charset="utf-8">
 		<?php echo $js . "\n"; ?>

application/views/reports_view.php

@@ -79,10 +79,12 @@
 					<!-- start images -->
 					<div class="small-block images">
 						<h3>Images</h3>
+
 						<div class="block-bg">
 							<div class="block-top">
 								<div class="block-bottom">
-									<div class="gallery">
+									<div class="photoslider" id="default"></div>
+									<!--div class="gallery">
 										<div class="gal-nav">
 											<a class="btn-prev" href="#">PREV</a>
 											<div class="mask">
@@ -106,7 +108,7 @@
 										<div class="big-img">
 											<img src="<?php echo url::base() . 'media/img/'; ?>gal-big.gif" alt="" />
 										</div>
-									</div>
+									</div-->
 								</div>
 							</div>
 						</div>
@@ -196,4 +198,4 @@
 				</div>
 				<!-- end incident block <> start other report -->
 			</div>
-		</div>
+		</div>

application/views/reports_view_js.php

@@ -5,6 +5,19 @@
 		// Map JS
 		jQuery(function() {
 			var moved=false;
+
+			// Photoslider
+			photos = ["<?php echo join($incident_photos, '","'); ?> "];
+			FOTO.Slider.baseURL = "<?php echo url::base() . 'media/uploads/'; ?>";
+			FOTO.Slider.bucket = {  
+         		'default': {}  
+     		}; 
+     		for(var i = 0; i<photos.length; i++) {
+     			FOTO.Slider.bucket['default'][i] = {'main': photos[i], 
+     			                                    'thumb': photos[i].replace('.jpg', '_t.jpg')};
+     		}
+     		FOTO.Slider.reload('default');  
+			FOTO.Slider.preloadImages('default');  
 
 			// Now initialise the map
 			var options = {
@@ -89,4 +102,4 @@ function onFeatureUnselect(feature) {
 	            feature.popup.destroy();
 	            feature.popup = null;
 	        }						
-		});
+		});

media/css/all.css

@@ -686,7 +686,7 @@ form {
 }
 .gallery .gal-nav {
 	overflow:hidden;
-	width:100%;
+	width:98%;
 }
 .gallery .gal-nav a.btn-prev {
 	float:left;
@@ -911,4 +911,4 @@ form {
 }
 .alert_confirm .label{
 	margin-bottom:10px;
-}
+}

media/css/photoslider.css

@@ -0,0 +1,92 @@
+.photoslider {
+
+}
+
+.photoslider_nav {
+	position: relative;
+/*	border: solid black 1px; */
+	overflow: hidden;
+	height: 90px;
+	width: 96%;
+	margin: auto;
+}
+
+.photoslider_thumbBar {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	display: block;
+	margin: 5px;
+	margin-left: 30px;
+	padding: 0px;
+}
+
+.photoslider_thumb {
+	position: relative;
+	border: solid #ccc 0px;
+	width: 50px;
+	height: 50px;
+	float: left;
+	padding: 5px;
+	margin: 5px;
+	cursor: pointer;
+	display: inline;
+}
+
+.photoslider_clear {
+	clear: both;
+}
+
+.photoslider_main  {
+	position: relative;
+	overflow:hidden;
+	width:100%;
+	padding:10px 0 0;
+}
+
+.photoslider_main img {
+	position: relative;
+	border:1px solid #ccc;
+	display: block;
+	margin: auto;
+}
+
+.photoslider_caption {
+	font-weight: bold;
+	text-align: center;
+}
+
+.photoslider_control {
+	display: none;
+	text-align: center;
+	font-weight: bold;
+	padding-top: 10px;
+	margin: auto;
+	height: 30px;
+	width: 52px;
+}
+
+.photoslider_play, .photoslider_stop {
+	width: 18px;
+	height: 19px;
+	margin: auto;
+	padding: 3px;
+	cursor: pointer;
+	text-align: center;
+	border: solid #fff 1px;
+	float: left;
+}
+
+.photoslider_play {
+	background: url('/images/play_pause.gif') no-repeat 0px 0px;
+}
+
+.photoslider_stop {
+	background: url('/images/play_pause.gif') no-repeat -25px 0px;
+}
+
+.slideshow_disabled {
+	border-bottom: solid #919191 2px;
+}
+
+