showing galleries bahaviour change

apps/gallery/ajax/getAlbums.php

+<?
+require_once('../../../lib/base.php');
+
+if (!OC_User::IsLoggedIn()) {
+  echo json_encode(array('status' => 'error', 'message' => 'You need to log in'));
+  exit();
+}
+
+$a = array();
+$stmt = OC_DB::prepare('SELECT * FROM *PREFIX*gallery_albums WHERE uid_owner = ?');
+$result = $stmt->execute(array(OC_User::getUser()));
+
+while ($r = $result->fetchRow()) {
+  $album_name = $r['album_name'];
+  $stmt = OC_DB::prepare('SELECT * FROM *PREFIX*gallery_photos WHERE album_id = ?');
+  $tmp_res = $stmt->execute(array($r['album_id']));
+  $a[] = array('name' => $album_name, 'numOfItems' => min($tmp_res->numRows(), 10));
+}
+
+echo json_encode(array('status'=>'success', 'albums'=>$a));
+
+?>

apps/gallery/ajax/getCovers.php

 <?
-
 require_once('../../../lib/base.php');
 
-$album_name = $_GET['album'];
+function CroppedThumbnail($imgSrc,$thumbnail_width,$thumbnail_height, $tgtImg, $shift) { 
+    //getting the image dimensions
+    list($width_orig, $height_orig) = getimagesize($imgSrc); 
+    switch (strtolower(substr($imgSrc, strrpos($imgSrc, '.')+1))) {
+      case "jpeg":
+      case "jpg":
+      case "tiff":
+        $myImage = imagecreatefromjpeg($imgSrc);
+        break;
+      case "png":
+        $myImage = imagecreatefrompng($imgSrc);
+        break;
+      default:
+        exit();
+    }
+    $ratio_orig = $width_orig/$height_orig;
+    
+    if ($thumbnail_width/$thumbnail_height > $ratio_orig) {
+       $new_height = $thumbnail_width/$ratio_orig;
+       $new_width = $thumbnail_width;
+    } else {
+       $new_width = $thumbnail_height*$ratio_orig;
+       $new_height = $thumbnail_height;
+    }
+    
+    $x_mid = $new_width/2;  //horizontal middle
+    $y_mid = $new_height/2; //vertical middle
+    
+    $process = imagecreatetruecolor(round($new_width), round($new_height)); 
+
+    imagecopyresampled($process, $myImage, 0, 0, 0, 0, $new_width, $new_height, $width_orig, $height_orig);
+    imagecopyresampled($tgtImg, $process, $shift, 0, ($x_mid-($thumbnail_width/2)), ($y_mid-($thumbnail_height/2)), $thumbnail_width, $thumbnail_height, $thumbnail_width, $thumbnail_height);
+
+    imagedestroy($process);
+    imagedestroy($myImage);
+}
+
+// Check if we are a user
+if( !OC_User::isLoggedIn()){
+	echo json_encode( array( 'status' => 'error', 'data' => array( 'message' => 'You need to log in.')));
+	exit();
+}
+$box_size = 200;
+$album_name= $_GET['album_name'];
 
 $stmt = OC_DB::prepare('SELECT file_path FROM *PREFIX*gallery_photos,*PREFIX*gallery_albums WHERE *PREFIX*gallery_albums.uid_owner = ? AND album_name = ? AND *PREFIX*gallery_photos.album_id == *PREFIX*gallery_albums.album_id');
 $result = $stmt->execute(array(OC_User::getUser(), $album_name));
-$images = array();
-while ($i = $result->fetchRow()) {
-  $images[] = $i['file_path'];
+
+$numOfItems = min($result->numRows(),10);
+
+$targetImg = imagecreatetruecolor($numOfItems*$box_size, $box_size);
+$counter = 0;
+while (($i = $result->fetchRow()) && $counter < $numOfItems) {
+  $imagePath = OC::$CONFIG_DATADIRECTORY . $i['file_path'];
+  CroppedThumbnail($imagePath, $box_size, $box_size, $targetImg, $counter*$box_size);
+  $counter++;
 }
 
-echo json_encode(array('status' => 'success', 'imageCount' => $result->numRows(), 'images' => $images));
+header('Content-Type: image/png');
 
+imagepng($targetImg);
+imagedestroy($targetImg);
 ?>

apps/gallery/css/styles.css

@@ -2,7 +2,7 @@ div#gallery_list {
   margin: 90pt 20pt;
 }
 
-div.gallery_album_box {
+div#gallery_album_box {
   width: 200px;
   text-align: center;
   border: 0;
@@ -10,13 +10,14 @@ div.gallery_album_box {
   margin: 5pt;
 }
 
-div.gallery_album_box h1 {
+div#gallery_album_box h1 {
   font-size: 12pt;
   font-family: Arial;
 }
 
-img.gallery_album_cover {
-  width: 200px;
-  height: 200px;
+div#gallery_album_cover {
+  width: 199px;
+  height: 199px;
   border: solid 1px black;
 }
+

apps/gallery/js/album_cover.js

 var actual_cover;
-$('body').ready(function() {
-  $('div[class=gallery_album_box]').each(function(i, e) {
-      $.getJSON('ajax/getCovers.php', { album: $(e).children('h1:last').text() }, function(a) {
-        if (a.status == "success") {
-          e.ic = a.imageCount;
-          e.images = a.images;
-          if (e.ic > 0) {
-            $(e).find('img[class=gallery_album_cover]').attr('src', 'ajax/thumbnail.php?img=' + e.images[0]);
-            actual_cover = 0;
-          }
+$(document).ready(function() {
+  $.getJSON('ajax/getAlbums.php', function(r) {
+    if (r.status == 'success') {
+      for (var i in r.albums) {
+        var a = r.albums[i];
+        Albums.add(a.name, a.numOfItems);
       }
-      });
-  });
-  $('img[class=gallery_album_cover]').each(function(i, e) {
-    $(e).mousemove(function(a) {
-      if (e.parentNode.parentNode.ic!=0) {
-        var x = Math.min(Math.floor((a.clientX - this.offsetLeft)/(200/e.parentNode.parentNode.ic)), e.parentNode.parentNode.ic-1);
-        if (actual_cover != x) {
-          $(e).attr('src', 'ajax/thumbnail.php?img=' + e.parentNode.parentNode.images[x]);
-          actual_cover = x;
+      var targetDiv = document.getElementById('gallery_list');
+      if (targetDiv) {
+        Albums.display(targetDiv);
+      } else {
+        alert('Error occured: no such layer `gallery_list`');
       }
+    } else {
+      alert('Error occured: ' + r.message);
     }
   });
 });
-});
 
 function createNewAlbum() {
   var name = prompt("album name", "");

apps/gallery/js/albums.js

+Albums={
+  // album item in this array should look as follow
+  // {name: string,
+  //  numOfCovers: int}
+  //
+  // previews array should be an array of base64 decoded images
+  // to display to user as preview picture when scrolling throught
+  // the album cover
+  albums:new Array(),
+  // add simply adds new album to internal structure
+  // however albums names must be unique so other
+  // album with the same name wont be insered,
+  // and false will be returned
+  // true on success
+  add: function(album_name, num) {
+    for (var a in Albums.albums) {
+      if (a.name == album_name) {
+        return false;
+      }
+    }
+    Albums.albums.push({name: album_name, numOfCovers: num});
+    return true;
+  },
+  // remove element with given name
+  // returns remove element or undefined if no such element was present
+  remove: function(name) {
+    var i = -1, tmp = 0;
+    for (var a in Albums.albums) {
+      if (a.name == name) {
+        i = tmp;
+        break;
+      }
+      tmp++;
+    }
+    if (i != -1) {
+      return Albums.albums.splice(i,1);
+    }
+    return undefined;
+  },
+  // return element which match given name
+  // of undefined if such element do not exist
+  find: function(name) {
+    var i = -1, tmp = 0;
+    for (var k in Albums.albums) {
+      var a = Albums.albums[k];
+      if (a.name == name) {
+        i = tmp;
+        break;
+      }
+      tmp++;
+    }
+    if (i != -1) {
+      return Albums.albums[i];
+    }
+    return undefined;
+  },
+  // displays gallery in linear representation
+  // on given element, and apply default styles for gallery
+  display: function(element) {
+    var displayTemplate = '<div id="gallery_album_box" title="*NAME*"><a href="?view=*NAME*"><div id="gallery_album_cover"></div></a><h1>*NAME*</h1></div></div>';
+    for (var i in Albums.albums) {
+      var a = Albums.albums[i];
+      var local = $(displayTemplate.replace(/\*NAME\*/g, a.name));
+      local.css('background-repeat', 'no-repeat');
+      local.css('background-position', '0 0');
+      local.css('background-image','url("ajax/getCovers.php?album_name='+a.name+'")');
+      local.mousemove(function(e) {
+        var albumMetadata = Albums.find(this.title);
+        if (albumMetadata == undefined) {
+          return;
+        }
+        var x = Math.min(Math.floor((e.clientX - this.offsetLeft)/(this.offsetWidth/albumMetadata.numOfCovers)), albumMetadata.numOfCovers-1);
+        x *= this.offsetWidth;
+        $(this).css('background-position', -x+'px 0');
+      });
+      $(element).append(local);
+    }
+  }
+
+}

apps/gallery/templates/index.php

 <?
 OC_Util::addStyle('gallery', 'styles');
+OC_Util::addScript('gallery', 'albums');
 OC_Util::addScript('gallery', 'album_cover');
 ?>
 
@@ -8,15 +9,4 @@ OC_Util::addScript('gallery', 'album_cover');
   <input type="button" value="Rescan" onclick="javascript:scanForAlbums();" /><br/>
 </div>
 <div id="gallery_list">
-<?
-require_once('base.php');
-foreach ($_['r'] as $r) {
-?>
-  <div class="gallery_album_box">
-    <a href="?view=<? echo $r['album_name']; ?>"><img class="gallery_album_cover"></a>
-    <h1><? echo $r['album_name']; ?></h1>
-  </div>
-<?
-}
-?>
 </div>