now new albums and images are sorted by created date and are on the top. also modified loading new images

app/assets/javascripts/gallery.js

@@ -34,15 +34,19 @@ $(function () {
 $(function() {
 	var $container = $('.gallery'),
 		$containerData = $container.data();
+	$container.data("order-edit","0");
+	$container.sortable({
+		 disabled: true
+	});
 	$container.imagesLoaded(function(){
 		var $albumname = $('.albumname'),
 			$img = $('.rgalbum img');
 		$('.rgalbum > a').rsImg();
 		if($containerData.galleryId == 'gallery') {
-			$container.masonry({
-				itemSelector : '.rgalbum',
-				isAnimated: true,
-			});
+			// $container.masonry({
+			// 	itemSelector : '.rgalbum',
+			// 	isAnimated: true,
+			// });
 			$albumname.each(function(i) {
 				var $albumblock = $(this).closest('a').height(),
 					$H = $(this).outerHeight(true);
@@ -65,12 +69,7 @@ $(function() {
 				};
 			});
 			$('#orbit_gallery').delegate('.icons-tag', clickEvent, function(){
-				$(this).parents('.gallery_info').nextAll('.albumtag').slideToggle(300, function() {
-					$container.masonry({
-						itemSelector : '.rgalbum',
-						isAnimated: true,
-					});
-				});
+				$(this).parents('.gallery_info').nextAll('.albumtag').slideToggle(300);
 			});
 		};
 	});
@@ -215,19 +214,58 @@ $(function() {
 		$('.rgalbum').removeClass('active');
 		$('.deletephoto, .deselect, .addtags').removeClass('hide')
 	});
+	var images_order = [];
+	$("#edit-order-btn").on("click",function(){
+		var el = $(this);
+		if($container.data("order-edit") == "0"){
+			$container.sortable("enable");
+			$(".order-edit-notification").slideDown();
+			images_order = $container.sortable( "toArray", { attribute: "data-image-id" });
+			$container.data("order-edit","1");
+			el.text("Save Order");
+		}else{
+			var temp = $container.sortable( "toArray", { attribute: "data-image-id" }),
+				type = $container.attr("id");
+			if(images_order.toString() != temp.toString()){
+				$.ajax({
+					url : "/admin/galleries/order",
+					data : {"imageids" : temp, "type" : type},
+					type : "post",
+					dataType : "json"
+				})
+			}
+			$(".order-edit-notification").slideUp();
+			$container.sortable("disable");
+			$container.data("order-edit","0");
+			el.text("Edit Order");
+		}
+		return false;
+	})
 
     // 
+
+    var last_image_id = null;
 	$('.add-imgs').on({
 		click: function() {
 			$('#fileupload').slideToggle(300, function() {
 				if(!$(this).is(':hidden')) {
 					$('.add-imgs').html('<i class="icons-cross-2"></i> Close panel');
 					$('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300);
+					$("#edit-order-btn").hide();
+					$.ajax({
+						url : "/admin/galleries/last_image_id",
+						data : {"albumid" : $("#fileupload_aid").val()},
+						dataType : "json",
+						type : "get"
+					}).done(function(d){
+						last_image_id = d.last_image_id;
+					})
 				} else {
 					$('.add-imgs').html('<i class="icons-plus"></i> Add Image');
 					$('.files').empty()
 					$('#file-list').checkListLength();
 					$('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300);
+					$("#edit-order-btn").show();
 					fetchNewImages();
 				};
 			});
@@ -235,20 +273,19 @@ $(function() {
 		}
 	});
 	var fetchNewImages = function(){
-		var lastid = ( $("li.rgalbum:last").length ? $("li.rgalbum:last").data("image-id") : null),
-			albumid = $("#fileupload_aid").val();
+		var albumid = $("#fileupload_aid").val();
 			
 		$.getJSON('/admin/galleries/get_photoData_json?id='+albumid, function(json, textStatus) {
 			photosData = json;
 		});
 
 		$.ajax({
-			url : "/admin/new_images",
-			data : {"last_image_id" : lastid, "album_id" : albumid},
+			url : "/admin/galleries/new_images",
+			data : {"last_image_id" : last_image_id, "album_id" : albumid},
 			success : function(data){
 				var $e = $(data);
 				$imgs = $e.find("img");
-				$("#imgholder").append($e);
+				$("#imgholder").prepend($e);
 				$os = $e.find("a.open");
 				$os.pageslide({
 					loadComplete: function(instance,elem) {

app/assets/javascripts/galleryAPI.js.erb

@@ -17,7 +17,7 @@ var galleryAPI = function(){
 	this.loadTheater = function(id){
 		
 		g.loadstart();
-		var imageArray;
+		var imageArray = [];
 		var imagecount = 0;
 		var picHeight = 0;
 		var bindHandlers = function(){
@@ -255,8 +255,9 @@ var galleryAPI = function(){
 		
 		var preparestage = function(albumid){
 			$.getJSON("../galleries/"+albumid+"/imgs",function(album){
-				imageArray = eval(album.images);
+				// imageArray = eval(album.images);
 				$.each(album.images,function(i,image){
+					imageArray.push(image)
 					if(image._id == id)
 						imagecount = i;
 				})

app/assets/javascripts/theater.js

@@ -0,0 +1,444 @@
+var GalleryTheater = function(){
+  var gt = this,
+      currentPic = {},
+      windowHeight = 0,
+      windowWidth = 0,
+      swipeController = null,
+      resizing = null;
+      loadingInterval = null,
+      mainPicLoading = 0,
+      nextPicLoading = 0,
+      prevPicLoading = 0,
+      currentSwipeImageDom = null,
+      currentSwipeImageDomLeftPos = 0,
+      windowScreenThresholdForTouch = 0,
+      loadingProcess = 0;
+      gt.stage = null;
+      gt.stripNextBtn = null;
+      gt.stripPrevBtn = null;
+      gt.thumbToggle = null;
+      gt.descriptionToggle = null;
+      gt.closeBtn = null;
+      gt.imageContainer = null;
+      gt.albumData = {};
+      gt.loader = null;
+      gt.thumbStrip = null;
+      gt.descriptionArea = null;
+      gt.isTheaterInitialized = false;
+
+  var initialize = function(){
+    gt.stage = $("#gallery-theater-stage");
+    gt.closeBtn = gt.stage.find(".gallery-close");
+    gt.switchBtn = gt.stage.find(".gallery-theme-switch");
+    gt.imageContainer = gt.stage.find(".image-container");
+    gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
+    gt.thumbToggle = gt.stage.find(".gallery-thumb-toggle");
+    gt.loader = gt.stage.find(".gallery-loader");
+    gt.stripNextBtn = gt.stage.find(".gallery-thumb-next");
+    gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev");
+    gt.descriptionArea = gt.stage.find(".gallery-img-desc");
+    gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc");
+    windowScreenThresholdForTouch = windowWidth / 3;
+    startLoading();
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    bindHandler();
+    if(window.location.hash != "" && window.location.hash != "#"){
+      var id = window.location.hash.split("#")[1];
+      gt.createTheater("/xhr/galleries/theater/" + id);
+    }
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",gt.destroyTheater);
+
+    // handler to show theater
+    $("div[data-list=images] a").on("click",function(){
+      gt.createTheater($(this).attr("href"));
+      return false;
+    })
+
+     gt.switchBtn.on("click",gt.switchTheme);
+     gt.descriptionToggle.on("click", gt.toggleDescription)
+     gt.stripPrevBtn.on("click", gt.scrollStripRight);
+     gt.stripNextBtn.on("click", gt.scrollStripLeft);
+
+     if(Modernizr.touch){
+      gt.imageContainer.swipe({
+        swipe : function(event, direction, distance, duration, fingerCount){
+          if(direction == "left"){
+            gt.nextPic();
+          }else if(direction == "right"){
+            gt.previousPic();
+          }
+        }
+      })
+      gt.thumbToggle.swipe({
+        swipe : function(event, direction, distance, duration, fingerCount){
+          if(direction == "up"){
+            gt.thumbStrip.parent().addClass("show");
+            gt.thumbToggle.addClass("up");
+            gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
+          }else if(direction == "down"){
+            gt.thumbStrip.parent().removeClass("show");
+            gt.thumbToggle.removeClass("up");
+            gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
+          }
+        }
+      })
+     }
+
+     //handler for window resize
+     $(window).resize(function(){
+       clearTimeout(resizing);
+       resizing = setTimeout(doneResizing,1000);
+     })
+  }
+
+  var bindKeyHandlers = function(){
+    if(!Modernizr.touch){
+      $(document.body).on("click",".gal-active", gt.nextPic);
+      $(document.body).on("click",".gal-prev", gt.previousPic);
+      $(document.body).on("click",".gal-next", gt.nextPic);
+      $(document).on("keyup",function(e){
+        switch(e.keyCode){
+          case 39:
+            gt.nextPic();
+            break;
+          case 37:
+            gt.previousPic();
+            break;
+          case 27:
+            gt.destroyTheater();
+          break;
+        }
+       })
+    }
+  }
+
+
+  var doneResizing = function(){
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    setThumbNavs();
+  }
+
+  var unBindKeyHandlers = function(){
+    $(document).unbind("keyup");
+  }
+
+  gt.destroyTheater = function(){
+    gt.stage.hide();
+    $("body").removeClass("gallery-mode-on");
+    gt.imageContainer.empty()
+    unBindKeyHandlers();
+    window.location.hash = "";
+  }
+
+  gt.createTheater = function(link){
+    gt.stage.show();
+    $("body").addClass("gallery-mode-on");
+    bindKeyHandlers();
+    if(!gt.isTheaterInitialized){
+      $.ajax({
+        url : link,
+        dataType : "json",
+        type : "get"
+      }).done(function(data){
+        gt.albumData = data.data;
+        var cp =  gt.albumData.images.filter(function(x){return x._id == gt.albumData.image})[0];
+        currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
+        createThumbStrip();
+      })
+    }else{
+      var id = link.split("/")[4],
+          cp =  gt.albumData.images.filter(function(x){return x._id == id})[0];
+      currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
+      createThumbStrip();
+    }
+  }
+
+  gt.hasNextImage = function(){
+    return (currentPic.index + 1) <= (gt.albumData.images.length - 1);
+  }
+
+  gt.hasPreviousImage = function(){
+    return (currentPic.index > 0);
+  }
+
+  gt.nextPic = function(){
+    if(loadingProcess == 0){
+      if(gt.hasNextImage()){
+        startLoading();
+        currentPic.image = gt.albumData.images[currentPic.index + 1];
+        currentPic.index = currentPic.index + 1;
+        setMainPic("next");
+      }
+    }
+  }
+
+
+
+   gt.previousPic = function(){
+    if(loadingProcess == 0){
+      if(gt.hasPreviousImage()) {
+        startLoading();
+        currentPic.image = gt.albumData.images[currentPic.index - 1];
+        currentPic.index = currentPic.index - 1;
+        setMainPic("prev");
+      }
+    }
+   }
+
+   gt.scrollStripLeft = function(){
+      pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3);
+      maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1));
+      if(pixels_to_move < maximum_pixels){
+        pixels_to_move = maximum_pixels;
+      }
+      gt.thumbStrip.css("left",pixels_to_move + "px");
+   }
+
+    gt.scrollStripRight = function(){
+      pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
+      maximum_pixels = (windowWidth / 2);
+      if(pixels_to_move > maximum_pixels){
+        pixels_to_move = maximum_pixels;
+      }
+      gt.thumbStrip.css("left",pixels_to_move + "px");
+   }
+
+
+   gt.switchTheme = function(){
+     var themeWhiteKlass = "theme-white",
+          nightKlass = "fa fa-circle",
+          dayKlass = "fa fa-circle-o",
+          $body = $("body");
+
+      if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
+        gt.switchBtn
+          .addClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", dayKlass);
+
+        $body.addClass(themeWhiteKlass);
+
+      } else {
+        gt.switchBtn
+          .removeClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", nightKlass);
+
+        $body.removeClass(themeWhiteKlass);
+
+      }
+   }
+
+   gt.toggleDescription = function(){
+    $(this).toggleClass("active");
+     gt.descriptionArea.toggleClass("active");
+   }
+
+   var startLoading = function(){
+    loadingProcess = 1;
+    mainPicLoading = 0;
+    nextPicLoading = 0;
+    prevPicLoading = 0;
+    gt.loader.show();
+    loadingInterval = setInterval(stopLoading, 300);
+
+   }
+
+   var stopLoading = function(){
+    if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){
+      clearInterval(loadingInterval);
+      setTimeout(function(){
+        loadingProcess = 0;
+        gt.loader.hide();
+      },100)
+    }
+   }
+
+  var createThumbStrip = function(){
+    if(!gt.isTheaterInitialized){
+      $.each(gt.albumData.images,function(index, image){
+        var li = $("<li class='gallery-item'></li>"),
+            a = $("<a href=''></a>"),
+            img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
+          a.on("click",function(){ 
+            startLoading();
+            var old_index = currentPic.index;
+            currentPic.image = gt.albumData.images[index];
+            currentPic.index = index;
+            if(old_index > index){
+              setMainPic("prev",true);
+            }else if(old_index < index){
+              setMainPic("next",true);
+            }
+            return false;
+          })
+          
+          img.attr("src",image.file.thumb.url);
+          img.attr("alt",image.alt_title);
+          li.attr("data-index",index);
+          a.append(img);
+          li.append(a);
+          gt.thumbStrip.append(li);
+      })
+      setThumbNavs();
+    }
+    setMainPic();
+  }
+
+
+  var setThumbNavs = function() {
+    var $thumbNav = gt.stage.find('.gallery-thumb-navs'),
+        $thumb = gt.thumbStrip.find('img'),
+        thumbs = $thumb.length,
+        thumbWidth = $thumb.eq(0).width(),
+        thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
+        widthSum = (thumbWidth + thumbGap) * thumbs,
+        margin = widthSum * 0.1,
+        totalWidth = widthSum + margin;
+
+    if (windowWidth < totalWidth) {
+      $thumbNav.addClass('show');
+    }else{
+      $thumbNav.removeClass('show');
+    }
+  };
+
+  var setMainPic = function(direction,selectedFromStrip){
+    var img = null;
+    if(direction == null){
+      img = $("<img class='gallery-image gal-active'>");
+      img.hide();
+      img.attr("src", currentPic.image.file.theater.url);
+      gt.imageContainer.append(img);
+      img.one("load", function(){
+        calculateHeight(img);
+        mainPicLoading = 1;
+        img.fadeIn(100);
+      })
+      gt.isTheaterInitialized = true;
+    }else{
+      img =  gt.imageContainer.find(".gal-active");
+      if(selectedFromStrip){
+        gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);  
+      }
+      if(direction == "next"){
+        gt.imageContainer.find(".gal-prev").remove();
+        img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
+        gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
+        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px");
+      }else if(direction == "prev"){
+        gt.imageContainer.find(".gal-next").remove();
+        img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
+        gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
+        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px");
+      }
+      mainPicLoading = 1;
+    }
+    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+    if(currentPic.image.description == null){
+      gt.descriptionArea.addClass("hide");
+    }else{
+      gt.descriptionArea.removeClass("hide");
+    }
+    calculateHeight(gt.imageContainer.find(".gal-active"));
+    gt.thumbStrip.find("li.active").removeClass("active");
+    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+
+    setStripToCenter();
+    setNextPic();
+    setPrevPic();
+    changeUrl();
+  }
+
+  var calculateHeight = function(img){
+    var h = 0,
+        w = 0,
+        new_width = 0;
+    if(!Modernizr.touch){
+      if(typeof currentPic.image.height == "undefined"){
+        h = img.height();
+        currentPic.image.height = h;
+        w = img.width();
+        currentPic.image.width = w;
+      }else{
+        h = currentPic.image.height;
+        w = currentPic.image.width;
+      }
+    }else{
+      h = img.height();
+      w = img.width();
+    }
+    if(h > (windowHeight - 150)){
+      new_width = Math.round((windowHeight - 100) * w / h);
+      new_width = (new_width / windowWidth) * 100;
+      img.width(new_width + "%");
+    }else{
+      if(windowWidth < 770){
+        img.width("90%");
+      }else{
+        img.width("65%");
+      }
+    } 
+  }
+
+  var changeUrl = function(){
+    window.location.hash = currentPic.image._id
+  }
+
+  var setStripToCenter = function(){
+    left = (windowWidth / 2) - (66 * currentPic.index);
+    gt.thumbStrip.css("left",left + "px");
+  }
+
+  var setNextPic = function(){
+    gt.imageContainer.find(".gal-next.temp").remove()
+    if(gt.hasNextImage()) {
+      var obj = gt.albumData.images[currentPic.index + 1],
+          nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
+      nextImg.attr("src",obj.file.theater.url);
+      nextImg.hide();
+      gt.imageContainer.append(nextImg);
+      nextImg.on("load",function(){
+        calculateHeight(nextImg);
+        nextPicLoading = 1;
+        nextImg.fadeIn(100);
+      })
+    }else{
+      nextPicLoading = 1;
+    }
+  }
+
+  var setPrevPic = function(){
+    gt.imageContainer.find(".gal-prev.temp").remove()
+    if(gt.hasPreviousImage()) {
+      var obj = gt.albumData.images[currentPic.index - 1],
+          prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
+      prevImg.attr("src",obj.file.theater.url);
+      prevImg.hide();
+      gt.imageContainer.prepend(prevImg);
+      prevImg.on("load",function(){
+        calculateHeight(prevImg);
+        prevPicLoading = 1;
+        prevImg.fadeIn(100);
+      })
+    }else{
+      prevPicLoading = 1;
+    }
+  }
+
+  var l = function(x){
+    console.log(x)
+  }
+
+  $(document).ready(function(){
+    initialize();
+  })
+}
+
+// gallery-image gal-prev gal-inactive

app/assets/javascripts/theater_bak.js

@@ -0,0 +1,261 @@
+var GalleryTheater = function(){
+  var gt = this,
+      currentPic = {},
+      windowHeight = 0,
+      windowWidth = 0;
+      gt.stage = null;
+      gt.closeBtn = null;
+      gt.mainStageImage = null;
+      gt.prevStageImage = null;
+      gt.nextStageImage = null;
+      gt.albumData = {};
+      gt.thumbStrip = null;
+      gt.isTheaterInitialized = false;
+
+  var initialize = function(){
+    gt.stage = $("#gallery-theater-stage");
+    gt.closeBtn = gt.stage.find(".gallery-close");
+    gt.switchBtn = gt.stage.find(".gallery-theme-switch");
+    gt.mainStageImage = gt.stage.find(".gal-active");
+    gt.prevStageImage = gt.stage.find(".gal-prev");
+    gt.nextStageImage = gt.stage.find(".gal-next");
+    gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    bindHandler();
+    if(window.location.hash != "" && window.location.hash != "#"){
+      var id = window.location.hash.split("#")[1];
+      gt.createTheater("/xhr/galleries/theater/" + id);
+    }
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",function(){
+      gt.destroyTheater();
+    })
+
+    // handler to show theater
+    $("div[data-list=images] a").on("click",function(){
+      gt.createTheater($(this).attr("href"));
+      return false;
+    })
+
+    // handler to show next image
+     gt.nextStageImage.on("click",function(){
+      if($(this).attr("src") != "#"){
+        gt.nextPic();
+      }
+     })
+     // handler to show prev image
+     gt.prevStageImage.on("click",function(){
+      if($(this).attr("src") != "#"){
+        gt.previousPic();
+      }
+     })
+
+     // handler to go to next image on center image click
+     gt.mainStageImage.on("click",gt.nextPic);
+
+     gt.switchBtn.on("click", function() {
+      var themeWhiteKlass = "theme-white",
+          nightKlass = "fa fa-circle",
+          dayKlass = "fa fa-circle-o",
+          $body = $("body");
+
+      if (!$(this).hasClass(themeWhiteKlass)) {
+        $(this)
+          .addClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", dayKlass);
+
+        $body.addClass(themeWhiteKlass);
+
+      } else {
+        $(this)
+          .removeClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", nightKlass);
+
+        $body.removeClass(themeWhiteKlass);
+
+      }
+
+      });
+
+     //handler for window resize
+     $(window).resize(function(){
+       windowHeight = $(window).height();
+       windowWidth = $(window).width();
+     })
+  }
+
+  var bindKeyHandlers = function(){
+    $(document).on("keyup",function(e){
+      switch(e.keyCode){
+        case 39:
+          gt.nextPic();
+          break;
+        case 37:
+          gt.previousPic();
+          break;
+        case 27:
+          gt.destroyTheater();
+        break;
+      }
+     })
+  }
+
+  var unBindKeyHandlers = function(){
+    $(document).unbind("keypress");
+  }
+
+  gt.destroyTheater = function(){
+    gt.stage.hide();
+    $("body").removeClass("gallery-mode-on");
+    unBindKeyHandlers();
+    window.location.hash = "";
+  }
+
+  gt.createTheater = function(link){
+    gt.stage.show();
+    $("body").addClass("gallery-mode-on");
+    bindKeyHandlers();
+    if(!gt.isTheaterInitialized){
+      $.ajax({
+        url : link,
+        dataType : "json",
+        type : "get"
+      }).done(function(data){
+        gt.albumData = data.data;
+        var cp =  gt.albumData.images.filter(function(x){return x._id == gt.albumData.image})[0];
+        currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
+        createThumbStrip();
+      })
+    }else{
+      var id = link.split("/")[4],
+          cp =  gt.albumData.images.filter(function(x){return x._id == id})[0];
+      currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
+      createThumbStrip();
+    }
+  }
+
+  gt.nextPic = function(){
+    if((currentPic.index + 1) <= (gt.albumData.images.length - 1)){
+      currentPic.image = gt.albumData.images[currentPic.index + 1];
+      currentPic.index = currentPic.index + 1;
+      setMainPic();
+    }
+  }
+
+   gt.previousPic = function(){
+    if(currentPic.index > 0) {
+      currentPic.image = gt.albumData.images[currentPic.index - 1];
+      currentPic.index = currentPic.index - 1;
+      setMainPic();
+    }
+   }
+
+  var createThumbStrip = function(){
+    if(!gt.isTheaterInitialized){
+      $.each(gt.albumData.images,function(index, image){
+        var li = $("<li class='gallery-item'></li>"),
+            a = $("<a href=''></a>"),
+            img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
+          a.on("click",function(){ 
+            currentPic.image = gt.albumData.images[index];
+            currentPic.index = index;
+            setMainPic();
+            return false;
+          })
+          img.attr("src",image.file.thumb.url);
+          img.attr("alt",image.alt_title);
+          li.attr("data-index",index);
+          a.append(img);
+          li.append(a);
+          gt.thumbStrip.append(li);
+      })
+      gt.isTheaterInitialized = true;
+    }
+    setMainPic();
+  }
+
+  var setMainPic = function(){
+    var obj = currentPic.image;
+    gt.mainStageImage.fadeOut(100,function(){
+      gt.mainStageImage.attr("src",obj.file.theater.url);
+      gt.mainStageImage.attr("alt",obj.alt_title);
+      gt.mainStageImage.one("load",function(){
+        var h = 0,
+            w = 0,
+            new_width = 0;
+        if(typeof currentPic.image.height == "undefined"){
+          h = gt.mainStageImage.height();
+          currentPic.image.height = h;
+          w = gt.mainStageImage.width();
+          currentPic.image.width = w;
+        }else{
+          h = currentPic.image.height;
+          w = currentPic.image.width;
+        }
+        if(h > (windowHeight - 100)){
+          new_width = Math.round((windowHeight - 100) * w / h);
+          new_width = (new_width / windowWidth) * 100;
+          gt.mainStageImage.width(new_width + "%");
+        }else{
+          if(windowWidth < 770){
+           gt.mainStageImage.width("90%");
+          }else{
+            gt.mainStageImage.width("65%");
+          }
+        }
+        gt.mainStageImage.fadeIn(100);
+      })
+    });
+    gt.thumbStrip.find("li.active").removeClass("active");
+    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+    changeUrl();
+    setNextPic();
+    setPrevPic();
+  }
+
+  var changeUrl = function(){
+    window.location.hash = currentPic.image._id
+  }
+
+  var setNextPic = function(){
+    gt.nextStageImage.attr("src","#");
+    if((currentPic.index + 1) <= (gt.albumData.images.length - 1)) {
+      gt.nextStageImage.hide();
+      var obj = gt.albumData.images[currentPic.index + 1];
+      gt.nextStageImage.attr("src",obj.file.theater.url);
+      gt.nextStageImage.on("load",function(){
+        gt.nextStageImage.show();
+      });
+    }else{
+      gt.nextStageImage.hide();
+    }
+  }
+
+  var setPrevPic = function(){
+    gt.prevStageImage.attr("src","#");
+    if(currentPic.index > 0) {
+      gt.prevStageImage.hide();
+      var obj = gt.albumData.images[currentPic.index - 1];
+      gt.prevStageImage.attr("src",obj.file.theater.url);
+      gt.prevStageImage.on("load",function(){
+        gt.prevStageImage.show();
+      });
+    }else{
+      gt.prevStageImage.hide();
+    }
+  }
+
+  var l = function(x){
+    console.log(x)
+  }
+
+  $(document).ready(function(){
+    initialize();
+  })
+}

app/assets/stylesheets/gallery.css

@@ -4,10 +4,17 @@
 	list-style: none;
 }
 #orbit_gallery .rgalbum {
+		position: relative;
+	float: left;
 	margin: 5px;
-	padding: 10px;
+	padding: 5px;
 	width: 200px;
 	background: #FFFFFF;
+	overflow: hidden;
+	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	   -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+			box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+		 -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
 	-webkit-transition-property: left, right, top;
 	   -moz-transition-property: left, right, top;
 		-ms-transition-property: left, right, top;
@@ -519,3 +526,17 @@
 #fileupload #file-list .action-bnt {
 	text-align: right;
 }
+
+.order-edit-notification{
+	background-color: #ffffd5;
+	z-index: 10;
+    display: none;
+    height: 25px;
+    margin-left: 40%;
+    position: fixed;
+    text-align: center;
+    margin-top: 5px;
+    top: 85px;
+    width: 250px;
+    font-size: 13px;
+}

app/assets/stylesheets/theater.css

@@ -0,0 +1,457 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto);
+
+/* Reset and basic styles */
+
+body {
+  overflow-x: hidden;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+.gallery-mode-on {
+  /*overflow-y: hidden;*/
+}
+
+
+/* Gallery */
+
+#gallery-theater-stage {
+  display: none;
+}
+
+#gallery-theater-stage > .gallery {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #000;
+  z-index: 2000;
+}
+
+.gallery-loader {
+  padding: 10px;
+  position: absolute;
+  display: none;
+  left: 50%;
+  top: 10px;
+  -webkit-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+  border-radius: 2px;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, .6);
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.spinner {
+  margin: 0 auto;
+  width: 50px;
+  height: 20px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: #e8e8e8;
+  height: 100%;
+  width: 4px;
+  display: inline-block;
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    -webkit-transform: scaleY(0.4)
+  }
+  20% {
+    -webkit-transform: scaleY(1.0)
+  }
+}
+
+@keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
+
+.gallery-actions {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  cursor: pointer;
+  background: rgba(255, 255, 255, .7);
+  border-radius: 2px;
+  z-index: 2000;
+}
+
+.gallery-actions-btn {
+  padding: 8px 12px 8px 10px;
+  display: inline-block;
+}
+
+.gallery-actions-btn:hover {
+  color: #fff;
+}
+
+.touch .gallery-actions-btn {
+  padding: 12px 15px 12px 15px;
+}
+
+.gallery-toggle-desc.active {
+  color: #fff;
+}
+
+.gallery-theme-switch {
+  border-right: 1px solid rgba(255, 255, 255, .2);
+  border-left: 1px solid rgba(255, 255, 255, .2);
+}
+
+.gallery-close {
+  color: #000;
+}
+
+.touch .image-container {
+  height: 100%;
+  padding-bottom: 150px;
+  z-index: 800;
+}
+
+.gallery-image {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  width: 60%;
+  height: auto;
+  cursor: pointer;
+}
+
+.no-touch .gallery-image {
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.gal-prev {
+  display: none;
+  left: 0;
+  -webkit-transform: translate(-95%, -50%);
+  transform: translate(-95%, -50%);
+}
+
+.gal-prev:hover {
+  -webkit-transform: translate(-94%, -50%);
+  transform: translate(-94%, -50%);
+}
+
+.gal-next {
+  display: none;
+  left: auto;
+  right: 0;
+  -webkit-transform: translate(95%, -50%);
+  transform: translate(95%, -50%);
+}
+
+.gal-next:hover {
+  -webkit-transform: translate(94%, -50%);
+  transform: translate(94%, -50%);
+}
+
+.gal-inactive {
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  opacity: .3;
+}
+
+.gal-inactive:hover {
+  opacity: 1;
+}
+
+.gal-active {
+  display: none;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+
+/* Thumbnails */
+
+.gallery-thumb-toggle {
+  position: absolute;
+  bottom: -1000px;
+}
+
+.gallery-thumb-wrap {
+  overflow-y: hidden;
+  overflow-x: hidden;
+  list-style: none;
+  margin: 0 auto;
+  padding: 10px 0;
+  text-align: center;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.gallery-item {
+  margin-right: 1em;
+  display: inline-block;
+}
+
+.gallery-item.active {
+  border-radius: 2px;
+  border-radius: 0.125rem;
+  border: 5px solid #fff;
+}
+
+.gallery-thumb {
+  width: 50px;
+  height: 50px;
+  opacity: .5;
+  -webkit-transition: .3s opacity;
+  transition: .3s opacity;
+}
+
+.gallery-thumb:hover {
+  opacity: 1;
+}
+
+.gallery-thumb-container {
+  height: 80px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #1b1b1b;
+}
+
+.gallery-thumb-navs {
+  display: none;
+}
+
+.gallery-thumb-navs.show {
+  display: block;
+}
+
+.gallery-thumb-nav {
+  position: absolute;
+  cursor: pointer;
+  font-size: 1.4rem;
+  color: rgba(255, 255, 255, .7);
+  background: #222;
+  height: 80px;
+  line-height: 80px;
+  width: 50px;
+  text-align: center;
+  z-index: 900;
+}
+
+.gallery-thumb-nav:hover {
+  color: #fff;
+}
+
+.gallery-thumb-prev {
+  left: 0;
+}
+
+.gallery-thumb-next {
+  right: 0;
+}
+
+.active .gallery-thumb {
+  opacity: 1;
+}
+
+.gallery-img-desc {
+  color: #000;
+  line-height: 1.7;
+  padding: 1rem 1.5rem;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.8125rem;
+  position: fixed;
+  top: 4rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 2px;
+  width: 90%;
+  background-color: #bdbdbd;
+  opacity: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  z-index: 1000;
+}
+
+.gallery-img-desc p {
+  overflow: hidden;
+  height: 90px;
+}
+
+.gallery-img-desc:empty {
+  display: none;
+}
+
+.gallery-img-desc.active {
+  opacity: 1;
+}
+
+
+/* White theme */
+
+.theme-white #gallery-theater-stage > .gallery {
+  background-color: #fffdf7;
+}
+
+.theme-white .gallery-actions {
+  background-color: #eee;
+  border: 1px solid #ddd;
+}
+
+.theme-white .gallery-toggle-desc.active {
+  color: #ff4444;
+}
+
+.theme-white .gallery-theme-switch {
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+}
+
+.theme-white .gallery-thumb-toggle,
+.theme-white .gallery-thumb-toggle:before,
+.theme-white .gallery-thumb-toggle:after {
+  color: #777;
+  border-color: #aaa;
+}
+
+.theme-white .gallery-thumb-container {
+  background-color: #e2e2e2;
+  border-top: 1px solid #c7c7c7;
+}
+
+.theme-white .gallery-actions-btn {
+  color: #777;
+}
+
+.theme-white .gallery-actions-btn:hover {
+  color: #ff4444;
+}
+
+.theme-white .gallery-item.active {
+  border-color: #ff4444;
+}
+
+.theme-white .gallery-thumb-nav {
+  color: #777;
+  background-color: #eee;
+}
+
+.theme-white .gallery-thumb-prev {
+  border-right: 1px solid #c7c7c7;
+}
+
+.theme-white .gallery-thumb-next {
+  border-left: 1px solid #c7c7c7;
+}
+
+.theme-white .gallery-thumb-nav:hover {
+  color: #ff4444;
+}
+
+.theme-white .gallery-img-desc {
+  background-color: #eee;
+}
+
+.theme-white .gallery-loader {
+  background-color: #777;
+}
+
+.theme-white .spinner > div {
+  color: #ff4444;
+}
+
+@media screen and (max-width: 768px) {
+  .gal-prev {
+    -webkit-transform: translate(-101%, -50%);
+    transform: translate(-101%, -50%);
+  }
+  .gal-next {
+    -webkit-transform: translate(101%, -50%);
+    transform: translate(101%, -50%);
+  }
+  .gallery-thumb-toggle {
+    bottom: 50px;
+    left: 0;
+    color: #fff;
+    width: 100%;
+    text-align: center;
+    -webkit-transition: .1s all;
+    transition: .1s all;
+  }
+  .gallery-thumb-toggle.up {
+    bottom: 96px;
+  }
+  .gallery-thumb-toggle:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    margin: auto;
+    width: 38%;
+    border-top: 1px solid rgba(255, 255, 255, .2);
+    height: 1px;
+  }
+  .gallery-thumb-toggle:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 10%;
+    margin: auto;
+    width: 38%;
+    border-top: 1px solid rgba(255, 255, 255, .2);
+    height: 1px;
+  }
+  .gallery-thumb-container {
+    bottom: -1000px;
+    -webkit-transition: .1s all;
+    transition: .1s all;
+  }
+  .gallery-thumb-container.show {
+    bottom: 0;
+  }
+}

app/controllers/admin/galleries_controller.rb

@@ -4,13 +4,17 @@ class Admin::GalleriesController < OrbitAdminController
   before_action :log_user_action
   layout "back_end"
   def index
-    @albums = Album.all
+    @albums = Album.where(:order => -1).desc(:created_at)
+    albums = Album.where(:order.gt => -1).asc(:order)
+    @albums = @albums.concat(albums)
      @tags = @module_app.tags
   end
 
   def show
     @album = Album.find(params[:id])
-    @images = @album.album_images
+    @images = @album.album_images.where(:order => -1).desc(:created_at)
+    images = @album.album_images.where(:order.gt => -1).asc(:order)
+    @images = @images.concat(images)
     image_content = []
     @images.each do |image|
       image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
@@ -61,7 +65,9 @@ class Admin::GalleriesController < OrbitAdminController
 
   def get_photoData_json
     @album = Album.find(params[:id])
-    @images = @album.album_images
+     @images = @album.album_images.where(:order => -1).desc(:created_at)
+    images = @album.album_images.where(:order.gt => -1).asc(:order)
+     @images = @images.concat(images)
     image_content = []
     @images.each do |image|
       image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
@@ -127,7 +133,7 @@ class Admin::GalleriesController < OrbitAdminController
   def imgs
     @album = Album.find(params[:gallery_id])
     @tag_names = Array.new
-    @images = @album.album_images.all
+    @images = @album.album_images.asc(:order)
     @output =  Array.new
     @images.each do |values|
     @output << { _id:  values.id.to_s,
@@ -136,6 +142,7 @@ class Admin::GalleriesController < OrbitAdminController
                  title: values.title,
                  file: values.file.as_json[:file],
                  gallery_album_id: values.album_id,
+                 order: values.order,
                  tags: values.tags}
     end
       render :json=>{"images" => @output, "tags" => @album.tags}.to_json
@@ -157,17 +164,20 @@ class Admin::GalleriesController < OrbitAdminController
     render :json=>{"files"=>a}.to_json
   end
 
-  def new_images 
-
-    if params[:last_image_id] != ""
-      @lastimage = AlbumImage.find(params[:last_image_id])
-      @album = Album.find(params[:album_id])
-      @newimages = @album.album_images.where(:created_at.gt => @lastimage.created_at)
-    else
-      @album = Album.find(params[:album_id])
-      @newimages = @album.album_images
+  def last_image_id
+    album = Album.find(params[:albumid])
+    lastimage = album.album_images.last
+    render :json => {"last_image_id" => lastimage.id.to_s}.to_json
   end
 
+  def new_images 
+    @album = Album.find(params[:album_id])
+    if params[:last_image_id].present?
+      lastimage = AlbumImage.find(params[:last_image_id])
+      @newimages = @album.album_images.where(:created_at.gt => lastimage.created_at,:order => -1).desc(:created_at)
+    else
+      @newimages = @album.album_images.where(:order => -1).desc(:created_at)
+    end
     render :layout=>false
   end
 
@@ -183,11 +193,11 @@ class Admin::GalleriesController < OrbitAdminController
   end
 
   def update
-    @album = Album.find(params[:id])
+    album = Album.find(params[:id])
     tagsToDestroy = []
     tagsToAdd = []
     new_tags = params[:album][:tags] || []
-    old_tags = @album.tags.collect{|t| t.id.to_s}
+    old_tags = album.tags.collect{|t| t.id.to_s}
     old_tags.each do |tag|
        if !new_tags.include?(tag)
         tagsToDestroy << tag
@@ -200,16 +210,16 @@ class Admin::GalleriesController < OrbitAdminController
         end
       end
     end
-    update_children_image_tag(tagsToDestroy,tagsToAdd)
-    @album.update_attributes(album_params)
-    redirect_to "/admin/galleries/"+@album.id.to_s
+    update_children_image_tag(album,tagsToDestroy,tagsToAdd)
+    album.update_attributes(album_params)
+    redirect_to "/admin/galleries/"+album.id.to_s
   end
 
-  def update_children_image_tag(tagsToDestroy,tagsToAdd)
+  def update_children_image_tag(album,tagsToDestroy,tagsToAdd)
       # tagsToDestroy will contain  all tag ids which have to be deleted from the galley_images
       # tagsToAdd will contain all tag ids which ve to be added in tall album_images
-      @images = AlbumImage.all
-      @images.each do |image|
+      images = album.album_images
+      images.each do |image|
         image_tags = image.tags.collect{|t| t.id.to_s}
         tagsToAdd.each do |tag|
           image_tags << tag

app/controllers/admin/images_controller.rb

@@ -4,7 +4,31 @@ class Admin::ImagesController < OrbitAdminController
 		@image = AlbumImage.find(params[:id])
 		@albumid = @image.album_id
 		@album = Album.find(@albumid)
-		@images = @album.album_images.all
+		@images = @album.album_images.asc(:order)
+	end
+
+	def changeorder
+		type = params[:type]
+		if type == "imgholder"
+			images = params[:imageids]
+			images.each_with_index do |image, i|
+				img = AlbumImage.find(image) rescue nil
+				if !img.nil?
+					img.order = i
+					img.save 
+				end
+			end
+		elsif type == "orbit_gallery"
+			albums = params[:imageids]
+			albums.each_with_index do |albumid, i|
+				album = Album.find(albumid) rescue nil
+				if !album.nil?
+					album.order = i
+					album.save 
+				end
+			end
+		end
+    	render :json => {"success" => true}.to_json
   	end
 
 	def delete_photos

app/controllers/galleries_controller.rb

@@ -1,16 +1,12 @@
 class GalleriesController < ApplicationController
 	def index
-      # albums = Album.filter_by_categories
-
-      params = OrbitHelper.params
-
-      albums = Album.filter_by_categories([],false).filter_by_tags.sample(OrbitHelper.page_data_count)
-      albums = Kaminari.paginate_array(albums).page(params[:page]).per(OrbitHelper.page_data_count)
-      
+      albums = Album.filter_by_categories.filter_by_tags.asc(:order)
       galleries = albums.collect do |a|
+      alt_text = (a.description.nil? || a.description == "" ? "gallery image" : a.description)
       {
         "album-name" => a.name,
         "album-description" => a.description,
+        "alt_title" => alt_text,
         "link_to_show" =>  OrbitHelper.url_to_show(a.to_param),
         "thumb-src" => a.cover_path || "/assets/gallery/default.jpg"
       }
@@ -26,10 +22,12 @@ class GalleriesController < ApplicationController
   def show
     params = OrbitHelper.params
     album = Album.find_by_param(params[:uid])
-  	images = album.album_images.collect do |a|
+  	images = album.album_images.asc(:order).collect do |a|
+      alt_text = (a.description.nil? || a.description == "" ? "gallery image" : a.description)
 	    {
         "image-description" => a.description,
-	     "link_to_show" =>  "/" + I18n.locale.to_s + params[:url] + "/-" + a.id.to_s + "?method=theater",
+        "alt_title" => alt_text,
+	     "link_to_show" =>  "/xhr/galleries/theater/" + a.id.to_s,
 	     "thumb-src" => a.file.thumb.url
 	    }
 	   end
@@ -40,7 +38,8 @@ class GalleriesController < ApplicationController
   end
 
   def widget
-    albums = Album.filter_by_widget_categories
+    tags = OrbitHelper.widget_tags.empty? ? ["all"] : OrbitHelper.widget_tags
+    albums = Album.filter_by_widget_categories.filter_by_tags(tags)
     params = OrbitHelper.params
     counts = OrbitHelper.widget_data_count
     
@@ -50,8 +49,10 @@ class GalleriesController < ApplicationController
       albums.each do |album|
         total_images = total_images + album.album_images.count
       end
-      total_images = counts > 9 ? 9 : counts
-      while images.count < counts and images.count < AlbumImage.count
+      counts = counts > total_images ? total_images : counts
+      abc = AlbumImage.count
+      counts = counts > abc ? abc : counts
+      while images.count < counts
         albums.each do |album|
           img = album.album_images.sample
           if !images.include?(img) && img != nil 
@@ -61,9 +62,15 @@ class GalleriesController < ApplicationController
       end
     end
     images = images.collect do |a|
+      alt_text = (a.description.nil? || a.description == "" ? "gallery image" : a.description)
+
       {
-        "link_to_show" =>  OrbitHelper.widget_more_url + "/-" + a.id.to_s + "?method=theater",
-        "thumb-src" => a.file.thumb.url
+        "link_to_show" =>  OrbitHelper.widget_more_url + "/" + a.album.to_param + "#" + a.id.to_s,
+        "alt_title" => alt_text,
+        "thumb-src" => a.file.thumb.url,
+        "thumb-large-src" => a.file.thumb_large.url,
+        "mobile-src" => a.file.mobile.url,
+        "theater-src" => a.file.theater.url
       }
     end
     {
@@ -75,12 +82,14 @@ class GalleriesController < ApplicationController
   def imgs(album_id)
     album = Album.find(album_id)
     tag_names = Array.new
-    images = album.album_images.all
+    images = album.album_images.asc(:order)
     output =  Array.new
     images.each do |values|
+    alt_text = (values.description.nil? || values.description == "" ? "gallery image" : values.description)
     output << { _id:  values.id.to_s,
                  description: values.description,
                  title: values.title,
+                 alt_title: alt_text,
                  file: values.file.as_json[:file],
                  gallery_album_id: values.album_id,
                  tags: values.tags}
@@ -89,17 +98,18 @@ class GalleriesController < ApplicationController
   end
 
   def theater
-    params = OrbitHelper.params
-    image = AlbumImage.find(params[:uid])
+    image = AlbumImage.find(params[:id])
     albumid = image.album_id
     album = Album.find(albumid)
-    images = album.album_images.all
-   {
+    images = album.album_images.asc(:order)
+     data = {
       "album" => album,
-    "images" => images,
-    "image" => image,
-    "wall_images" => imgs(albumid),
-    "back_to_albums" => OrbitHelper.url_to_show(album.to_param)
+      # "images" => images,
+      "image" => image.id.to_s,
+      "images" => imgs(albumid)
      }
+
+   render :json => {"data" => data}.to_json
  end
+
 end

app/models/album.rb

@@ -13,6 +13,7 @@ class Album
   field :tag_names
   field :uid, type: String
   field :rss2_id, type: String
+  field :order, type: Integer, default: -1
 
 	# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
   has_many :album_images, :autosave => true, :dependent => :destroy

app/models/album_image.rb

@@ -1,3 +1,4 @@
+require 'net/http'
 class AlbumImage
   include Mongoid::Document
   include Mongoid::Timestamps
@@ -8,6 +9,7 @@ class AlbumImage
 	field :title
 	field :description, localize: true
 	field :rss2_id, type: String
+	field :order, type: Integer, default: -1
 
 	# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
 

app/uploaders/gallery_uploader.rb

@@ -32,6 +32,11 @@ class GalleryUploader < CarrierWave::Uploader::Base
     "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
   end
 
+  def fix_exif_rotation 
+    manipulate! do |img|
+      img.tap(&:auto_orient)
+    end
+  end
   # Provide a default URL as a default if there hasn't been a file uploaded:
   # def default_url
   #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
@@ -50,14 +55,22 @@ class GalleryUploader < CarrierWave::Uploader::Base
   # end
   
   version :thumb do
-    process :resize_to_limit => [200, nil]
+    process :fix_exif_rotation
+    process :resize_to_fill => [200, 200]
+  end
+
+  version :thumb_large do
+    process :fix_exif_rotation
+    process :resize_to_fill => [600, 600]
   end
 
   version :theater do
+    process :fix_exif_rotation
     process :resize_to_limit => [1920, 1080]
   end
 
   version :mobile do
+    process :fix_exif_rotation
     process :resize_to_limit => [1152, 768]
   end
 

app/views/admin/galleries/_album.html.erb

@@ -1,4 +1,4 @@
-<li class="rgalbum">
+<li class="rgalbum" data-image-id="<%= album.id %>">
   <a href="<%= admin_gallery_path(album.id) %>">
     <% if album.cover == "default" %>
      <%= image_tag "gallery/default.jpg" %>

app/views/admin/galleries/index.html.erb

@@ -1,14 +1,26 @@
-<ul id="orbit_gallery" class="gallery" data-gallery-id="gallery">
+	<div class="order-edit-notification">Albums re-ordering enabled.</div>
+
+<div class="rgbody">
+	<ul id="orbit_gallery" class="gallery clearfix" data-gallery-id="gallery">
 	  <% @albums.each do |album| %>
 	    <%= render :partial => "album", :object => album %>
 	  <% end %>
 	</ul>
+</div>
+<div class="bottomnav clearfix">
+  <div class="action pull-right">
+    <% if can_edit_or_delete?(nil) %>
+      <a href="#" class="btn btn-small btn-info order-btn-class" id="edit-order-btn">Edit Order</a>
+    <% end %>
+  </div>
+</div>
 
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "gallery" %>
 <% end %>
 
 <% content_for :page_specific_javascript do %>
+ <%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %>
   <%= javascript_include_tag "jquery.masonry.min.js" %>
   <%= javascript_include_tag "jquery.lite.image.resize.js" %>
   <%= javascript_include_tag "gallery" %>

app/views/admin/galleries/show.html.erb

@@ -1,6 +1,7 @@
-
+<% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "gallery" %>
   <%= stylesheet_link_tag "lib/tags-groups" %>
+<% end %>
 <!-- <div class="topnav clearfix">
   <ul class="breadcrumb text-info pull-left">
     <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml">Dashboard</a> <span class="divider">/</span></li>
@@ -9,6 +10,7 @@
   </ul>
 </div> -->
 <!-- Bottom Nav -->
+<div class="order-edit-notification">Images re-ordering enabled.</div>
 <div class="bottomnav clearfix">
   <div class="action pull-left">
     <a href="<%= admin_galleries_path %>" class="btn btn-small"><i class="icons-back"></i> Back</a>
@@ -19,6 +21,7 @@
       <a href="#dialog" data-toggle="modal" class="btn btn-warning btn-small deletephoto hide"><i class="icons-cross-3"></i> Delete Photo</a>
       <a href="#view-photo-tags" class="btn btn-primary btn-small addtags open hide" for="batch"><i class="icons-tag"></i> Add Tags</a>
       <a href="<%= edit_admin_gallery_path(@album.id) %>" class="btn btn-small btn-success"><i class="icon-edit"></i> Edit</a>
+      <a href="#" class="btn btn-small btn-info order-btn-class" id="edit-order-btn">Edit Order</a>
       <b class="divider"></b>
      
       <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i> Add Image</a>
@@ -169,6 +172,7 @@
 </script>
 
 <% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %>
   <%= javascript_include_tag "jquery.masonry.min.js" %>
   <%= javascript_include_tag "jquery.lite.image.resize.js" %>
   <%= javascript_include_tag "lib/checkbox.card" %>

app/views/galleries/show.html.erb

@@ -1 +1,59 @@
 <%= render_view %>
+<% OrbitHelper.render_css_in_head(["theater.css"]) %>
+<%= javascript_include_tag "jquery.touchSwipe.min" %>
+<%= javascript_include_tag "theater" %>
+<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
+<div id="gallery-theater-stage">
+   <div class="gallery">
+    <div class="gallery-loader">
+      <div class="spinner">
+          <div class="rect1"></div>
+          <div class="rect2"></div>
+          <div class="rect3"></div>
+          <div class="rect4"></div>
+          <div class="rect5"></div>
+      </div>
+    </div>
+    <div class="gallery-actions">
+      <div class="gallery-toggle-desc gallery-actions-btn">
+        <i class="fa fa-comment"></i>
+      </div>
+      <div class="gallery-theme-switch gallery-actions-btn">
+        <i class="fa fa-circle"></i>
+      </div>
+       <div class="gallery-close gallery-actions-btn">
+         <i class="fa fa-times"></i>
+       </div>
+    </div>
+    <div class="image-container" id="image-container"></div>
+    <div class="gallery-thumb-toggle gallery-thumb-line">
+      <i class="fa fa-angle-double-up"></i>
+    </div>
+    <div class="gallery-thumb-container">
+        <div class="gallery-thumb-navs">
+          <div class="gallery-thumb-prev gallery-thumb-nav">
+            <i class="fa fa-arrow-circle-o-left"></i> 
+          </div>
+          <div class="gallery-thumb-next gallery-thumb-nav">
+            <i class="fa fa-arrow-circle-o-right"></i> 
+          </div>
+        </div>
+        <ul class="gallery-thumb-wrap">
+        </ul>
+    </div>
+    <div class="gallery-img-desc">
+      <div class="gallery-img-desc-inner">
+      </div>
+    </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+if(typeof Modernizr == "undefined"){
+  var script = $("<script>");
+  script.attr("src","/assets/modernizr.js");
+  $("head").append(script);
+}
+var gt = new GalleryTheater();
+
+</script>

app/views/galleries/theater.html.erb

@@ -15,23 +15,23 @@
     <div id="imgholder">
       <div class="rslide" style="position:relative; width:100%;">
         <div class="rslideinside"><div id="loading" style="display:none;"></div>
-          <div class="comp" id='main_pic' data-content='<%= @image.album_id %>'><a href="" id="nextpic" class="navN" title="下一張" onclick="return false;" ><img src="<%= @image.file.theater.url %>" alt="" /></a></div>
+          <div class="comp" id='main_pic' data-content='<%= @image.album_id %>'><a href="" id="nextpic" class="navN" title="下一張"  ><img src="<%= @image.file.theater.url %>" alt="<%= @image.description.nil? || @image.description == "" ? "gallery image" : @image.description %>" /></a></div>
           <div class="rslidenav">
-            <a href="" class="navP" title="上一張" onclick="return false;">Prev</a>
-            <a href="" class="navN" title="下一張" onclick="return false;">Next</a>
+            <a href="" class="navP" title="上一張" >Prev</a>
+            <a href="" class="navN" title="下一張" >Next</a>
           </div>
         </div>
         <div class="slidelist">
           <ul id='galleryimagelist' style="display:none;">
             <% @images.each_with_index do |image,i| %>
-              <li for="<%= i %>"><a href="<%= image.id %>" class="list_element" data-content="<%= image.file.theater.url %>" onclick="return false;"><img src="<%= image.file.thumb.url %>" alt="" /></a></li>
+              <li for="<%= i %>"><a href="<%= image.id %>" class="list_element" data-content="<%= image.file.theater.url %>" ><img src="<%= image.file.thumb.url %>" alt="<%= image.description.nil? || image.description == "" ? "gallery image" : image.description %>" /></a></li>
             <% end  %>
           </ul>
         </div>
         <div class="slidectrl">
-          <a href="" class="togglescreen" title="切換全螢幕" onclick="return false;">Screen</a>
-          <a href="" class="togglelist" title="顯示照片清單" onclick="return false;">List</a>
-          <a href="" class="browserfullscreen" title="顯示照片清單" onclick="return false;">F</a>
+          <a href="" class="togglescreen" title="切換全螢幕" >Screen</a>
+          <a href="" class="togglelist" title="顯示照片清單" >List</a>
+          <a href="" class="browserfullscreen" title="顯示照片清單" >F</a>
           <div class="slideinfo">
             <span class="info"><%= @image.description %></span>
           </div>
@@ -67,6 +67,7 @@
     	var gallery = new galleryAPI();
     	gallery.initialize();
     	gallery.loadTheater("<%= params[:id] %>","<%= params[:image_id] %>");
+  $("#orbit_gallery a").on("click",function(){return false;})
 </script>
 
 

config/routes.rb

@@ -3,22 +3,27 @@ Rails.application.routes.draw do
   locales = Site.first.in_use_locales rescue I18n.available_locales
   
   scope "(:locale)", locale: Regexp.new(locales.join("|")) do
+     get "/xhr/galleries/theater/:id" => "galleries#theater"
      namespace :admin do
         get "galleries/get_photoData_json" => "galleries#get_photoData_json"
 
+        get "galleries/new_images" => "galleries#new_images"
+        get "galleries/last_image_id" => "galleries#last_image_id"
+        post "galleries/set_cover" => "galleries#set_cover"
+        post "galleries/delete_photos" => "images#delete_photos"
+        post "galleries/update_image" => "images#update_image"
+        post "galleries/image_tagging" => "images#image_tagging"
+        post "galleries/order" => "images#changeorder"
+
        	resources :galleries do
            get "imgs" => "galleries#imgs"
         end
        	resources :images
        	post "galleries/upload_image" => "galleries#upload_image"
         
-        get "new_images" => "galleries#new_images"
-        post "galleries/set_cover" => "galleries#set_cover"
-        post "galleries/delete_photos" => "images#delete_photos"
-        post "galleries/update_image" => "images#update_image"
-        post "galleries/image_tagging" => "images#image_tagging"
+     
         # match "image_tagging" => "album_images#image_tagging"
      end
+   end
 
 end
-end