Orbit Gallery Module

.gitignore

@@ -0,0 +1,6 @@
+.bundle/
+log/*.log
+pkg/
+test/dummy/db/*.sqlite3
+test/dummy/log/*.log
+test/dummy/tmp/

Gemfile

@@ -0,0 +1,17 @@
+source "http://rubygems.org"
+
+# Declare your gem's dependencies in gallery.gemspec.
+# Bundler will treat runtime dependencies like base dependencies, and
+# development dependencies will be added by default to the :development group.
+gemspec
+
+# jquery-rails is used by the dummy application
+gem "jquery-rails"
+
+# Declare any dependencies that are still in development here instead of in
+# your gemspec. These might include edge Rails or gems from your path or
+# Git. Remember to move these dependencies to your gemspec before releasing
+# your gem to rubygems.org.
+
+# To use debugger
+# gem 'ruby-debug19', :require => 'ruby-debug'

MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.rdoc

@@ -0,0 +1,3 @@
+= Gallery
+
+This project rocks and uses MIT-LICENSE.

Rakefile

@@ -0,0 +1,39 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Gallery'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

app/assets/javascripts/gallery.js

@@ -0,0 +1,267 @@
+!function ($) {
+    $.fn.checkListLength = function (param){
+        _defaultSettings = {
+            onlyOne: null,
+        };
+        _set = $.extend(_defaultSettings, param);
+        $this = this;
+        $li = this.children('li');
+        $dropzone = $('#dropzone');
+        if(($li.length - _set.onlyOne) == 0) {
+		    $('#dropzone').fadeIn(300);
+		} else {
+		    $('#dropzone').fadeOut(300);
+		};
+		$('#file-list').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+    }
+}(window.jQuery);
+
+$(function () {
+    'use strict';
+    // Initialize the jQuery File Upload widget:
+    if($('#fileupload').length){
+	    $('#fileupload').fileupload({
+	        maxFileSize: 5000000,
+	        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
+	        dropZone: $('#dropzone'),
+	        headers:{
+	            'X-CSRF-Token': $('meta[name="csrf-token"]').attr("content")
+	        }
+	    });
+	}
+});
+
+$(function() {
+	var $container = $('.gallery'),
+		$containerData = $container.data();
+	$container.imagesLoaded(function(){
+		var $albumname = $('.albumname'),
+			$img = $('.rgalbum img');
+		$('.rgalbum > a').rsImg();
+		if($containerData.galleryId == 'gallery') {
+			$container.masonry({
+				itemSelector : '.rgalbum',
+				isAnimated: true,
+			});
+			$albumname.each(function(i) {
+				var $albumblock = $(this).closest('a').height(),
+					$H = $(this).outerHeight(true);
+				if($H > $albumblock) {
+					$(this).css({
+						'bottom': "auto",
+						'top': 0,
+					});
+					$(this).hover(function() {
+						$(this).stop(true, true).delay(500).animate({
+							'top': '-='+($H-$albumblock),
+						},($H-$albumblock)*10)
+					},function() {
+						$(this).stop(true, true);
+						$(this).css({
+							'bottom': "auto",
+							'top': 0,
+						});
+					});
+				};
+			});
+			$('#orbit_gallery').delegate('.icons-tag', clickEvent, function(){
+				$(this).parents('.gallery_info').nextAll('.albumtag').slideToggle(300, function() {
+					$container.masonry({
+						itemSelector : '.rgalbum',
+						isAnimated: true,
+					});
+				});
+			});
+		};
+	});
+
+	var bindEvent = function(instance,elem){
+		var $e = elem,
+			image_id = $e.closest(".rgalbum").data("image-id");
+			obj = photosData.filter(function(a) {
+					return a.id == image_id;
+				})[0];
+
+		switch($e.attr("for")){
+			case "description":
+				if(obj.description){
+					instance.find("textarea").each(function(){
+						if(obj.description[$(this).attr("for")])
+							$(this).val(obj.description[$(this).attr("for")]);
+					})
+					
+				}
+				instance.find("input[type=hidden]").val(image_id);
+				instance.find("form").bind("ajax:success",function(evt, data, status){
+					$.pageslide.close();
+					photosData = data;
+				})
+				break;
+			case "tags":
+				instance.find('.tags-groups').cardCheck({
+       			 	item: '.card'
+    			});
+    			for(i = 0; i < obj.tags.length; i++){
+    				instance.find("input[value="+obj.tags[i]+"]").parent().addClass('active');
+    				instance.find("input[value="+obj.tags[i]+"]").prop("checked","checked");
+    			}
+    			instance.find("form").submit(function(event) {
+    				var checkboxes = $(this).find("input[type=checkbox]:checked"),
+    					tag_ids = [],
+    					image_ids =[image_id];
+
+    				checkboxes.each(function(){
+    					tag_ids.push($(this).val());
+    				})
+    				
+    				$.post("/panel/gallery/back_end/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
+    					$.pageslide.close();
+    					photosData = json;
+    				})
+    				return false;
+    			});
+    			break;
+    		case "batch":
+    			instance.find('.tags-groups').cardCheck({
+       			 	item: '.card'
+    			});
+    			instance.find("form").submit(function(event) {
+    				var checkboxes = $(this).find("input[type=checkbox]:checked"),
+    					tag_ids = [],
+    					image_ids =[],
+    					images =  $("#imgholder .rgalbum.active");
+    				checkboxes.each(function(){
+    					tag_ids.push($(this).val());
+    				})
+    				images.each(function(){
+    					image_ids.push($(this).data("image-id"));
+    				})
+    				$.post("/panel/gallery/back_end/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
+    					$.pageslide.close();
+    					photosData = json;
+    				})
+    				return false;
+    			});
+    			break;
+		}
+	}
+
+	var photosData = null;
+	if($("#imgholder").length){
+		$.getJSON(window.location.pathname, function(json, textStatus) {
+			photosData = json;
+		});
+	}
+	$('.open').pageslide({
+		loadComplete: function(instance,elem) {
+			bindEvent(instance,elem);
+		}
+	})
+	
+
+	$("#imgholder").on(clickEvent, '.photo_cover', function(event) {
+		var image_id = $(this).closest(".rgalbum").data("image-id"),
+			album_id = $("#imgholder").data("gallery-id"),
+			set_cover = true;
+		if($(this).children().hasClass("icons-star-2")){
+			$(".icons-star").removeClass("icons-star").addClass('icons-star-2');
+			$(this).children().removeClass("icons-star-2").addClass("icons-star");
+		}else{
+			$(this).children().removeClass("icons-star").addClass("icons-star-2");
+			set_cover = false;
+		}
+		$.post("/panel/gallery/back_end/set_cover",{"album_id":album_id,"image_id":image_id,"set_cover":set_cover});
+
+	});
+
+	$("#delete_selected_photos_btn").click(function(){
+		var photos_to_delete = [],
+			delete_cover = false,
+			$photos = $(".rgalbum.active"),
+			album_id = $("#imgholder").data("gallery-id");
+		$('.modal-body .spinning').fadeIn('fast');
+		$('.modal-body .text-warning').hide(0);
+		$photos.each(function(){
+			photos_to_delete.push($(this).data('image-id'));
+			if ($(this).find(".icons-star").length) {
+				delete_cover = true;
+			};
+		});
+		 $.ajax({
+		 	url : "/panel/gallery/back_end/delete_photos",
+		 	type : "POST",
+		 	data : {"images":photos_to_delete,"delete_cover":delete_cover,"album_id":album_id},
+		 	success : function(){
+		 		$photos.slideUp(300,function() {
+		 			$(this).remove();
+		 		});
+		 		$('#dialog').modal('hide');
+		 		$('.modal-body .spinning').hide();
+				$('.modal-body .text-warning').show();
+				$('.deletephoto, .deselect, .addtags').addClass('hide')
+		 	}
+		 });
+	})
+
+	$('#imgholder').on(clickEvent, '.checkbox', function() {
+		$(this).prop('checked') ? $(this).closest('.rgalbum').addClass('active') : $(this).closest('.rgalbum').removeClass('active');
+		var checkLength = $("#imgholder .rgalbum.active");
+		checkLength.length ? $('.deletephoto, .deselect, .addtags').removeClass('hide') : $('.deletephoto, .deselect, .addtags').addClass('hide');
+	});
+	$('.deselect').on(clickEvent, function(event) {
+		$('.rgalbum').removeClass('active');
+		$('.checkbox').prop('checked', false)
+		$('.deletephoto, .deselect, .addtags').addClass('hide')
+		event.preventDefault();
+	});
+	$('.phtot-action').delegate('li', clickEvent, function(event) {
+		$('.checkbox').prop('checked', false)
+		$('.rgalbum').removeClass('active');
+		$('.deletephoto, .deselect, .addtags').removeClass('hide')
+	});
+
+    // 
+	$('.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);
+				} 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);
+					fetchNewImages();
+				};
+			});
+			return false;
+		}
+	});
+	var fetchNewImages = function(){
+		var lastid = ( $("li.rgalbum:last").length ? $("li.rgalbum:last").data("image-id") : null),
+			albumid = $("#fileupload_aid").val();
+			
+		$.getJSON(window.location.pathname, function(json, textStatus) {
+			photosData = json;
+		});
+
+		$.ajax({
+			url : "/panel/gallery/back_end/new_images",
+			data : {"last_image_id" : lastid, "album_id" : albumid},
+			success : function(data){
+				var $e = $(data);
+				$imgs = $e.find("img");
+				$("#imgholder").append($e);
+				$os = $e.find("a.open");
+				$os.pageslide({
+					loadComplete: function(instance,elem) {
+						bindEvent(instance,elem);
+					}
+				});
+			}
+		})
+
+	}
+});
+

app/assets/javascripts/galleryAPI.js.erb

@@ -0,0 +1,277 @@
+<%# encoding: utf-8 %>
+$.extend($.expr[':'], {
+	'containsi': function (elem, i, match, array) {
+		return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
+	}
+});
+var galleryAPI = function(){
+	g = this;
+	this.urlVars = rcom.getUrlVars();
+	this.albumArea = $("#orbit_gallery");
+	this.loadArea = null;
+	this.tagList = $("ul#gallery_tag_list");
+	this.loading = $("#loading");
+	
+	this.loadTheater = function(id){
+		$( ".breadcrumb li:eq(1) a" ).attr("href","/panel/gallery/back_end/albums");
+		g.loadstart();
+		var imageArray;
+		var imagecount = 0;
+		var picHeight = 0;
+		var bindHandlers = function(){
+			var $slidelist = $('.slidelist'),
+				$rslide = $('.rslide'),
+				$rslidenav = $('.rslidenav'),
+				$img = $("#main_pic img"),
+				wHeight = $(window).height();
+
+				$("#main_pic").height(picHeight);
+				$img.height("100%");
+			
+			$('.bt-tag').click(function(){
+				if(!$(this).hasClass("active"))
+					updatePhotoTag();
+				$(this).toggleClass("active");
+				var $tag_panel = $('#tag_panel'),
+					tag_panel_position = 0;
+
+				if( $tag_panel.css('right') == '0px' ){
+					tag_panel_position = -200;
+				}
+				$tag_panel.animate({'right':tag_panel_position}, 300);
+
+				g.albumArea
+					.delay(200)
+					.animate({'margin-right':tag_panel_position+200},300);
+				return false;
+			});
+			var updatePhotoTag = function(){
+				var tags = imageArray[imagecount].tag_ids;
+				if(tags.length > 0 && g.tagList.find("li").length == 0){
+					var tagnames = imageArray[imagecount].tag_names;
+					g.tagList.empty();
+					for(i in tagnames){
+						$li = $("<li><label>"+tagnames[i]+"</label><span style='display:none;'>"+tagnames[i]+"</span></li>");
+						g.tagList.append($li);
+					}
+				}else if(tags.length > 0 && g.tagList.find("li").length > 0) {
+					g.tagList.find("input").attr("checked",false);
+					for(tag in tags){
+						g.tagList.find("li[data-content="+tags[tag]+"] input").attr("checked",true);
+					}
+				}else if(tags.length == 0){
+					if(g.tagList.find("input").length == 0)
+						g.tagList.empty();
+					else
+						g.tagList.find("input").attr("checked",false);
+				}
+			}
+			g.albumArea.find("#tag_search_box").keyup(function(e){
+				sval = $(this).val();
+				if(sval == "<%= I18n.t('gallery.search_tags') %>")
+						sval = "";
+				sval = sval.replace(/(^\s*)|(\s*$)/g,'');
+				if(sval){
+					var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range 
+					var re2 = new RegExp("^[\uE7C7-\uE7F3]*$");
+					if ((re1.test(sval) && (re2.test(sval)))){
+						$("#gallery_tag_list li span:not(:contains("+sval+"))").parent().slideUp();
+					}else{
+						$("#gallery_tag_list li span:not(:containsi("+sval+"))").parent().slideUp();
+					}
+						
+				}else{
+					$("#gallery_tag_list li").slideDown();
+				}
+			})
+			g.albumArea.find("#tag_panel .bt-save").click(function(){
+				g.saveTags(imageArray[imagecount]._id,"pic",function(tagids){
+					imageArray[imagecount].tag_ids = tagids;					
+				})
+			})
+			$(".slidectrl a.togglelist").click(function(){
+				var rslide_h = $rslide.outerHeight();
+				if ( $slidelist.height() < 1 ){
+					$slidelist.stop().animate({'height':rslide_h - 30}, 300);
+					$slidelist.find("ul").show();
+				} else {
+					$slidelist.stop().animate({'height':'0px'}, 300);
+					$slidelist.find("ul").hide();
+				}
+			})
+			$(".slidectrl .togglescreen").click(function(){
+				toggleFullscreen();
+			})
+			$(".slidectrl .browserfullscreen").click(function(){
+				browserFullScreen();
+			})
+			$slidelist.find(".list_element").click(function(){
+				imagecount = parseInt($(this).parent().attr("for"));
+				changeImage($(this));
+			})
+			$rslidenav.find(".navN").click(function(){
+				nextpic($(this));
+			})
+			$rslidenav.find("a.navP").click(function(){
+				prevpic($(this));
+			})
+			$("#nextpic").click(function(){
+				nextpic($(this));
+			})
+
+			$(document).keydown(function(e){
+			    if (e.keyCode == 37){ 
+			    	prevpic($rslidenav.find(".navP"));
+			       return false;
+			    }
+			    if(e.keyCode == 39){
+			    	nextpic($rslidenav.find(".navN"));
+			    	return false;
+			    }
+			    if(e.keyCode == 27){
+			    	toggleFullscreen();
+			    	$rslide.removeClass('browserFullScreen');
+			    	return false;
+			    }
+			    if(e.keyCode == 70 || e.keyCode == 102){
+			    	if($rslide.hasClass("fullscreen"))
+			    	 browserFullScreen();
+			    }
+			});
+			var browserFullScreen = function(){
+				var el = document.documentElement,
+      				rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
+    			rfs.call(el);
+			}
+			$(window).resize(function(){
+				if(window.innerWidth == screen.width && window.innerHeight == screen.height) {
+					$rslide.addClass('browserFullScreen');
+				} else {
+					$rslide.removeClass('browserFullScreen');
+				}
+			})
+			var nextpic = function(dom){
+				if(imagecount == imageArray.length - 1)
+					imagecount = 0;
+				else
+					imagecount++;
+				changeImage(dom);
+			}
+			var prevpic = function(dom){
+				if(imagecount == 0)
+					imagecount = imageArray.length - 1
+				else
+					imagecount--;
+				changeImage(dom);
+			}
+			var toggleFullscreen = function(){
+				if($rslide.hasClass("fullscreen")){
+					$rslide.css("position","relative");
+					$rslide.removeClass("fullscreen");
+					$(".slidectrl .browserfullscreen").hide();
+					$img.css({"padding":""})
+					$("#main_pic").height(picHeight );
+				}else{
+					 $("#main_pic").height(wHeight);
+					// $img.height("100%");
+					$rslide.css("position","");
+					$rslide.addClass("fullscreen");
+					$img.css({"padding":($rslide.height()-$img.height())/2})
+					$(".slidectrl .browserfullscreen").show();
+				}
+			}
+			var changeImage = function(dom){
+				var pageurl = dom.attr('href');
+
+				$img.fadeOut(200,function(){
+					g.loadstart();
+					$img.attr("src","");
+					$img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"}).load(function(){
+						$img.fadeIn(200);
+						g.loadcomplete();
+					});
+					
+					
+	 				if($rslide.hasClass("fullscreen")){
+	 					$img.css({"padding":($rslide.height()-$img.height())/2})
+	 				}
+	 				$slidelist.stop().animate({'height':'0px'}, 300);
+					$slidelist.find("ul").hide();
+					if(rcom.getInternetExplorerVersion() == -1){
+					    if(pageurl!=window.location){
+					      window.history.pushState({path:pageurl},'',pageurl);
+					    }
+					}else{
+				   		window.location.hash = pageurl;
+				   	}
+				    // $(".slideinfo b.info").text(imageArray[imagecount].title);
+				    if($('.bt-tag').hasClass("active"))
+				    	updatePhotoTag();
+				    if(imageArray[imagecount].description)
+				    	$(".slideinfo .info").text(imageArray[imagecount].description);
+				    else
+				    	$(".slideinfo .info").text("");
+				    if(imageArray.length > 1)
+				    	updateNavigation();
+			    })
+
+			}
+			var updateNavigation = function(){
+				var next, prev;
+				if(imagecount == 0){
+					next = 1;
+					prev = imageArray.length - 1; 
+				}else if(imagecount == imageArray.length - 1){
+					next = 0
+					prev = imageArray.length - 2;
+				}else{
+					next = imagecount + 1;
+					prev = imagecount - 1;
+				}
+				$(".navN").attr({"href":imageArray[next]._id,"data-content":imageArray[next].file.theater.url});
+				$(".navP").attr({"href":imageArray[prev]._id,"data-content":imageArray[prev].file.theater.url});
+			};
+			if(imageArray.length > 1)
+				updateNavigation();
+		}
+		
+		var preparestage = function(albumid){
+			$.getJSON("../albums/"+albumid+"/imgs",function(album){
+				imageArray = eval(album.images);
+				$.each(album.images,function(i,image){
+					if(image._id == id)
+						imagecount = i;
+				})
+				bindHandlers();
+			})
+		}
+		
+		if(rcom.getInternetExplorerVersion()!=-1){
+			var photo_id = window.location.hash.replace("#","");
+			if(photo_id){
+				var url = window.location.href;
+				var params = url.split("/");
+				// params[params.length-1] = photo_id;
+				url = url.replace(params[params.length-1],photo_id);
+
+				window.location.href = url;
+			}
+		}
+		
+		var albumid = $("#main_pic").attr("data-content");
+		g.albumArea.find(".bt-back").attr("href","../albums/"+albumid);
+		g.albumArea.find(".bt-edit").attr("href","../albums/"+albumid+"/edit");	
+		g.albumArea.css("margin-bottom","0");
+		picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#orbit_gallery .form-actions").outerHeight());
+		preparestage(albumid);
+		
+	}
+	this.loadcomplete = function(){
+		g.loading.hide();
+	}
+	this.loadstart = function(){
+		g.loading.show();
+	}
+	
+}
+galleryAPI.prototype.locale = "en";

app/assets/javascripts/galleryAPI_frontend.js.erb

@@ -0,0 +1,251 @@
+<%# encoding: utf-8 %>
+$.extend($.expr[':'], {
+	'containsi': function (elem, i, match, array) {
+		return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
+	}
+});
+var galleryAPI = function(){
+	g = this;
+	this.urlVars = rcom.getUrlVars();
+	this.albumArea = $("#orbit_gallery");
+	this.loadArea = "theater";
+	this.tagList = $(".taglist ul");
+	this.loading = $("#loading");
+	// this.authenticated = false;
+	this.initialize = function(callbackFn){
+		 if(g.loadArea == "theater"){
+ 			if(rcom.getInternetExplorerVersion()!=-1){
+ 				var photo_id = window.location.hash.replace("#","");
+				if(photo_id){
+					var params = rcom.getUrlVars();
+					var url = window.location.href.split("?")[0];
+					params["image_id"] = photo_id;
+					for(i=0;i<params.length;i++){
+						if(i == 0)
+							url+="?"+params[i]+"="+params[params[i]];
+						else
+							url+="&"+params[i]+"="+params[params[i]];
+						 
+					}
+ 					window.location.href = url;
+				}
+ 			}
+ 		}
+
+	}
+
+	this.loadTheater = function(albumid,id){
+		var imageArray;
+		var imagecount = 0;
+		// var picHeight = 0;
+		g.loadstart();
+		var bindHandlers = function(){
+			var $slidelist = $('.slidelist'),
+				$rslide = $('.rslide'),
+				$rslidenav = $('.rslidenav'),
+				$img = $("#main_pic img"),
+				wHeight = $(window).height();
+
+				$("#main_pic").height("auto");
+				$img.css("height","auto");
+			
+			var updatePhotoTag = function(){
+				var tagnames = imageArray[imagecount].tag_names;
+				g.tagList.empty();
+				for(tag in tagnames){
+					g.tagList.append("<li>"+tagnames[tag]+"</li>");
+				}
+				
+			}
+			
+			
+			$(".slidectrl a.togglelist").click(function(){
+				var rslide_h = $rslide.outerHeight();
+				if ( $slidelist.height() < 1 ){
+					$slidelist.stop().animate({'height':rslide_h - 30}, 300);
+					$slidelist.find("ul").show();
+				} else {
+					$slidelist.stop().animate({'height':'0px'}, 300);
+					$slidelist.find("ul").hide();
+				}
+			})
+			$(".slidectrl .togglescreen").click(function(){
+				toggleFullscreen();
+			})
+			$(".slidectrl .browserfullscreen").click(function(){
+				browserFullScreen();
+			})
+			$slidelist.find(".list_element").click(function(){
+				imagecount = parseInt($(this).parent().attr("for"));
+				changeImage($(this));
+			})
+			$rslidenav.find(".navN").click(function(){
+				nextpic($(this));
+			})
+			$rslidenav.find("a.navP").click(function(){
+				prevpic($(this));
+			})
+			$("#nextpic").click(function(){
+				nextpic($(this));
+			})
+
+			$(document).keydown(function(e){
+			    if (e.keyCode == 37){ 
+			    	prevpic($rslidenav.find(".navP"));
+			       return false;
+			    }
+			    if(e.keyCode == 39){
+			    	nextpic($rslidenav.find(".navN"));
+			    	return false;
+			    }
+			    if(e.keyCode == 27){
+			    	toggleFullscreen();
+			    	$rslide.removeClass('browserFullScreen');
+			    	return false;
+			    }
+			    if(e.keyCode == 70 || e.keyCode == 102){
+			    	if($rslide.hasClass("fullscreen"))
+			    	 browserFullScreen();
+			    }
+			});
+			var browserFullScreen = function(){
+				var el = document.documentElement,
+      				rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
+    			rfs.call(el);
+			}
+			$(window).resize(function(){
+				if(window.innerWidth == screen.width && window.innerHeight == screen.height) {
+					$rslide.addClass('browserFullScreen');
+				} else {
+					$rslide.removeClass('browserFullScreen');
+				}
+			})
+			var nextpic = function(dom){
+				if(imagecount == imageArray.length - 1)
+					imagecount = 0;
+				else
+					imagecount++;
+				changeImage(dom);
+			}
+			var prevpic = function(dom){
+				if(imagecount == 0)
+					imagecount = imageArray.length - 1
+				else
+					imagecount--;
+				changeImage(dom);
+			}
+			var toggleFullscreen = function(){
+				if($rslide.hasClass("fullscreen")){
+					$rslide.css("position","relative");
+					$rslide.removeClass("fullscreen");
+					$(".slidectrl .browserfullscreen").hide();
+					$img.css({"padding":""})
+					$("#main_pic").height("auto");
+				}else{
+					$("#main_pic").height(wHeight);
+					$img.css("height","auto");
+					$rslide.css("position","");
+					$rslide.addClass("fullscreen");
+					$img.css({"padding":($rslide.height()-$img.height())/2})
+					$(".slidectrl .browserfullscreen").show();
+				}
+			}
+			var changeImage = function(dom){
+				var pageurl = dom.attr('href');
+
+				$img.fadeOut(200,function(){
+					g.loadstart();
+					if($rslide.hasClass("fullscreen")){
+						
+						$img.attr({"src":dom.attr("data-content")}).css("height","100%").load(function(){
+							g.loadcomplete();
+							$img.fadeIn(200);
+						});
+					}else{
+						$img.attr({"src":dom.attr("data-content")}).css("height","auto").load(function(){
+							g.loadcomplete();
+							$img.fadeIn(200);
+						});;
+					}
+	 				if($rslide.hasClass("fullscreen")){
+	 					$img.css({"padding":($rslide.height()-$img.height())/2})
+	 				}
+	 				$slidelist.stop().animate({'height':'0px'}, 300);
+					$slidelist.find("ul").hide();
+					if(rcom.getInternetExplorerVersion() == -1){
+					    if(pageurl!=window.location){
+					    	pageurl = window.location.pathname+"?id="+albumid+"&controller_action=theater&image_id="+pageurl;
+					      window.history.pushState({path:pageurl},'',pageurl);
+					    }
+					}else{
+				   		window.location.hash = pageurl;
+				   	}
+				    // $(".slideinfo b.info").text(imageArray[imagecount].title);
+				    	updatePhotoTag();
+				    if(imageArray[imagecount].description)
+				    	$(".slideinfo .info").text(imageArray[imagecount].description);
+				    else
+				    	$(".slideinfo .info").text("");
+				    if(imageArray.length > 1)
+				    	updateNavigation();
+			    })
+
+			}
+			var updateNavigation = function(){
+				var next, prev;
+				if(imagecount == 0){
+					next = 1;
+					prev = imageArray.length - 1; 
+				}else if(imagecount == imageArray.length - 1){
+					next = 0
+					prev = imageArray.length - 2;
+				}else{
+					next = imagecount + 1;
+					prev = imagecount - 1;
+				}
+				$(".navN").attr({"href":imageArray[next]._id,"data-content":imageArray[next].file.theater.url});
+				$(".navP").attr({"href":imageArray[prev]._id,"data-content":imageArray[prev].file.theater.url});
+			};
+			if(imageArray.length > 1)
+				updateNavigation();
+		}
+		
+		var preparestage = function(albumid){
+			$.getJSON("/panel/gallery/front_end/albums/"+albumid+"/imgs",{"inner":true},function(album){
+				imageArray = eval(album.images);
+				$.each(album.images,function(i,image){
+					if(image._id == id)
+						imagecount = i;
+				})
+				bindHandlers();
+			})
+		}
+		// if(rcom.getInternetExplorerVersion()!=-1){
+		//  	var url_constructor = window.location.href.split("/");
+		// 	var url = "";
+		// 	for(x=0;x<=url_constructor.length-1;x++){
+		// 		if(x == url_constructor.length-1){
+		// 			url+="#!/"+url_constructor[x];
+		// 		}else{
+		// 	   		url+=url_constructor[x]+"/";
+		// 	   	}
+		// 	 }
+			 
+		// 	 window.location.href = url;
+		// }
+		
+		var albumid = $("#main_pic").attr("data-content");
+		g.albumArea.css("margin-bottom","0");
+		// picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#orbit_gallery .form-actions").outerHeight());
+		preparestage(albumid);
+		
+	}
+	this.loadcomplete = function(){
+		g.loading.hide();
+	}
+	this.loadstart = function(){
+		g.loading.show();
+	}
+
+}
+galleryAPI.prototype.locale = "en";

app/assets/javascripts/gallery_old.js

@@ -0,0 +1 @@
+//= require galleryAPI

app/assets/javascripts/jquery.lite.image.resize.js

@@ -0,0 +1,136 @@
+/* ===================================================
+ * jquery-lite-image-resize v.1.0.1
+ * https://github.com/RayChang/jquery-lite-image-resize
+ * ===================================================
+ * How to use ?
+ *
+ * HTML element closest to the image to add class "resizeimg".
+ * 
+ * Example:
+ * <div class="resizeimg">
+ *     <img src="images url" />
+ * </div>
+ *
+ * Or you can use:
+ * $('your class').rsImg();
+ *
+ * Note : HTML structure must be a structure like the example above.
+ * 
+*/
+
+!function ($) {
+
+    "use strict";
+    
+    var ResizeImg = function(element, elementLength, i) {
+        this.element = $(element);
+        this.element.data('exists', true);
+        this.elementLength = elementLength;
+        this.index = i;
+    };
+    ResizeImg.prototype.resize = function(callback) {
+        var $img = this.element.children('img').eq(0),
+            elW = this.element.innerWidth(),
+            elH = this.element.innerHeight(),
+            elScale = elW/elH,
+            ell = this.elementLength,
+            index = this.index,
+            image = document.createElement("img");
+        image.src = $img.attr('src');
+        this.element.css({
+            'position': 'relative',
+            'overflow': 'hidden',
+        });
+        function imageLoadComplete() {
+            var imgW = image.width,
+                imgH = image.height,
+                imgScale = imgW/imgH,
+                portrait = {
+                    'position': 'absolute',
+                    'height': '100%',
+                    'width': 'auto',
+                    'max-width': 'none',
+                    'left': '50%',
+                    'top': 0,
+                    'margin-left': imgW*(elH/imgH)/-2
+                },
+                landscape = {
+                    'position': 'absolute',
+                    'height': 'auto',
+                    'max-height': 'none',
+                    'width': '100%',
+                    'left': 0,
+                    'top': '50%',
+                    'margin-top': imgH*(elW/imgW)/-2
+                },
+                center = {
+                    'position': 'absolute',
+                    'height': '100%',
+                    'width': '100%',
+                    'top': 0,
+                    'left': 0
+                };
+            if(imgScale < 1) {
+                if(elScale < 1) {
+                    if(elScale > imgScale) {
+                        $img.css(landscape);
+                    } else {
+                        $img.css(portrait);
+                    };
+                } else {
+                   $img.css(landscape); 
+                };
+            };
+
+            if(imgScale > 1) {
+                if(elScale > 1) {
+                    if(elScale > imgScale) {
+                        $img.css(landscape);
+                    } else {
+                        $img.css(portrait);
+                    };
+                } else {
+                    $img.css(portrait);
+                };
+            };
+
+            if(imgScale == 1) {
+                if(elScale < 1) {
+                    $img.css(portrait);
+                } else if(elScale > 1) {
+                    $img.css(landscape);
+                } else {
+                    $img.css(center);
+                };
+            };
+            $img.fadeTo(500, 1);
+            
+            if(index == ell && callback) {
+                ResizeImg.prototype.callback(callback)
+            }
+        }
+        if(/MSIE 8.0/g.test($ua)) {
+            imageLoadComplete();
+        } else {
+            image.onload = imageLoadComplete;
+        }
+    };
+
+    ResizeImg.prototype.callback = function(callback) {
+        callback();
+    };
+
+    $.fn.rsImg = function (callback) {
+        var elementLength = this.length - 1;
+        this.each(function (i) {
+            if(!$(this).data('exists')) {
+                $(this).children("img").fadeTo(0,0);
+                new ResizeImg(this, elementLength, i).resize(callback);
+            };
+        });
+    };
+
+    $(function() {
+        $('.resizeimg').rsImg();
+    });
+}(window.jQuery);

app/assets/javascripts/rss.js

@@ -0,0 +1,586 @@
+//Created by Harry Bomrah on Sep 21 2011
+$rss = jQuery.noConflict();
+var rcom={
+//Pass dom and will return binded dom with starting year till current
+insertDatePanel : function(dom,year){
+	if(!year)year=1901;
+	if(dom=="")return false;
+	domid=dom.attr("id");
+	var dt = new Date();
+	current_year=dt.getFullYear();
+	var dthtml="Year: <select name='"+domid+"_year'>";
+	for(i=current_year;i>=year;i--){
+		dthtml+="<option value='"+i+"'>"+i+"</option>";
+	}
+	dthtml+="</select> Date: <select name='"+domid+"_date'>";
+	for(i=1;i<=31;i++){
+		if(i<10)
+			dthtml+="<option value='0"+i+"'>"+i+"</option>";
+		else
+			dthtml+="<option value='"+i+"'>"+i+"</option>";
+	}
+	dthtml+="</select> Month: <select name='"+domid+"_month'>";
+	var months= Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
+	for(i=1;i<12;i++){
+		if(i<10)
+			dthtml+="<option value='0"+i+"'>"+months[i]+"</option>";
+		else
+			dthtml+="<option value='"+i+"'>"+months[i]+"</option>";
+	}
+	dthtml+="</select>"; 
+	dom.html(dthtml);
+},
+
+//loading overlay around a dom...
+loadingWrapper : function(dom, display){
+	if(display){
+		dom.prepend("<div id='loading_wrapper' class='loading'></div>");
+		$rss("#loading_wrapper").height(dom.height());
+		$rss("#loading_wrapper").width(dom.width());
+	}else{
+		domId=dom.attr("id");
+		$rss("#"+domId+" #loading_wrapper").remove();
+		}
+	},
+	
+//validating a dom.... 
+validate : function(dom, validation, errormsg){
+	var domValue = dom.val();
+	var error = false;
+	var regex="";
+	var msg = "";
+	switch(validation){
+		case "required":
+			if(domValue=="")error=true;
+			msg="Cannot be empty.";
+			break;
+		case "email":
+			regex=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
+			msg="Invalid Email Address.";
+			break;
+		case "number":
+			regex=/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
+			msg = "Only numbers are accepted.";
+			break;
+		case "alphanumeric":
+			regex=/^\s*[a-zA-Z0-9,\s]+\s*$/;
+			msg="Only numbers, alphabets and spaces are allowed.";
+			break;
+		}
+		domId=dom.attr("name");
+		if(errormsg=="")errormsg=msg;
+		if(regex!="")if(!regex.test(domValue))error=true;
+		if(error){$rss("#"+domId+"_error").remove();dom.after("<span id='"+domId+"_error' class='error'>"+errormsg+"</span>");return false;} else{ $rss("#"+domId+"_error").remove();return true;}
+	},
+	
+bindToSpinner : function(dom,data,callbackFn){
+		var domId = dom.attr("id");
+		var dhtml="";
+		var spinnerValue=Array();
+		var spinnerDisplay=Array();
+		$rss.each(data,function(i,it){
+			$rss.each(data[i],function(key,it){
+				spinnerValue.push(it);
+			});
+		});
+		dhtml="<select name='"+domId+"'>";
+		for(i=0,y=1,z=0;i<spinnerValue.length/2;i++,y+=2,z+=2){
+			dhtml+="<option value='"+spinnerValue[z]+"'>"+spinnerValue[y]+"</option>";
+		}
+		dhtml+="</select>";
+		dom.html(dhtml);
+		if(typeof callbackFn=="function")
+			callbackFn.call(this, dhtml);
+	},
+	
+	//binds the recieved json to a table
+bindToTable : function(dom,data,headers,actions,css_class,callbackFn){
+	if(!css_class)css_class="";
+	var dhtml="<table width='100%' cellpadding='5' cellspacing='5' class='"+css_class+"' ><thead><tr>";
+	var domId = dom.attr("id");
+	if(actions){
+		var btnTitles=Array();
+		var btnFunctions=Array();
+		$rss.each(actions,function(title,func){
+			btnTitles.push(title);
+			btnFunctions.push(func);
+		});
+		rcom.translate(btnTitles,function(convertedData){
+				btnTitles=convertedData.slice();
+		
+			rcom.translate(headers,function(convertedData){
+				headers=convertedData;
+				if(!data)return;
+				$rss.each(headers,function(i,head){
+					dhtml+="<th>"+head+"</th>";
+				});
+				dhtml+="</thead></tr>";
+				if(data.length==0)dhtml+="<tr><td colspan='"+headers.length+"' align='center'>No Data</td></tr>";
+				$rss.each(data,function(i,item){
+					var cl="";
+					if(i%2!=0)cl="even";
+					dhtml+="<tr id='"+domId+"_"+item.id+"' class='"+cl+"'>";
+					$rss.each(item,function(i,it){
+						if(i!="id"){
+							if(it==null)it="Not Set";
+								dhtml+="<td align='center'>"+it+"</td>";
+						}
+					})
+					dhtml+="<td align='center'>";
+					for(x=0;x<btnTitles.length;x++){
+						dhtml+="<button onclick='"+btnFunctions[x]+"("+item.id+")'>"+btnTitles[x]+"</button>";
+					}
+					dhtml+="</td>";
+					dhtml+="</tr>";
+				});
+				dhtml+="</table>";
+				dom.html(dhtml);
+				});
+		});
+	}else{
+			rcom.translate(headers,function(convertedData){
+				headers=convertedData;
+				if(!data)return;
+				if(headers.length>0){
+					$rss.each(headers,function(i,head){
+						dhtml+="<th>"+head+"</th>";
+					});
+				}
+				dhtml+="</thead></tr>";
+				if(data.length==0)dhtml+="<tr><td colspan='"+headers.length+"' align='center'>No Data</td></tr>";
+				
+				$rss.each(data,function(i,item){
+					var cl="";
+					if(i%2!=0)cl="even";
+					dhtml+="<tr id='"+domId+"_"+item.id+"' class='"+cl+"'>";
+					$rss.each(item,function(i,it){
+						if(i!="id"){
+							if(it==null)it="Not Set";
+								dhtml+="<td align='center'>"+it+"</td>";
+						}
+					})
+					dhtml+="</tr>";
+				});
+				dhtml+="</table>";
+				dom.html(dhtml);
+				});	
+	}
+	
+	if(typeof callbackFn=="function")
+		callbackFn.call(this, dhtml);
+},
+	//convert to date string which can be directly inserted in database or according to any format.
+convertToInsertableDate : function(y,m,d,format){
+		var dt="";
+		if(m<10)m="0"+m;
+		if(d<10)d="0"+d;
+		switch(format){
+			case "yyyy-mm-dd":
+				dt= y+"-"+m+"-"+d;
+			break;
+			case "dd-mm-yyyy":
+				dt= d+"-"+m+"-"+y;
+			break;
+			case "mm-dd-yyyy":
+				dt= m+"-"+d+"-"+y;
+			break;
+			default:
+				dt= y+"-"+m+"-"+d;
+			break;
+		}
+		return dt; 
+	},
+//a fucntion to show specific divs and hide all other	
+showDoms : function(doms){
+	$rss("body").find("div").each(function(){$rss(this).hide();});
+	$rss.each(doms,function(i,dom){
+			dom.show();
+		});
+	},
+
+//a function to translate the word or array..
+translate : function(data,callbackFn){
+		var cdata="";
+		var status =true;
+		if(!data){
+			if(typeof callbackFn=="function")
+						callbackFn.call(this,cdata);
+				status=false;
+			}
+		if(data==""){
+			if(typeof callbackFn=="function")
+						callbackFn.call(this,cdata);
+				status=false;
+			}
+		if(status){
+			$rss.getJSON("../../classes/translate.php", {fn:"translateThis",tData:data},function(convertedData){			
+				if(typeof callbackFn=="function")
+						callbackFn.call(this, convertedData);
+			});
+		}
+	},
+
+// a function to bind JSON to list
+bindToList : function(dom,data,callbackFn){
+		var domId = dom.attr("id");
+		var dhtml="";
+		var listValue=Array();
+		var listDisplay=Array();
+		$rss.each(data,function(i,it){
+			$rss.each(data[i],function(key,it){
+				listValue.push(it);
+			});
+		});
+		dhtml="<ul id='"+domId+"_list'>";
+		for(i=0,y=1,z=0;i<listValue.length/2;i++,y+=2,z+=2){
+			dhtml+="<li id='li_"+listValue[z]+"'>"+listValue[y]+"</li>";
+		}
+		dhtml+="</ul>";
+		dom.html(dhtml);
+		if(typeof callbackFn=="function")
+			callbackFn.call(this,dhtml);
+	},
+makeDraggable : function(handler,dom){
+	handler.css("position","absolute");
+	dom.css("position","absolute");
+	var puranix=0;
+	var nayeex=0;
+	var puraniy=0;
+	var nayeey=0;
+	var offset="";
+	var zIndex=dom.css("z-index");
+		handler.mousedown(function(e){
+			puranix=e.clientX;
+			puraniy=e.clientY;
+			offset=dom.offset();
+			$rss(this).mousemove(function(e){
+				nayeex=e.clientX-puranix;
+				nayeex+=offset.left;
+				nayeey=e.clientY-puraniy;
+				nayeey+=offset.top;
+				dom.css({"left":nayeex+"px","top":nayeey+"px","z-index":"9999"});
+			})
+		}).mouseup(function(){
+			$rss(this).unbind("mousemove");
+			dom.css("z-index",zIndex);
+		})
+	},
+	
+//automatically scrolls to the bottom of the div	
+scrollToBottom : function(dom){
+	var domId = dom.attr("id");
+//	var domScrollHeight = document.getElementById(domId).scrollHeight; 
+	var obj = document.getElementById(domId);
+	
+	if((obj.scrollTop+100) >= (obj.scrollHeight - obj.offsetHeight))
+		dom.scrollTop(obj.scrollHeight);
+	},
+	
+/*ajax loading of images... needs following settings
+dom:in which images ve to be loaded
+url:the server url for making ajax calls
+limit:how many images to load
+divClass:the class of div surrounding each image
+nameClass:class for span showing name
+fn:function to be called in on the server
+imageSrc:the image source of all the images.
+bindTo:to bind images to a onclick function or else will be binded to normal a tag.
+urlKey:to specify the key of the value.. if bindTo is used, this will be neglected..
+returns json;
+*/
+loadImages : function(settings,callbackFn){
+
+		var dom = settings.dom;
+		var domid= dom.attr("id");
+		var temp_array=Array();
+		var starting = $rss("#"+domid+" img:last").attr("id");
+		if(typeof starting != 'undefined'){
+			starting = starting.substr(4,starting.length-1);	
+		}else{starting = 0};
+		var temp_var="";
+		var json = "";
+		var dhtml="";
+		var extraparam="";
+		if(typeof settings.extraParam != "undefined"){
+			extraparam = settings.extraParam;
+		}
+		$rss.getJSON(settings.url,{fn:settings.fn,id:settings.whereId,limit:settings.limit,start:starting,extra:extraparam},function(images){
+				json = eval(images);
+				$rss.each(images,function(i,pic){
+					var temp_array=Array();
+					var a_var=Array();
+					var name_var="";
+					var title="";
+					$rss.each(pic,function(i,value){
+						temp_array.push(value);
+						})
+						if(temp_array.length>=4){
+							name_var="<span class='"+settings.nameClass+"'>"+temp_array[3]+"</span></div>" 	
+						}
+						if(temp_array[2]==null)
+							title = "";
+						else
+							title = temp_array[2];
+						if(typeof settings.bindTo!="undefined"){
+							a_var[1]="onclick='"+settings.bindTo+"("+temp_array[0]+");return false;'";
+							a_var[0]="";
+						}else{a_var[0]='?'+settings.urlKey+'='+temp_array[0];a_var[1]="";}
+					dhtml="<div class='"+settings.divClass+"' id='img_holder_"+temp_array[0]+"' ><a href='"+a_var[0]+"' "+a_var[1]+" title='"+title+"'><img  id='pic_"+temp_array[0]+"' style='display:none' src='"+settings.imageSrc+temp_array[1]+"' /></a>"+name_var;
+				dom.delay(100).append(dhtml);	
+				$rss("#pic_"+pic.id).delay(100).fadeIn(200);
+				
+				})
+				if(typeof callbackFn=="function")
+					callbackFn.call(this,json);
+		})
+		
+		
+	},
+	
+//function to get url variables...
+getUrlVars : function(){
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for(var i = 0; i < hashes.length; i++){
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+    }
+    if(vars[0] == window.location.href){
+    	vars =[];
+    }
+    return vars;
+},
+/*function to open a modalwindow on a page.. self reliant no images, no css needed.
+settings
+
+width:in percentage or pixcel
+height:in percentage or pixcel
+closeBtn:true or false
+envClose:closing through background click, true or flase
+loadDiv:load html from a div
+loadPage:load a page
+loadHtml: load html
+
+*/
+modalWindow : function(settings,callbackFn){
+	
+	var envClose = settings.envClose;
+	var dhtml="";
+	if(typeof envClose == "undefined")
+		envClose = true;
+	var closeBtn = settings.closeBtn;
+	if(typeof closeBtn == "undefined")
+		closeBtn = true;
+
+	var rgmaskHeight = $rss(window).height();
+	var rgmaskWidth = $rss(window).width();
+	var tempheight = settings.height;
+	var tempwidth = settings.width;
+		
+	var maxheight = (rgmaskHeight*85)/100;
+	var maxwidth = (rgmaskWidth*85)/100;
+		
+	if(typeof tempheight!="undefined"){
+		tempheight = tempheight.toString();
+		if(tempheight.charAt(tempheight.length-1)=='%')
+			tempheight=(rgmaskHeight*parseInt(tempheight.substr(0,tempheight.length)))/100;
+		if(tempheight>maxheight)
+			tempheight=maxheight;	
+	}else{tempheight="auto";}
+	if(typeof tempwidth!="undefined"){
+		tempwidth = tempwidth.toString();
+		if(tempwidth.charAt(tempwidth.length-1)=='%')
+			tempwidth=(rgmaskWidth*parseInt(tempwidth.substr(0,tempwidth.length)))/100;
+		if(tempwidth>maxwidth)
+			tempwidth=maxwidth;
+	}else{tempwidth="auto";}
+	$rss("body").append('<div class="rgmask" id="rgsheath" style="height:'+rgmaskHeight+'px"></div>');
+	$rss("#rgsheath").css({background: "#000", width: "100%", position: "fixed", top: 0, left: 0,opacity:0.5,'z-index':199});
+	$rss("body").append('<div id="rgWindow"></div>');
+	$rss("#rgWindow").css({"position": "fixed", "z-index": "999", "background": "#fff", "border": "solid 1px #ccc", "padding": "10px", "border-radius": "5px", "-webkit-border-radius": "5px", "-moz-border-radius": "5px", "-ms-border-radius": "5px",	"box-shadow": "0 0 20px rgba(0,0,0,0.7)","-webkit-box-shadow": "0 0 20px rgba(0,0,0,0.7)","-moz-box-shadow": "0 0 20px rgba(0,0,0,0.7)","-ms-box-shadow": "0 0 20px rgba(0,0,0,0.7)"});
+		var rgWTop = (rgmaskHeight-20)/2;
+		var rgWLeft = (rgmaskWidth-20)/2;
+		$rss("#rgWindow").css({top:rgWTop+"px", left:rgWLeft+"px"});
+	if(typeof settings.loadDiv!="undefined"){
+		dhtml = $rss(settings.loadDiv).html();
+		$rss("#rgWindow").html(dhtml).hide();
+		prepareWindow();
+	}
+	if(typeof settings.loadHtml!="undefined"){
+		dhtml = settings.loadHtml;
+		$rss("#rgWindow").html(dhtml).hide();
+		prepareWindow();
+	}
+	if(typeof settings.loadPage!="undefined"){
+		$rss("#rgWindow").load(settings.loadPage,function(){$rss(this).hide();dhtml=$rss(this).html();prepareWindow();});
+	}
+	function prepareWindow(){
+		if(tempheight!="auto")
+			rgWTop = (rgmaskHeight-tempheight)/2;
+		else{
+			tempheight=$rss("#rgWindow").height()+30;
+			if(tempheight>maxheight)
+				tempheight=maxheight;
+			rgWTop=(rgmaskHeight-tempheight)/2;
+		}
+		if(tempwidth!="auto")
+			rgWLeft = (rgmaskWidth-tempwidth)/2;
+		else{
+			tempwidth=$rss("#rgWindow").width();
+			if(tempwidth>maxwidth)
+				tempwidth=maxwidth;
+			rgWLeft=(rgmaskWidth-tempwidth)/2;
+		}
+		tempwidth=parseInt(tempwidth)+25;
+		$rss("#rgWindow").empty().show();
+		var closebtn = "";
+		if(closeBtn)
+			closebtn='<a href="" style="display:block; width:20px; height:20px; line-height:19px; text-align:center; position:absolute; right:-10px; top: -10px; font-family:Tahoma; font-weight:bold; border:solid 1px #000; border-radius: 10px;text-shadow:0px 1px 0 #DDD; background-color:#CCC; font-size:10px; text-decoration:none; color:#666; padding-left:1px; box-shadow: 0 0 5px #000000;" id="close_modal">X</a>';
+		$rss("#rgWindow").animate({"width":tempwidth+"px","height":tempheight+"px",top:rgWTop+"px", left:rgWLeft+"px"},500,function(){$rss("#rgWindow").html(closebtn+"<div id='rgContent' style='padding:5px; overflow:auto; overflow-x:none; height:"+tempheight+"px;'>"+dhtml+"</div>");
+		$rss("#close_modal").mouseover(function(){$rss(this).css("color","#999");}).mouseout(function(){$rss(this).css("color","#666");})
+		$rss("#close_modal").click(function(){rcom.modalWindowClose(); return false;})
+			if(envClose)
+				$rss("#rgsheath").click(function(){
+					rcom.modalWindowClose();
+				})
+				$rss(document).one("keydown",function(e){
+				    if (e.keyCode == 27){ 
+				    	rcom.modalWindowClose();
+				       return false;
+				    }
+			})
+
+			if(typeof callbackFn=="function")
+				callbackFn.call(this,$rss("#rgWindow"));
+		});
+	}
+},
+modalWindowUpdate : function(settings,callbackFn){
+	var rgmaskHeight = $rss(window).height();
+	var rgmaskWidth = $rss(window).width();
+	var tempheight = settings.height;
+	var tempwidth = settings.width;
+	var dhtml = "";
+	var maxheight = (rgmaskHeight*85)/100;
+	var maxwidth = (rgmaskWidth*85)/100;
+	if(typeof tempheight!="undefined"){
+		tempheight = tempheight.toString();
+		if(tempheight.charAt(tempheight.length-1)=='%')
+			tempheight=(rgmaskHeight*parseInt(tempheight.substr(0,tempheight.length)))/100;
+		if(tempheight>maxheight)
+			tempheight=maxheight;	
+	}else{tempheight="auto";}
+	if(typeof tempwidth!="undefined"){
+		tempwidth = tempwidth.toString();
+		if(tempwidth.charAt(tempwidth.length-1)=='%')
+			tempwidth=(rgmaskWidth*parseInt(tempwidth.substr(0,tempwidth.length)))/100;
+		if(tempwidth>maxwidth)
+			tempwidth=maxwidth;
+	}else{tempwidth="auto";};
+	$rss("body").append("<div id='rgwindow_temp_div'></div>");
+	
+	if(typeof settings.loadDiv!="undefined"){
+		dhtml = $rss("#"+settings.loadDiv).html();
+		$rss("#rgwindow_temp_div").html(dhtml).hide();
+		prepareWindow();
+	}
+	if(typeof settings.loadHtml!="undefined"){
+		dhtml = settings.loadHtml;
+		$rss("#rgwindow_temp_div").html(dhtml).hide();
+		prepareWindow();
+	}
+	if(typeof settings.loadPage!="undefined"){
+		$rss("#rgwindow_temp_div").load(settings.loadPage,function(){$rss(this).hide();dhtml=$rss(this).html();prepareWindow();});
+	}
+	function prepareWindow(){
+		if(tempheight!="auto")
+			rgWTop = (rgmaskHeight-tempheight)/2;
+		else{
+			tempheight=$rss("#rgwindow_temp_div").height()+30;
+			if(tempheight>maxheight)
+				tempheight=maxheight;
+			rgWTop=(rgmaskHeight-tempheight)/2;
+		}
+		if(tempwidth!="auto")
+			rgWLeft = (rgmaskWidth-tempwidth)/2;
+		else{
+			tempwidth=$rss("#rgwindow_temp_div").width();
+			if(tempwidth>maxwidth)
+				tempwidth=maxwidth;
+			rgWLeft=(rgmaskWidth-tempwidth)/2;
+		}
+		tempwidth=parseInt(tempwidth)+25;
+			$rss("#rgContent").empty();
+		$rss("#rgWindow").animate({"width":tempwidth+"px","height":tempheight+"px",top:rgWTop+"px", left:rgWLeft+"px"},500,function(){$rss("#rgContent").css("height",tempheight+"px").html(dhtml)});
+		$rss("#rgwindow_temp_div").remove();
+		}
+},
+modalWindowClose : function(callbackFn){
+	if($rss("#rgWindow").length>0){
+		$rss("#rgWindow").empty();
+		var rgmaskHeight = $rss(window).height();
+		var rgmaskWidth = $rss(window).width();
+		var x = (rgmaskHeight-20)/2;
+		var y = (rgmaskWidth-20)/2
+		$rss("#rgWindow").animate({top:x+"px", left:y+"px","width":"50px","height":"50px"},300,function(){$rss(this).fadeOut(100).remove();$rss("#rgsheath").fadeOut(500).remove();})
+	}
+		if(typeof callbackFn=="function")
+				callbackFn.call(this,"harry");
+},
+bindDomToHead :  function(dom){
+	var gc = dom.css("background");
+	var t = dom.offset();
+	var gw = dom.width();
+	$rss(window).scroll(function(){
+		var wt = $rss(window).scrollTop();
+		if ( wt > t.top ) {
+			var cssObj = { 
+				'position':'fixed',
+				'top':0,
+				'width':gw,
+				'background':gc,
+				'box-shadow':'0 1px 0 rgba(0,0,0,0.2)',
+				'z-index':99
+				}
+			dom.css(cssObj);
+		} else {
+			dom.attr('style',"");
+		}
+	});
+},
+progressBar : function(dom,settings){
+	var domid = dom.prop("id");
+	if($rss("#rss_progressbar_div_"+domid).length==0){
+		if(typeof settings.top == "undefined")
+			settings.value = 1;
+		if(typeof settings.top == "undefined")
+			settings.top = (dom.height()-12)/2;
+		dom.append("<div id='rss_progressbar_div_"+domid+"' style='display:none;padding: 2px;background: #333;background: -webkit-linear-gradient(#111, #333);background: -moz-linear-gradient(#111, #333);background: -ms-linear-gradient(#111, #333);position: absolute;top: "+settings.top+"px;left: 50%;margin-left: -45%;width: 84%;box-shadow: inset 0 0 2px #000;border-radius: 4px;'><div id='rss_progressbar_"+domid+"' style='height: 8px;	background: #36c;background: -webkit-linear-gradient(#7A98E7, #36c);background: -moz-linear-gradient(#7A98E7, #36c);background: -ms-linear-gradient(#7A98E7, #36c);border-radius: 2px; width: "+settings.value+"%;'></div></div>");
+		$rss("#rss_progressbar_div_"+domid).fadeIn(500);
+	}
+},
+progressBarValue : function(dom,value){
+	var domid = dom.prop("id");
+	if($rss("#rss_progressbar_div_"+domid).length==1){
+		$rss("#rss_progressbar_"+domid).animate({"width":value+"%"},100);
+		
+	}
+},
+progressBarClose : function(dom){
+	var domid = dom.prop("id");
+	$rss("#rss_progressbar_div_"+domid).fadeOut(500,function(){$(this).remove();});
+},
+getInternetExplorerVersion: function(){
+   var rv = -1; // Return value assumes failure.
+   if (navigator.appName == 'Microsoft Internet Explorer')
+   {
+      var ua = navigator.userAgent;
+      var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+      if (re.exec(ua) != null)
+         rv = parseFloat( RegExp.$1 );
+   }
+   return rv;
+   }
+}
+$ = jQuery.noConflict();

app/assets/javascripts/upload.js

@@ -0,0 +1,39 @@
+//https://github.com/blueimp/jQuery-File-Upload
+
+$(function () {
+
+    'use strict';
+    // Initialize the jQuery File Upload widget:
+    $('#fileupload').fileupload({
+        acceptFileTypes:/(\.|\/)(jpe?g|png)$/i,
+        headers:{
+            'X-CSRF-Token': $('meta[name="csrf-token"]').attr("content")
+        }
+    });
+	$('#fileupload').bind("fileuploadadd",function(e,data){$(".fileupload-content").css("background-image","none");})
+    // Load existing files:
+/*    $.getJSON($('#fileupload form').prop('action'),{albumid:pagevars['id']}, function (files) {
+        var fu = $('#fileupload').data('fileupload');
+        fu._adjustMaxNumberOfFiles(-files.length);
+        fu._renderDownload(files)
+            .appendTo($('#fileupload .files'))
+            .fadeIn(function () {
+                // Fix for IE7 and lower:
+                $(this).show();
+            });
+    });
+*/
+    // Open download dialogs via iframes,
+    // to prevent aborting current uploads:
+    $('#fileupload .files').delegate(
+        'a:not([target^=_blank])',
+        'click',
+        function (e) {
+            e.preventDefault();
+            $('<iframe style="display:none;"></iframe>')
+                .prop('src', this.href)
+                .appendTo('body');
+        }
+    );
+
+});

app/assets/stylesheets/filter.css

@@ -0,0 +1,84 @@
+/* Filter */
+#filter.open {
+  border-bottom: none;
+  padding-bottom: 10px; 
+}
+#filter .filter-nav {
+  margin-bottom: 0px;
+}
+#filter.open .filter-nav {
+  margin-bottom: 10px;
+}
+#filter .filter-nav a {
+  text-decoration: none;
+}
+#filter .filter-nav .accordion-group {
+  border: none;
+}
+#filter .filter-nav .accordion-group.active {
+  background-color: #08c;
+  position: relative;
+}
+#filter .filter-nav .accordion-group.active a {
+  color: #FFF;
+}
+#filter .filter-nav .accordion-group.active:after {
+  display: block;
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  bottom: -12px;
+  left: 50%;
+  margin-left: -5px;
+  content: "";
+  border-style: solid;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent #e5e5e5 transparent;
+  z-index: 5
+}
+#filter .filter-group {
+  clear: both;
+  border: none;
+  margin-bottom: 0px;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+       -o-border-radius: 4px;
+          border-radius: 4px;
+}
+#filter .filter-group .accordion-body {
+  background-color: #e5e5e5;
+  border-radius: 3px;
+}
+#filter .filter-group .accordion-body .filter-clear {
+  padding: 4px;
+  border-top: 1px solid #D5D5D5;
+  text-align: right;
+  -webkit-box-shadow: inset 0px 1px 0px #ECECEC;
+     -moz-box-shadow: inset 0px 1px 0px #ECECEC;
+       -o-box-shadow: inset 0px 1px 0px #ECECEC;
+          box-shadow: inset 0px 1px 0px #ECECEC;
+}
+#filter .filter-group .accordion-body .filter-clear a {
+  text-decoration: none;
+}
+#filter .filter-group .collapse.in {
+}
+#filter .filter-group .accordion-inner {
+  padding: 8px 8px 5px;
+  /*margin-top: 10px;*/
+}
+#filter .filter-group .accordion-inner > .btn {
+  margin-bottom: 3px;
+}
+
+
+/* Responsive */
+@media (max-width: 480px) {
+  /* Filter */
+  #filter .filter-nav {
+    float: left;
+  }
+  #filter .accordion-inner.pagination-right {
+    text-align: left;
+  }
+}

app/assets/stylesheets/gallery.css

@@ -0,0 +1,521 @@
+#orbit_gallery {
+	margin: 0;
+	padding: 0 0 10px;
+	list-style: none;
+}
+#orbit_gallery .rgalbum {
+	margin: 5px;
+	padding: 10px;
+	width: 200px;
+	background: #FFFFFF;
+	-webkit-transition-property: left, right, top;
+	   -moz-transition-property: left, right, top;
+		-ms-transition-property: left, right, top;
+		 -o-transition-property: left, right, top;
+			transition-property: left, right, top;
+}
+#orbit_gallery .rgalbum:hover {
+	box-shadow: 0px 0px 5px rgba(0,0,0,.2);
+}
+#orbit_gallery .rgalbum > a {
+	position: relative;
+	display: block;
+	overflow: hidden;
+	margin: 0 0 10px;
+	width: 200px;
+	height: 200px;
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#orbit_gallery .rgalbum a img {
+	max-width: none;
+}
+#orbit_gallery .rgalbum:hover a img {
+	-webkit-filter: blur(2px);
+}
+#orbit_gallery .rgalbum > a:after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: block;
+	margin: 0;
+	background-color: #000000;
+	opacity: .0;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#orbit_gallery .rgalbum:hover a:after {
+	opacity: .4;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+	filter: alpha(opacity=40);
+}
+#orbit_gallery .rgalbum a .albumname {
+	position: absolute;
+	bottom: 0;
+	margin: 0;
+	padding: 10px;
+	color: #F2F2F2;
+	text-shadow: 0px -1px 0 rgba(0,0,0,0.4);
+	letter-spacing: -0.5px;
+	font-size: 30px;
+	font-family: 'Playfair Display SC', sans-serif;
+	line-height: 28px;
+	z-index: 1;
+	opacity: .0;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#orbit_gallery .rgalbum:hover a .albumname {
+	opacity: 1;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=100);
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#orbit_gallery .rgalbum .gallery_info {
+	margin: 0;
+	list-style: none;
+}
+#orbit_gallery .rgalbum .gallery_info li {
+	display: inline-block;
+	float: left;
+	color: #777777;
+	font-size: 1.2em;
+	line-height: 20px;
+	cursor: pointer;
+}
+#orbit_gallery .rgalbum .gallery_info li > a {
+	display: inline-block;
+	margin-left: 5px;
+	color: #777777;
+}
+#orbit_gallery .rgalbum .gallery_info li:hover > a {
+	color: #E41B2B;
+	text-decoration: none;
+}
+#orbit_gallery .rgalbum .gallery_info li:hover {
+	color: #0088CC;
+}
+#orbit_gallery .rgalbum .gallery_info li .icons-tag {
+	margin-left: 3px;
+}
+#orbit_gallery .rgalbum .gallery_info li.albumcateg {
+	float: right;
+	overflow: hidden;
+	max-width: 125px;
+	text-align: right;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+#orbit_gallery .rgalbum .gallery_info li.view {
+	overflow: hidden;
+	max-width: 50px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+#orbit_gallery .rgalbum .albumtag {
+	display: none;
+	overflow: hidden;
+	margin: 0;
+}
+
+
+/* Gallery Body */
+.rgbody .gallery-info {
+	padding: 0 5px;
+}
+.rgbody .gallery-info h3 {
+	margin: 5px 0 0;
+	color: #333;
+	text-shadow: 0 1px 0 #ffffff;
+	font-family: 'Playfair Display SC', sans-serif;
+}
+.rgbody .gallery-info .muted {
+	font-family: 'Raleway', sans-serif;
+}
+
+#imgholder {
+	margin: 0;
+	padding: 0 0 10px;
+	list-style: none;
+}
+#imgholder .rgalbum {
+	position: relative;
+	float: left;
+	margin: 5px;
+	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;
+		 -o-transition-property: left, right, top;
+			transition-property: left, right, top;
+}
+#imgholder .rgalbum.active {
+	background-color: #51a351;
+}
+#imgholder .rgalbum.active-single {
+	background-color: #F89406;
+}
+#imgholder .rgalbum .photo-action {
+	margin: 0;
+	list-style: none;
+	left: 5px;
+	right: 5px;
+	height: 0;
+	position: absolute;
+	background-color: #FFF;
+	bottom: 5px;
+	opacity: .9;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+	filter: alpha(opacity=90);
+    -webkit-transition: all .2s linear;
+       -moz-transition: all .2s linear;
+         -o-transition: all .2s linear;
+            transition: all .2s linear;
+}
+#imgholder .rgalbum:hover .photo-action {
+	padding: 5px;
+	height: 30px;
+}
+#imgholder .rgalbum .photo-action li {
+	display: inline-block;
+	float: left;
+	color: #777;
+	font-size: 11px;
+	line-height: 30px;
+	cursor: pointer;
+	width: 33%;
+	text-align: center;
+	font-size: 1.2em;
+}
+#imgholder .rgalbum .photo-action a {
+	color: #777;
+	display: block;
+	text-decoration: none;
+	width: 100%;
+	height: 100%;
+}
+#imgholder .rgalbum .photo-action li:hover a {
+	color: #08C;
+}
+#imgholder .rgalbum .photo-action .icons-star {
+	color: #F8A900;
+	font-size: 1.4em;
+	line-height: 1.4em;
+}
+#imgholder .rgalbum a {
+	display: block;
+	overflow: hidden;
+	margin: 0;
+	width: 200px;
+	height: 200px;
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+		 -o-transition: all .2s linear;
+			transition: all .2s linear;
+}
+#imgholder .rgalbum a img {
+	max-width: none;
+}
+
+#imgholder .rgalbum .check {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 40px;
+	height: 40px;
+}
+#imgholder .rgalbum .check:after {
+	font-family: FontAwesome;
+	font-weight: normal;
+	font-style: normal;
+	color: #F2F2F2;
+	text-decoration: inherit;
+	content: "\f00c";
+	line-height: 25px;
+	text-indent: 20px;
+	font-size: 1.3em;
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 0px;
+	height: 0px;
+	border-style: solid;
+	border-width: 0 40px 40px 0;
+	border-color: transparent #FFF transparent transparent;	
+}
+#imgholder .rgalbum.active .check:after {
+	color: #FFF;
+	border-color: transparent #51a351 transparent transparent;
+}
+#imgholder .rgalbum.active-single .check:after {
+	color: #FFF;
+	border-color: transparent #F89406 transparent transparent;
+}
+#imgholder .rgalbum input[type="checkbox"] {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 3;
+	display: block;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+	opacity: 0;
+}
+
+/* Page Silde */
+#view-photo-tags .phtot-tags {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+#view-photo-tags .phtot-tags li {
+	margin: 0 5px 5px 0;
+	white-space: nowrap;
+}
+
+/* Dialog */
+.modal-body {
+	min-height: 80px;
+	line-height: 80px;
+	text-align: center;
+}
+.modal-body .spinning {
+	display: none;
+	position: absolute;
+	width: 70px;
+	height: 70px;
+	top: 50%;
+	left: 50%;
+	margin: -35px 0 0 -35px;
+}
+
+/* File Upload */
+#upload-panel {
+	clear: both;
+}
+#upload-panel iframe {
+	width: 100%;
+	border: none;
+}
+#fileupload {
+	position: relative;
+	display: none;
+	clear: both;
+	overflow: hidden;
+	margin: 40px 0 15px;
+	height: 254px;
+	border: 1px solid #d4d4d4;
+	border-radius: 4px;
+	background-color: #FDFDFD;
+	/*-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .15) inset;
+			box-shadow: 0px 0px 10px rgba(0, 0, 0, .15) inset;*/
+}
+#fileupload table {
+	margin: 0;
+}
+#fileupload .fileupload-buttonbar .navbar {
+	margin-bottom: 0;
+}
+#fileupload .fileupload-buttonbar .navbar .add-photo {
+	border: none;
+	border-right: 1px solid #d4d4d4;
+	background-color: transparent;
+	padding: 10px 15px 10px;
+	color: #777777;
+	text-decoration: none;
+	text-shadow: 0 1px 0 #ffffff;
+}
+#fileupload .fileupload-buttonbar .navbar .add-photo:hover {
+	color: #333333;
+	text-decoration: none;
+	background-color: #EDEDED;
+}
+#fileupload .fileupload-buttonbar .navbar .fileinput-button {
+	position: relative;
+	overflow: hidden;
+}
+#fileupload .fileupload-buttonbar .navbar .fileinput-button input {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 0;
+	font-size: 23px;
+	opacity: 0;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	cursor: pointer;
+	-webkit-transform: translate(-300px, 0) scale(4);
+	   -moz-transform: translate(-300px, 0) scale(4);
+		-ms-transform: translate(-300px, 0) scale(4);
+		 -o-transform: translate(-300px, 0) scale(4);
+			transform: translate(-300px, 0) scale(4);
+	direction: ltr;
+}
+#fileupload .fileupload-buttonbar .navbar-inner {
+	border-width: 0 0 1px;
+	border-radius: 4px 4px 0 0;
+	padding: 0;
+}
+
+#fileupload .fileupload-progress .progress {
+	position: absolute;
+	right: 0;
+	left: 0;
+	margin-bottom: 0;
+	height: 5px;
+	border-radius: 0;
+	background-color: transparent;
+	background-image: none;
+}
+#fileupload .fileupload-progress .progress-success.progress-striped .bar {
+	background-color: #0088CC;
+}
+#fileupload .fileupload-progress .progress-extended {
+	position: absolute;
+	top: 1px;
+	right: 0;
+	padding-right: 15px;
+	color: #0088CC;
+	text-align: right;
+	text-shadow: 0 1px 0 #ffffff;
+	letter-spacing: -0.1em;
+	font-size: 12px;
+	font-family: 'Varela Round', sans-serif;
+	line-height: 40px;
+}
+#fileupload .fileupload-buttonbar {
+	position: relative;
+	z-index: 3;
+}
+#fileupload #dropzone {
+	margin: 15px 10px 10px;
+	padding: 30px;
+	text-align: center;
+	font-size: 2em;
+	font-family: 'Raleway';
+	line-height: 1.2em;
+	color: #e4e4e4;
+}
+#fileupload #dropzone div[data-icons] {
+	font-size: 4em;
+	height: 70px;
+	padding-top: 30px;
+	text-shadow: 0px -1px 0px #ececec;
+	color: #f5f5f5;
+}
+#fileupload #dropzone.drop {
+	position: absolute;
+	top: 37px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border: 2px dashed #0088CC;
+	border-radius: 10px;
+	color: #0088CC;
+	background-color: #FFFFFF;
+	z-index: 0;
+}
+#fileupload #dropzone.fade {
+	opacity: .3;
+}
+#fileupload #dropzone.in {
+	opacity: .7;
+	z-index: 2;
+	border-color: #faa732;
+	color: #faa732;
+}
+#fileupload #dropzone.drop div[data-icons] {
+	text-shadow: 0px -1px 0px #0c5f80;
+	color: #0088CC;
+}
+#fileupload #dropzone.in div[data-icons] {
+	text-shadow: 0px -1px 0px #a28a10;
+	color: #faa732;
+}
+#fileupload #file-list {
+	position: relative;
+	z-index: 1;
+	height: 209px;
+	margin: 2px 0;
+}
+#fileupload #file-list .pane {
+	margin-right: 2px;
+}
+#fileupload #file-list .files {
+	margin: 0;
+	padding: 10px 14px 10px 10px;
+	list-style: none;
+}
+#fileupload #file-list .files > li {
+	padding: 10px;
+}
+#fileupload #file-list .files > li:nth-child(even) {
+	background-color: #e9e9e9;
+	border-radius: 3px;
+}
+#fileupload #file-list .files ul {
+	position: relative;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+#fileupload #file-list .files ul li {
+	float: left;
+}
+#fileupload #file-list .files ul li.action-bnt {
+	float: right;
+}
+#fileupload #file-list .preview {
+	width: 80px;
+	min-height: 1px;
+	margin-right: 10px;
+	text-align: center;
+}
+#fileupload #file-list .name {
+	width: 150px;
+	max-width: 250px;
+	margin-left: 15px;
+}
+#fileupload #file-list .progress {
+	position: absolute;
+	left: -5px;
+	right: -5px;
+	bottom: -5px;
+	margin-bottom: 0;
+	height: 5px;
+	box-shadow: none;
+	background-color: transparent;
+	background-image: none;
+}
+#fileupload #file-list .size {
+	width: 80px;
+}
+#fileupload #file-list .action-bnt {
+	text-align: right;
+}

app/assets/stylesheets/gallery_frontend.css

@@ -0,0 +1,332 @@
+.rg, .rgp {
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+}
+.rg input, .rgp input, .rg textarea, .rgp textarea { 
+	resize: none;
+	margin: 0;
+	display: block;
+	font-size: 13px;
+	}
+.rgp textarea { overflow: auto; }
+.rg a, .rgp a {
+	text-decoration: none;
+	outline: none;
+	}
+.rg a:hover {  }
+
+/*.rg img { display: block; border: none; }*/
+	
+.rgmask { background: #000; width: 100%; position: fixed; top: 0; left: 0; }
+
+.rgui { 
+	display: inline-block;
+	cursor: pointer;
+	}
+.rghead,  .rgbody { overflow: hidden; }
+.rghead {
+	padding: 10px 0;
+	}
+.rgtitle {
+	color: #333;
+	text-shadow: 0 1px 0 #ddd;
+	font-size: 2em;
+	padding: 0 8px;
+	}
+.rgbody {
+	
+	}
+.rgfn { overflow: hidden; }
+.rgalbum, .rgphoto { float: left; margin: 0 10px 24px 0; }
+.rgalbum {
+	margin: 0 16px 16px 0;
+	padding: 6px;
+	width: 138px;
+	height: 220px;
+	border: solid 1px #ccc;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+}
+.rgalbum > a {
+	display: block;
+	float: none;
+	margin: -6px -6px 0 -6px;
+}
+.rgalbum img {		
+	transition: all, 0.5s ease;
+	-webkit-transition: all, 0.5s ease;
+	-moz-transition: all 0.5s ease;
+	-ms-transition: all, 0.5s ease;
+	}
+.rgphoto {  }
+.rgphoto a {
+	display: block;
+
+	transition: all, 0.3s ease;
+	-webkit-transition: all, 0.3s ease;
+	-moz-transition: all, 0.3s ease;
+}
+.rgphoto a:hover img { 
+	opacity: 0.85;
+}
+.rgphoto img, .rgphoto_edit img { 
+	/*display: block;*/
+
+	transition: all, 0.3s ease;
+	-webkit-transition: all, 0.3s ease;
+	-moz-transition: all, 0.3s ease;
+	}
+.rgalbum .albumname {
+	font-size: 1.25em;
+	/*line-height: ;*/
+	margin: 6px 0;
+	display: block;
+	height: 45px;
+	overflow: hidden;
+	transition: background 0.3s ease;
+	-webkit-transition: background 0.3s ease;
+	-moz-transition: background 0.3s ease;
+	-ms-transition: background 0.3s ease;
+	}
+.rgalbum a:hover img { 
+	opacity: 0.85;
+	}
+.rgalbum .categoryname {}
+.rgalbum .tagnames {
+	display: block;
+	margin-top: 8px;
+	padding-top: 8px;
+	line-height: 22px;
+	height: 22px;
+	overflow: hidden;
+	border-top: solid 1px #ccc;
+	color: #666;
+}
+
+.taglist {
+	padding: 10px 0;
+}
+.taglist_title {
+	font-size: 1.5em;
+	margin: 0 0 10px 0;
+}
+.taglist ul {
+	padding: 10px 0;
+	border-top: solid 1px #ddd;
+	overflow: hidden;
+}
+.taglist li {
+	float: left;
+	margin: 0 8px 8px 0;
+}
+
+.rgp .rgtitle { margin: 0 0 10px 0; }
+
+
+/* Ruling Slide */
+.rslide {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: #222;
+	clear: both;
+	/*z-index: 99;*/
+	min-height: 250px;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	}
+.rslide.fullscreen { position: fixed; z-index: 99; }
+.rslide.fullscreen .comp img{
+	width: auto;
+}
+.rslideinside {
+	}
+.comp  {
+	width: 100%;
+	height: auto;
+	overflow: hidden;
+	position: relative;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	}
+.comp img{ display: block; width: 100%; height: auto; margin: 0 auto; cursor: pointer; min-height: 250px; }
+.comp .full{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
+.rslidenav { 
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	margin-top: -35px;
+	}
+.rslidenav a {
+	position: absolute;
+	display: block;
+	width: 30px;
+	height: 40px;
+	overflow: hidden;
+	text-indent: -999px;
+	background: #000 0 center url(../../../assets/gallery/slidenav.png) no-repeat;
+	background: rgba(0,0,0,0.9) 0 0 url(../../../assets/gallery/slidenav.png) no-repeat;
+	
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	}
+.rslidenav a:hover { 
+	background-color: #fff;
+	background-color: rgba(255,255,255,0.9);
+	}
+.rslidenav .navP { left: 0; border-radius: 0 4px 4px 0; background-position: 0 -40px; }
+.rslidenav .navN { right: 0; border-radius: 4px 0 0 4px; background-position: -30px 0; }
+.rslidenav a.navP:hover  { background-position: -30px -40px; }
+.rslidenav a.navN:hover  { background-position: 0 0; }
+.slidectrl {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 30px;
+	background: #000 left top url(../../../assets/gallery/slidetitlebg.png) repeat-x;
+	background: rgba(0,0,0,0.9) left top url(../../../assets/gallery/slidetitlebg.png) repeat-x;
+	/*z-index: 999;*/
+	}
+.slidectrl a {
+	display: block;
+	float: right;
+	text-indent: -9999px;
+	overflow: hidden;
+	width: 30px;
+	height: 30px;
+	background: transparent 0 0 url(../../../assets/gallery/slideui.gif) no-repeat;
+	border-left: solid 1px #222;
+	}
+.slidectrl a.togglelist { background-position: 0 -30px; }
+.slidectrl a.togglescreen { background-position: 0 -90px; }
+.slidectrl a.toinline { background-position: -30px 0; }
+.slidectrl a.sharebt { background-position: -30px -30px; }
+.slidectrl a.browserfullscreen { display:none;}
+.slidectrl a.slidestop { background-position: 0 -60px; }
+.fullscreen .slidectrl a.togglescreen { background-position: -30px -90px; }
+.browserFullScreen .slidectrl a.browserfullscreen { background-position: -30px 0; }
+.browserFullScreen .togglescreen { display: none; }
+.slideinfo {
+	height: 30px;
+	line-height: 30px;
+	color: #fff;
+	font-size: 13px;
+	overflow: hidden;
+	}
+.slideinfo .info { padding: 0 0 0 6px; text-transform: uppercase; }
+.slideinfo span.info { color: #ccc; text-transform: none; }
+
+.slidelist {
+	position: absolute;
+	bottom: 30px;
+	z-index: 98;
+	width: 100%;
+	height: 0;
+	overflow: auto;
+	overflow-x: hidden;
+	background: transparent 0 0 url(../../../assets/gallery/slidelistbg.png);
+	}
+.slidelist ul { 
+	margin: 0 auto;
+	padding: 10px 0 10px 10px;
+	list-style: none;
+	}
+.slidelist li {
+	display: inline-block;
+	margin: 0 10px 10px 0;
+	}
+.slidelist a {
+	border: solid 2px #fff;
+	display: block;
+	width: 120px;
+	height: 96px;
+	position: relative;
+	
+	box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-ms-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	}
+.slidelist a.playall {
+	border: none;
+	width: 80px;
+	height: 32px;
+	margin: 31px 0 0 22px;
+	background: transparent 0 0 url(../../../assets/gallery/playall.png) no-repeat;
+	
+	box-shadow: none;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	-ms-box-shadow: none;
+	}
+.slidelist a.playall:hover { background-position: 0 -32px; }
+#li_play_all { width: 124px; height: 94px; }
+.slidelist img { 
+	margin: 0;
+	background: #fff;
+	display: block;
+	
+	transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;
+	}
+.slidelist a:hover img {
+	padding: 4px;
+	margin: -4px;
+	}
+
+.dm {
+	background: #fff;
+	border: solid 1px #a4a4a4;
+	border-right-color: #666;
+	position: absolute;
+	overflow: hidden;
+	padding: 2px 0;
+	display: none;
+	
+	border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	-ms-border-radius: 4px;
+	}
+.dm ul { margin: 0; padding: 0; list-style: none !important; }
+.dm li { 
+	margin: 0;
+	padding: 0;
+	border-bottom: solid 1px #ccc;
+	list-style: none !important;
+	}
+.dm li a {
+	display: block;
+	padding: 6px 10px;
+	font-size: 13px;
+	
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	}
+.dm li a:hover { background: #eee; }
+
+
+
+/* orbit style implementation */
+#orbit_gallery {
+	margin: 0 -10px 30px -10px;
+}

app/assets/stylesheets/gallery_old.css

@@ -0,0 +1,564 @@
+.rg, .rgp {
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+}
+.rg input, .rgp input, .rg textarea, .rgp textarea { 
+	resize: none;
+	margin: 0;
+	display: block;
+	font-size: 13px;
+	}
+.rgp textarea { overflow: auto; }
+.rg a, .rgp a {
+	text-decoration: none;
+	outline: none;
+	}
+.rg a:hover {  }
+
+/*.rg img { display: block; border: none;}*/
+	
+.rgmask { background: #000; width: 100%; position: fixed; top: 0; left: 0; }
+
+.rgui { 
+	display: inline-block;
+	cursor: pointer;
+	}
+.rghead,  .rgbody { overflow: hidden; }
+.rghead {
+	border-bottom: solid 1px #ccc;
+	padding: 10px 0;
+	background: #fff;
+	}
+.rgtitle {
+	color: #333;
+	text-shadow: 0 1px 0 #ddd;
+	font-size: 2em;
+	padding: 0 8px;
+	}
+.rgbody {
+	
+	}
+.rgfn { overflow: hidden; padding: 4px 10px; }
+.rgalbum, .rgphoto { float: left; margin: 0 10px 24px 0; }
+.rgalbum {
+	padding: 16px;
+	margin: 0 8px 8px 0;
+	border: solid 1px #ccc;
+	width: 300px;
+	height: 120px;
+	border-radius: 4px;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+}
+.rgalbum > a {
+	display: block;
+	float: left;
+	margin-right: 10px;
+}
+.rgalbum:hover {
+	box-shadow: 0 0 6px rgba(0,0,0,0.2);
+}
+.rgalbum img {		
+	transition: all, 0.5s ease;
+	-webkit-transition: all, 0.5s ease;
+	-moz-transition: all 0.5s ease;
+	-ms-transition: all, 0.5s ease;
+	}
+.rgphoto {  }
+.rgphoto a {
+	display: block;
+	padding: 4px;
+	border: solid 1px #ddd;
+	background-color: #fff;
+	border-radius: 4px;
+	transition: all, 0.3s ease;
+	-webkit-transition: all, 0.3s ease;
+	-moz-transition: all, 0.3s ease;
+}
+.rgphoto a:hover { 
+	border-color: #999;
+	box-shadow: 0 3px 6px rgba(0,0,0,0.2); 
+}
+.rgphoto img, .rgphoto_edit img { 
+	/*display: block;*/
+	border-radius: 3px;
+	transition: all, 0.3s ease;
+	-webkit-transition: all, 0.3s ease;
+	-moz-transition: all, 0.3s ease;
+	}
+.rgalbum .albumname {
+	font-size: 18px;
+	padding: 6px 0;
+	display: block;
+	transition: background 0.3s ease;
+	-webkit-transition: background 0.3s ease;
+	-moz-transition: background 0.3s ease;
+	-ms-transition: background 0.3s ease;
+	}
+.rgalbum a:hover img { 
+	opacity: 0.85;
+	}
+
+.rgp .rgtitle { margin: 0 0 10px 0; }
+
+/* Photo Edit */
+.albumname_edit label, .albumname_edit .rginput, .rgphoto_edit > a, .rgphoto_edit .rginput { float: left; }
+.rgphoto_edit, .albumname_edit {
+	clear: both;
+	overflow: hidden;
+	margin-bottom: 10px;
+}
+.albumname_edit label { 
+	width: 150px;
+	margin: 0 10px 0 0;
+	text-align: right;
+	padding: 0;
+	line-height: 24px;
+}
+.albumname_edit .rginput {  }
+.rgphoto_edit img { margin: 0 10px 10px 0; }
+.rgphoto_edit .rginput { margin-right: 10px; }
+.rgphoto_edit .edit_fn { float: left; margin-bottom: 10px; }
+.rgphoto_edit .edit_fn .bt-dels { }
+
+/* Delete List */
+.rglist { overflow: hidden; padding: 10px 0; }
+.list { table-layout:fixed; width: 100%; margin: 0 0 12px 0; }
+.list thead th { padding: 8px 4px; font-size: 30px; font-weight: bold; }
+.list th img { width: 60px; height: 45px; }
+.list .photoname { padding-left: 6px; }
+.list .photofn { padding-right: 4px; }
+.list .photofn a { float: right; margin-left: 4px; display: block; }
+.list th { padding: 4px 0 4px 4px; }
+.list tbody th, .list tbody td { border-bottom: solid 1px #ccc; }
+.list .odd th, .list .odd td { background: #f6f6f6; } 
+.list .c1 { width: 64px; }
+.list .c3 { width: 40px; }
+
+/* Ruling Slide */
+.rslide {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: #222;
+	clear: both;
+	/*z-index: 99;*/
+	min-height: 250px;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	}
+.rslide.fullscreen { position: fixed; z-index: 99; }
+.rslideinside {
+	/*
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	*/
+	}
+.comp  {
+	width: 100%;
+	height: auto;
+	overflow: hidden;
+	position: relative;
+
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	}
+.comp img{ display: block; width: auto; height: auto; margin: 0 auto; cursor: pointer; min-height: 250px; }
+.comp .full{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
+.rslidenav { 
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	margin-top: -35px;
+	}
+.rslidenav a {
+	position: absolute;
+	display: block;
+	width: 30px;
+	height: 40px;
+	overflow: hidden;
+	text-indent: -999px;
+	background: #000 0 center url(../../../assets/gallery/slidenav.png) no-repeat;
+	background: rgba(0,0,0,0.9) 0 0 url(../../../assets/gallery/slidenav.png) no-repeat;
+	
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	}
+.rslidenav a:hover { 
+	background-color: #fff;
+	background-color: rgba(255,255,255,0.9);
+	}
+.rslidenav .navP { left: 0; border-radius: 0 4px 4px 0; background-position: 0 -40px; }
+.rslidenav .navN { right: 0; border-radius: 4px 0 0 4px; background-position: -30px 0; }
+.rslidenav a.navP:hover  { background-position: -30px -40px; }
+.rslidenav a.navN:hover  { background-position: 0 0; }
+.slidectrl {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 30px;
+	background: #000 left top url(../../../assets/gallery/slidetitlebg.png) repeat-x;
+	background: rgba(0,0,0,0.9) left top url(../../../assets/gallery/slidetitlebg.png) repeat-x;
+	/*z-index: 999;*/
+	}
+.slidectrl a {
+	display: block;
+	float: right;
+	text-indent: -9999px;
+	overflow: hidden;
+	width: 30px;
+	height: 30px;
+	background: transparent 0 0 url(../../../assets/gallery/slideui.gif) no-repeat;
+	border-left: solid 1px #222;
+	}
+.slidectrl a.togglelist { background-position: 0 -30px; }
+.slidectrl a.togglescreen { background-position: 0 -90px; }
+.slidectrl a.toinline { background-position: -30px 0; }
+.slidectrl a.sharebt { background-position: -30px -30px; }
+.slidectrl a.browserfullscreen { display:none;}
+.slidectrl a.slidestop { background-position: 0 -60px; }
+.fullscreen .slidectrl a.togglescreen { background-position: -30px -90px; }
+.browserFullScreen .slidectrl a.browserfullscreen { background-position: -30px 0; }
+.browserFullScreen .togglescreen { display: none; }
+.slideinfo {
+	height: 30px;
+	line-height: 30px;
+	color: #fff;
+	font-size: 13px;
+	overflow: hidden;
+	}
+.slideinfo .info { padding: 0 0 0 6px; text-transform: uppercase; }
+.slideinfo span.info { color: #ccc; text-transform: none; }
+
+.slidelist {
+	position: absolute;
+	bottom: 30px;
+	z-index: 99;
+	width: 100%;
+	height: 0;
+	overflow: auto;
+	overflow-x: hidden;
+	background: transparent 0 0 url(../../../assets/gallery/slidelistbg.png);
+	}
+.slidelist ul { 
+	margin: 0 auto;
+	padding: 10px 0 10px 10px;
+	list-style: none;
+	}
+.slidelist li {
+	display: inline-block;
+	margin: 0 10px 10px 0;
+	}
+.slidelist a {
+	border: solid 2px #fff;
+	display: block;
+	width: 150px;
+	height: 120px;
+	position: relative;
+	
+	box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	-ms-box-shadow: 0 0 6px rgba(0,0,0,0.7);
+	}
+.slidelist a.playall {
+	border: none;
+	width: 80px;
+	height: 32px;
+	margin: 31px 0 0 22px;
+	background: transparent 0 0 url(../../../assets/gallery/playall.png) no-repeat;
+	
+	box-shadow: none;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	-ms-box-shadow: none;
+	}
+.slidelist a.playall:hover { background-position: 0 -32px; }
+#li_play_all { width: 124px; height: 94px; }
+.slidelist img { 
+	margin: 0;
+	background: #fff;
+	display: block;
+	
+	transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;
+	}
+.slidelist a:hover img {
+	padding: 4px;
+	margin: -4px;
+	}
+
+.dm {
+	background: #fff;
+	border: solid 1px #a4a4a4;
+	border-right-color: #666;
+	position: absolute;
+	overflow: hidden;
+	padding: 2px 0;
+	display: none;
+	
+	border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	-ms-border-radius: 4px;
+	}
+.dm ul { margin: 0; padding: 0; list-style: none !important; }
+.dm li { 
+	margin: 0;
+	padding: 0;
+	border-bottom: solid 1px #ccc;
+	list-style: none !important;
+	}
+.dm li a {
+	display: block;
+	padding: 6px 10px;
+	font-size: 13px;
+	
+	transition: all 0.3s ease;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: all 0.3s ease;
+	-ms-transition: all 0.3s ease;
+	}
+.dm li a:hover { background: #eee; }
+
+/* Ruling Gallery UI */
+.rgbt {	
+	padding: 0 0 0 32px;
+	vertical-align: top;
+	
+	text-shadow: 0 1px 0 #fff;
+	-webkit-text-shadow: 0 1px 0 #fff;
+	-moz-text-shadow: 0 1px 0 #fff;
+	-ms-text-shadow: 0 1px 0 #fff;
+	}
+.rgbt span { 
+	padding: 0 12px 0 8px;
+	display: inline-block;
+	line-height: 30px;
+	height: 32px;
+	font-size: 14px;
+	}
+
+.rgbtsg {
+	padding: 6px;
+	}
+.rgphoto_edit .rgbtsg.active { display: inline-block; }
+.bt-finish { display: block; float: right; clear: both; }
+.bt-addnew {
+	margin: 0 auto;
+	width: 98px;
+	height: 100px;
+	display: block;
+	}
+.bt-next{ 
+	background-position: 0 -258px;
+	display: block;
+	float: right;
+	clear: both;
+	}
+.bt-next:hover { background-position: 0 -448px; }
+.bt-next:active { background-position: 0 -638px; }
+.bt-close {
+	position: absolute;
+	right: 6px;
+	top: 6px;
+	}
+
+
+.inputui {
+	margin: 0 0 8px 0;
+	}
+.inputui span {
+	padding: 0 4px 0 0;
+	display: block;
+	}
+.rginput { max-width: 400px; }
+.rginput input, .rginput textarea { color: #999; }
+.rginput.focus input, .rginput.focus textarea { color: #333; }
+
+.rgih26 { width: 208px; }
+.rgih26 span {  }
+.rgih26 input { width: 356px; }
+.rgih26.focus {  }
+.rgih26.focus span {  }
+.rgih68 { width: 396px; }
+.rgih68 span { padding: 3px 4px 3px 0; }
+.rgih68 textarea { width: 392px; height: 62px; }
+.rgih68.focus {  }
+.rgih68.focus span {  }
+.rgih98 { width: 396px; }
+.rgih98 span {  }
+.rgih98 textarea { width: 356px; height: 110px; }
+.rgih98.focus {  }
+.rgih98.focus span {  }
+
+.w380 { width: 386px; }
+
+#imgholder { overflow: hidden; }
+
+/* upload panel */
+#upload_panel_holder {
+	display: none;
+	margin: 16px 0 0 0;
+	clear: both;
+	float: right;
+	width: 100%;
+}
+#upload_panel {
+	background-color: #ddd;
+}
+
+/* tag panel */
+#tag_panel {
+	position: fixed;
+	right: -200px;
+	top: 31px;
+	width: 200px;
+	min-height: 100px;
+	border-left: solid 1px #ccc;
+	background-color: #fff;
+}
+#tag_panel .scrollbar {
+	right: 0px;
+	top: 0px;
+	width: 9px;
+}
+#tag_panel .viewport {
+	height: 100%;
+}
+
+.tag_list {
+	margin: 0;
+	padding: 0;
+}
+.tag_list li {
+	padding: 4px 6px;
+	border-top: solid 1px #f6f6f6;
+}
+.tag_list li:first-child {
+	border: 0;
+}
+.tag_list li:hover {
+	background-color: #08c;
+}
+.tag_list li:hover label {
+	color: #fff;
+}
+.tag_list input[type=checkbox], .tag_list label {
+	display: inline-block;
+	vertical-align: middle;
+	text-transform: capitalize;
+	margin: 0;
+}
+.tag_list label {
+	padding: 0 6px;
+}
+.tag_search {
+	position: absolute;
+	left: -1px;
+	bottom: -30px;
+	width: 200px;
+	height: 32px;
+	background-color: #f5f5f5;
+	border-left: solid 1px #ccc;
+	border-top: solid 1px #ddd;
+}
+.tag_search input[type=text] {
+	box-shadow: none;
+	width: 92px;
+	height: 25px;
+	line-height: 25px;
+	padding: 3px 6px 3px 24px;
+	border: 0;
+	border-top: solid 1px #fff;
+}
+.tag_search input[type=text]:focus {
+	background-color: #fff;
+}
+.tag_search .icon-search {
+	position: absolute;
+	left: 6px;
+	top: 50%;
+	margin-top: -7px;
+}
+#tag_panel .tag_save {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	height: 31px;
+	border-left: solid 1px #ccc;
+	background-color: #fff;
+	padding: 2px 4px 0 4px;
+}
+
+
+/* orbit style implementation */
+#orbit_gallery {
+	margin-bottom: 30px;
+}
+#orbit_gallery .nav-tabs, #orbit_gallery .tab-pane {
+	margin-left: 8px;
+	margin-right: 8px;
+}
+.tab_content .tab-pane{
+	display: none;
+}
+.tab_content .active{
+	display: block;
+}
+#orbit_gallery .btn { margin: 0; }
+#orbit_gallery .btn i { margin-right: 4px; }
+#orbit_gallery .rgfn .btn {
+	margin-left: 8px;
+}
+#orbit_gallery .form-actions { background-color: whiteSmoke; }
+
+.o_gallery .tagnames {
+	display: block;
+	margin-top: 6px;
+}
+.o_gallery .label-tags {
+	display: inline-block;
+	margin: 0 6px 6px 0;
+}
+
+.o_gallery .rgbody, .o_album .rgbody {
+	padding: 10px 8px;
+}
+
+#categories .add-album .control-label {
+	text-align: left;
+	width: 100px;
+	padding-left: 12px;
+	padding-right: 12px;
+}
+.o_album_edit form {
+	margin-left: 8px;
+}
+
+#loading{
+	background: #fff 0 center url("../../../assets/loading.gif") no-repeat;
+    height: 16px;
+    margin: auto;
+    width: 220px;
+}

app/assets/stylesheets/jquery-ui.css

@@ -0,0 +1,566 @@
+/*
+ * jQuery UI CSS Framework 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+/*
+ * jQuery UI Accordion 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Accordion#theming
+ */
+/* IE/Win - Fix animation bug - #4615 */
+.ui-accordion { width: 100%; }
+.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
+.ui-accordion .ui-accordion-li-fix { display: inline; }
+.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
+.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
+.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
+.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
+.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
+.ui-accordion .ui-accordion-content-active { display: block; }
+/*
+ * jQuery UI Autocomplete 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Autocomplete#theming
+ */
+.ui-autocomplete { position: absolute; cursor: default; }	
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+/*
+ * jQuery UI Menu 1.8.16
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Menu#theming
+ */
+.ui-menu {
+	list-style:none;
+	padding: 2px;
+	margin: 0;
+	display:block;
+	float: left;
+}
+.ui-menu .ui-menu {
+	margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+	margin:0;
+	padding: 0;
+	zoom: 1;
+	float: left;
+	clear: left;
+	width: 100%;
+}
+.ui-menu .ui-menu-item a {
+	text-decoration:none;
+	display:block;
+	padding:.2em .4em;
+	line-height:1.5;
+	zoom:1;
+}
+.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-menu .ui-menu-item a.ui-state-active {
+	font-weight: normal;
+	margin: -1px;
+}
+/*
+ * jQuery UI Button 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Button#theming
+ */
+.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
+.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
+button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
+.ui-button-icons-only { width: 3.4em; } 
+button.ui-button-icons-only { width: 3.7em; } 
+
+/*button text element */
+.ui-button .ui-button-text { display: block; line-height: 1.4;  }
+.ui-button-text-only .ui-button-text { padding: .4em 1em; }
+.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
+.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
+.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
+.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
+/* no icon support for input elements, provide padding by default */
+input.ui-button { padding: .4em 1em; }
+
+/*button icon element(s) */
+.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
+.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
+.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
+.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+
+/*button sets*/
+.ui-buttonset { margin-right: 7px; }
+.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
+
+/* workarounds */
+button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
+/*
+ * jQuery UI Datepicker 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Datepicker#theming
+ */
+.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
+.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
+.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
+.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
+.ui-datepicker .ui-datepicker-prev { left:2px; }
+.ui-datepicker .ui-datepicker-next { right:2px; }
+.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
+.ui-datepicker .ui-datepicker-next-hover { right:1px; }
+.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
+.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
+.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
+.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
+.ui-datepicker select.ui-datepicker-month, 
+.ui-datepicker select.ui-datepicker-year { width: 49%;}
+.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
+.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
+.ui-datepicker td { border: 0; padding: 1px; }
+.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
+.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
+.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi { width:auto; }
+.ui-datepicker-multi .ui-datepicker-group { float:left; }
+.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
+.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
+.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
+.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
+.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
+
+/* RTL support */
+.ui-datepicker-rtl { direction: rtl; }
+.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+
+/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
+.ui-datepicker-cover {
+    display: none; /*sorry for IE5*/
+    display/**/: block; /*sorry for IE5*/
+    position: absolute; /*must have*/
+    z-index: -1; /*must have*/
+    filter: mask(); /*must have*/
+    top: -4px; /*must have*/
+    left: -4px; /*must have*/
+    width: 200px; /*must have*/
+    height: 200px; /*must have*/
+}/*
+ * jQuery UI Dialog 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Dialog#theming
+ */
+.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
+.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
+.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
+.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
+.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; }
+/*
+ * jQuery UI Progressbar 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Progressbar#theming
+ */
+.ui-progressbar { height:2em; text-align: left; }
+.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }/*
+ * jQuery UI Resizable 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Resizable#theming
+ */
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*
+ * jQuery UI Selectable 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Selectable#theming
+ */
+.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
+/*
+ * jQuery UI Slider 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Slider#theming
+ */
+.ui-slider { position: relative; text-align: left; }
+.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
+.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
+
+.ui-slider-horizontal { height: .8em; }
+.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
+.ui-slider-horizontal .ui-slider-range-min { left: 0; }
+.ui-slider-horizontal .ui-slider-range-max { right: 0; }
+
+.ui-slider-vertical { width: .8em; height: 100px; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
+.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
+.ui-slider-vertical .ui-slider-range-max { top: 0; }/*
+ * jQuery UI Tabs 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Tabs#theming
+ */
+.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
+.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
+.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
+.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
+.ui-tabs .ui-tabs-hide { display: none !important; }
+/*
+ * jQuery UI CSS Framework 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ *
+ * To view and modify this theme, visit http://jqueryui.com/themeroller/
+ */
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
+.ui-widget .ui-widget { font-size: 1em; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
+.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
+.ui-widget-content a { color: #222222/*{fcContent}*/; }
+.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
+.ui-widget-header a { color: #222222/*{fcHeader}*/; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }
+.ui-widget :active { outline: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(images/ui-bg_glass_95_fef1ec_1x400.png)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
+.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
+.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
+.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }
+.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
+.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-off { background-position: -96px -144px; }
+.ui-icon-radio-on { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }
+
+/* Overlays */
+.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
+.ui-widget-shadow { margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; padding: 8px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityShadow}*/; -moz-border-radius: 8px/*{cornerRadiusShadow}*/; -khtml-border-radius: 8px/*{cornerRadiusShadow}*/; -webkit-border-radius: 8px/*{cornerRadiusShadow}*/; border-radius: 8px/*{cornerRadiusShadow}*/; }

app/assets/stylesheets/jquery.fileupload-ui.css

@@ -0,0 +1,168 @@
+@charset 'UTF-8';
+/*
+ * jQuery File Upload UI Plugin CSS 5.0.6
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2010, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://creativecommons.org/licenses/MIT/
+ */
+body { margin: 0; }
+#fileupload { position: relative; }
+#fileupload form { margin: 0; }
+.fileupload-buttonbar .ui-button input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  border: solid transparent;
+  border-width: 0 0 100px 200px;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -o-transform: translate(250px, -50px) scale(1);
+  -moz-transform: translate(-300px, 0) scale(4);
+  direction: ltr;
+  cursor: pointer;
+}
+
+.fileinput-button {
+  overflow: hidden;
+}
+
+/* Fix for IE 6: */
+/**html .fileinput-button {
+  padding: 2px 0;
+}*/
+
+/* Fix for IE 7: */
+/**+html .fileinput-button {
+  padding: 2px 0;
+}*/
+
+.fileupload-buttonbar {
+	height: 44px;
+	border-bottom: none;
+	background: transparent 0 0 url(../../../assets/gallery/uppt.png) repeat-x;
+	position: relative;
+	z-index: 9;
+	}
+
+.fileupload-buttonbar .ui-button {
+	vertical-align: middle;
+	font-size: 13px;
+	font-family: mako;
+	border: none;
+	margin: 0;
+	padding: 0;
+	background: none;
+	}
+.fileupload-buttonbar .ui-button .ui-button-text {
+	height: 40px;
+	line-height: 40px;
+	padding: 0 14px 0 26px;
+	background: transparent right center url(../../../assets/gallery/upsep.png) no-repeat;
+	text-shadow: 1px 1px 0 #fff;
+	}
+
+.fileupload-content {
+	border-top-width: 0;
+	height: 250px;
+	overflow: auto;
+	overflow-x:hidden;
+	background: #FAFAFA center center url(../../../assets/gallery/uploadbg.gif) no-repeat;
+	position: relative;
+	margin-top: -2px;
+	z-index: 2;
+	}
+
+.fileupload-content .ui-progressbar {
+	width: auto;
+	height: 18px;
+	}
+
+.fileupload-content .ui-progressbar-value {
+	background: url(../../../assets/gallery/pbar-ani.gif);
+	height: 16px;
+	margin: 0;
+	border-left: none;
+	border-right: none;
+	border-radius: 6px;
+	}
+.files .ui-progressbar-value { border: none; height: 18px; border-radius: 2px; }
+.fileupload-content .fileupload-progressbar {
+	width: 400px;
+	margin: -20px 0 0 -202px;
+	padding: 2px;
+	background: rgba(0,0,0,0.8);
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	border: 0;
+	border-radius: 4px;
+	box-shadow: 0 2px 3px rgba(0,0,0,0.4);
+	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
+	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
+	-ms-box-shadow: 0 2px 3px rgba(0,0,0,0.4);
+	}
+
+.files {
+  margin: 0;
+  border-collapse: collapse;
+  width: 100%;
+  table-layout:fixed;
+  font-family: mako;
+}
+
+.files td {
+	padding: 5px 4px;
+	border-spacing: 0;
+	font-size: 13px;
+	}
+
+.files img { border: none; width: 80px; }
+
+.files .name {  }
+
+.files .size {
+	text-align: right;
+	white-space: nowrap;
+	width: 100px;
+	}
+.files .preview { width: 88px; }
+/*.files .progress { width: ; }*/
+.files .start { width: 40px; }
+.files .cancel { width: 40px; }
+
+.ui-state-disabled .ui-state-disabled {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
+.ui-state-disabled input {
+  cursor: default;
+}
+.fileupload-buttonbar .ui-icon {
+	background: transparent center 0 url(../../../assets/gallery/upicon.png) no-repeat;
+	height: 16px;
+	margin: 0;
+	padding: 12px 0;
+	top: 0;
+	}
+.ui-icon.ui-icon-plusthick {}
+.ui-button:hover .ui-icon.ui-icon-plusthick { background-position: center -40px; }
+.ui-icon.ui-icon-circle-arrow-e { background-position: center -80px; }
+.ui-button:hover .ui-icon.ui-icon-circle-arrow-e { background-position: center -120px; }
+.ui-icon.ui-icon-cancel { background-position: center -160px; }
+.ui-button:hover .ui-icon.ui-icon-cancel { background-position: center -200px; }
+.ui-icon.ui-icon-trash { background-position: center -240px; }
+.ui-button:hover .ui-icon.ui-icon-trash { background-position: center -280px; }
+
+.files .ui-icon { background: transparent center 0 url(../../../assets/gallery/upicon.png) no-repeat; }
+.files .ui-icon.ui-icon-circle-arrow-e { background-position: center -91px; }
+.files .ui-button:hover .ui-icon.ui-icon-circle-arrow-e { background-position: center -131px; }
+.files .ui-icon.ui-icon-cancel { background-position: center -171px; }
+.files .ui-button:hover .ui-icon.ui-icon-cancel { background-position: center -211px; }
+.files .ui-icon.ui-icon-trash { background-position: center -251px; }
+.files .ui-button:hover .ui-icon.ui-icon-trash { background-position: center -291px; }

app/assets/stylesheets/widget_gallery.css

@@ -0,0 +1,70 @@
+.widget_gallery {
+	margin-bottom: 20px;
+}
+.widget_gallery:after {
+	display: table;
+	width: 100%;
+	content: '';
+}
+.widget_gallery ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.widget_gallery li a {
+	display: block;
+}
+.widget_gallery li a img {
+	height: auto;
+	display: block;
+}
+
+/* widget 1 */
+.w1 ul {
+	margin: 0 -1%;
+}
+.w1 li {
+	float: left;
+	margin: 1%;
+}
+.w1.c2 li { width: 48%; }
+.w1.c3 li { width: 31.3333%; }
+.w1.c4 li { width: 23%; }
+.w1.c5 li { width: 18%; }
+.w1.c6 li { width: 14.6666%; }
+.w1 li a {
+	-webkit-transition: opacity 0.3s ease;
+	   -moz-transition: opacity 0.3s ease;
+			transition: opacity 0.3s ease;
+}
+.w1 li a:hover {
+	opacity: 0.8;
+	position: relative;
+}
+.w1 li a img {
+	width: 100%;
+}
+
+/* widget 2 */
+.w2 li {
+	width: 100%;
+}
+.w2 li a img {
+	width: 100%;
+	height: auto;
+}
+.w2 li a {
+	position: relative;
+	overflow: hidden;
+	color: #fff;
+	text-transform: capitalize;
+}
+.w2 li a .desc {
+	position: absolute;
+	bottom: -60px;
+	opacity: 0;
+	display: block;
+	width: 100%;
+	padding: 5%;
+	background-color: rgba(8, 166, 255, 0.8);
+}

app/controllers/panel/gallery/back_end/album_images_controller.rb

@@ -0,0 +1,74 @@
+class Panel::Gallery::BackEnd::AlbumImagesController < OrbitBackendController
+	include AdminHelper
+
+	# before_filter :force_order_for_visitor,:only=>[:index]
+	# before_filter :force_order_for_user#,:except => [:index]
+
+	def show
+		@tags = get_tags
+		@image = AlbumImage.find(params[:id])
+		@albumid = @image.album_id
+		@album = Album.find(@albumid)
+		@images = @album.album_images.all
+	end
+
+
+	def destroy
+		images = params['images']
+		images.each do |image|
+			img = AlbumImage.find(image)
+			img.delete
+		end
+		if params['delete_cover'] == "true"
+			album = Album.find(params['id'])
+			album.update_attributes(:cover=>"default",:cover_path => nil)
+		end
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def update_image
+		image = AlbumImage.find(params[:image_id])
+		image.update_attributes(params[:album_image])
+		image.save!
+		@album = Album.find(image.album_id.to_s)
+		@images = @album.album_images
+	    @image_content = []
+	    @images.each do |image|
+	      @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tagged_ids}
+	    end
+	    render :json => @image_content.to_json
+	end
+
+	def delete_photos
+		images = params['images']
+		images.each do |image|
+			img = AlbumImage.find(image)
+			img.delete
+		end
+		if params['delete_cover'] == "true"
+			album = Album.find(params['album_id'])
+			album.update_attributes(:cover=>"default",:cover_path => nil)
+		end
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def image_tagging
+		images = params[:image_ids]
+		tags = params[:tag_ids] || []
+		i = nil
+		images.each do |image|
+			img = AlbumImage.find(image)
+			img.tagged_ids = tags
+			img.save
+			i = img
+		end
+		@album = Album.find(i.album_id.to_s)
+		@images = @album.album_images
+	    @image_content = []
+	    @images.each do |image|
+	      @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tagged_ids}
+	    end
+		render :json=>@image_content.to_json
+	end
+
+end

app/controllers/panel/gallery/back_end/albums_controller.rb

@@ -0,0 +1,227 @@
+class Panel::Gallery::BackEnd::AlbumsController < OrbitBackendController
+  open_for_visitor :only => [:index, :show, :get_album_json, :get_imgs_json, :imgs]
+  open_for_manager :except => [:index,:show,:update]
+  open_for_sub_manager :except => [:index, :show]
+
+  before_filter :only => [ :new, :create, :edit, :update ] do |controller|
+    @categories = get_categories_for_form
+  end
+
+  # before_filter lambda
+  
+  def index
+    @categories = get_categories_for_index
+    @tags = get_tags
+    category_ids = @categories.collect{|t| t.id}
+    @albums = get_sorted_and_filtered("album", :category_id.in => category_ids)
+
+  end
+
+  def show
+    @album = Album.find(params[:id])
+    @images = @album.album_images
+    @image_content = []
+    @images.each do |image|
+      @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tagged_ids}
+    end
+    @tags = get_tags
+    respond_to do |h|
+      h.html
+      h.json {render json: @image_content}
+    end
+  end
+
+  def new
+    @categories = get_categories_for_index
+    @tags = get_tags 
+    @album = Album.new
+   
+  end
+
+  def create
+    album = Album.new(params[:album])
+    album.save!
+    redirect_to panel_gallery_back_end_albums_path
+  end
+
+
+
+  def destroy
+    album = Album.find(params[:id])
+    album.destroy
+    redirect_to panel_gallery_back_end_albums_path
+
+  end
+
+  def edit
+      @album = Album.find(params[:id])
+      @tags = get_tags
+  end
+
+  def set_cover
+    if params[:set_cover] == "true"
+      album = Album.find(params[:album_id])
+      image = AlbumImage.find(params[:image_id])
+      album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:image_id]})
+    else
+      album = Album.find(params[:album_id])
+      album.update_attributes({:cover_path => nil, :cover=>"default"})
+    end
+    render :json =>{"success"=>true}.to_json
+  end
+
+  def get_album_json
+    albums = Album.all
+    output = Array.new
+
+    albums.each do |album|
+      tag_names = Array.new
+
+      album.tag_ids.each do |tag|
+        tag_names << get_tags.include?(tag)
+      end
+      if album.cover_path
+        cover_path = album.cover_path
+      else
+        cover_path = "/assets/gallery/default.jpg"
+      end
+      output << {
+        album_cover_file: "http://#{request.host_with_port}"+cover_path,
+        album_name: album.name,
+        album_tag_names: tag_names,
+        album_link:"http://#{request.host_with_port}#{panel_gallery_back_end_album_get_imgs_json_path(album)}",
+      }
+    end
+
+    render :json=>JSON.pretty_generate(output)
+  end
+
+  def get_imgs_json
+    album = Album.find(params[:album_id])
+    images = album.album_images.all
+    output = Array.new
+
+    images.each do |image|
+      tags = Array.new
+
+      image.tag_ids.each do |tag|
+        tags << get_tags.include?(tag)
+      end
+       
+      if image.file.theater.present?
+        @image_file = image.file.theater.url
+      else
+        @image_file = image.file.url
+      end
+
+      output << {
+        image_title: image.title,
+        image_description: image.description,
+        image_file: { url: "http://#{request.host_with_port}#{@image_file}",
+                      thumb: "http://#{request.host_with_port}#{image.file.thumb.to_s}"},
+                      image_tag_names: tags}
+    end
+
+    render :json=>JSON.pretty_generate(output)
+  end
+
+  def imgs
+    @album = Album.find(params[:album_id])
+    @tag_names = Array.new
+    @images = @album.album_images.all
+    @output =  Array.new
+    @images.each do |values|
+      tags = Array.new
+      values.tag_ids.each do |tag|
+        tags << get_tags.include?(tag)
+      end
+      @output << { _id:  values.id,
+                   theater_link: panel_gallery_back_end_album_image_path(values),
+                   description: values.description,
+                   title: values.title,
+                   file: values.file.as_json[:file],
+                   gallery_album_id: values.album_id,
+                   tag_ids: values.tag_ids,
+                   tag_names: tags}
+    end
+      render :json=>{"images" => @output, "tags" => @album.tag_ids}.to_json
+  end
+
+
+
+  def upload_image
+    @album = Album.find(params[:album_id])
+    @files = params['files']
+    a = Array.new
+    @files.each do |file|
+      @image = @album.album_images.new
+      @image.file = file
+      @image.tagged_ids = @album.tag_ids
+      @image.save!
+      a << {"thumbnail_url"=>@image.file.thumb.url,"url"=>panel_gallery_back_end_album_image_path(@image)}
+    end
+    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
+    end
+    render :layout=>false
+  end
+
+
+  def images_tags
+    album = Album.find(params[:album_id])
+    tags = Array.new
+    images = album.album_images.all
+    images.each do |image|
+      tags << {"id"=>image.id, "tags" => image.tag_ids}
+    end
+    render :json=>tags.to_json
+  end
+
+  def update
+    @album = Album.find(params[:id])
+    tagsToDestroy = []
+    tagsToAdd = []
+    new_tags = params[:album][:tag_ids] || []
+    old_tags = @album.tagged_ids
+    old_tags.each do |tag|
+       if !new_tags.include?(tag)
+        tagsToDestroy << tag
+        end
+    end
+    if new_tags != nil
+      new_tags.each do |tag|
+        if !old_tags.include?(tag)
+          tagsToAdd << tag
+        end
+      end
+    end
+    update_children_image_tag(tagsToDestroy,tagsToAdd)
+    params[:album][:tag_ids] = params[:album][:tag_ids] || []
+    @album.update_attributes(params[:album])
+    redirect_to panel_gallery_back_end_album_path(@album)
+  end
+
+  def update_children_image_tag(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|
+        image.tagged_ids.concat(tagsToAdd) if !tagsToAdd.blank?
+        tagsToDestroy.each do |tag|
+          if image.tagged_ids.include?tag
+            image.tagged_ids.delete(tag)
+          end
+        end
+        image.save
+      end
+  end
+end

app/controllers/panel/gallery/back_end/gallery_categories_controller.rb

@@ -0,0 +1,33 @@
+class Panel::Gallery::BackEnd::GalleryCategoriesController < OrbitBackendController
+	
+	def index
+		@categorylist = GalleryCategory.all
+		@new_category = GalleryCategory.new
+	end
+	def edit
+		@category = GalleryCategory.find(params[:id])
+		render :layout => false
+	end 
+	def create
+		@category = GalleryCategory.new(params[:gallery_category])
+		@category.save!
+		respond_to do |h|
+			h.js
+		end
+	end
+	def update 
+		@category = GalleryCategory.find(params[:id])
+		@category.update_attributes(params[:gallery_category])
+		respond_to do |h|
+			h.js
+		end
+	end
+
+	def destroy
+		@category = GalleryCategory.find(params['id'])
+		@category.delete
+		render :json=>{"success"=>"true"}.to_json
+	end
+
+end
+

app/controllers/panel/gallery/back_end/tags_controller.rb

@@ -0,0 +1,18 @@
+class Panel::Gallery::BackEnd::TagsController < Admin::TagsController
+  
+	def initialize
+	    super
+	    @app_title = 'gallery'
+	end
+	def save_tags
+		case params[:tag]
+		when "album"
+			@object = GalleryAlbum.find(params[:id])
+		when "pic"
+			@object = GalleryImage.find(params[:id])
+		end
+		@object.update_attributes({:tag_ids => params[:tids]})
+		render :json => {"success"=> "true"}.to_json
+	end
+  
+end

app/controllers/panel/gallery/front_end/album_images_controller.rb

@@ -0,0 +1,5 @@
+class Panel::Gallery::FrontEnd::AlbumImagesController < OrbitWidgetController
+
+	
+
+end

app/controllers/panel/gallery/front_end/albums_controller.rb

@@ -0,0 +1,48 @@
+class Panel::Gallery::FrontEnd::AlbumsController < OrbitWidgetController
+  def index
+    @albums = Album.where(:category_id.in => params[:category_id])
+  end
+
+  def show
+    @album = Album.find(params[:id])
+    @images = @album.album_images
+  end
+
+  def imgs
+    @album = Album.find(params[:id])
+    @images = @album.album_images.all
+    @output =  Array.new
+    @images.each do |values|
+      tags = Tag.find(values.tagged_ids).map{|t| t.name}
+      @output << {:_id => values.id,
+                  :theater_link => theater_panel_gallery_front_end_album_path(values),
+                  :description => values.description,
+                  :title => values.title,
+                  :file => values.file.as_json[:file],
+                  :gallery_album_id => values.album_id,
+                  :tag_ids => values.tag_ids,
+                  :tag_names => tags}
+    end
+    render :json=>{:images => @output}.to_json
+  end
+
+  def images_tags
+    album = Album.find(params[:album_id])
+    tags = Array.new
+    images = album.album_images.all
+    images.each do |image|
+      tags << {"id"=>image.id, "tags" => image.tag_ids}
+    end
+    render :json=>tags.to_json
+  end
+
+  def theater
+    @image = AlbumImage.find(params[:image_id])
+    @albumid = @image.album_id
+    @album = Album.find(@albumid)
+    @images = @album.album_images.all
+    tags = @album.tagged_ids
+    @tagnames = Tag.find(tags).map{|t| t.name}
+    @back_link = panel_gallery_front_end_album_path(@albumid)
+  end
+end

app/controllers/panel/gallery/front_end/orbit_galleries_controller.rb

@@ -0,0 +1,221 @@
+class Panel::Gallery::FrontEnd::OrbitGalleriesController < OrbitWidgetController
+include AdminHelper
+	def index
+		@authenticated = false
+		@categorylist = GalleryCategory.all
+		@cid = params['cat']
+		@tags = get_tags
+	end
+
+	def new_category
+		names = params['category']
+		category = GalleryCategory.new
+		I18n.locale = :en
+		category.name = names['en']
+		I18n.locale = :zh_tw
+		category.name = names['zh_tw']
+		category.save!
+    	render :json=>{"success"=>true,"id"=>category.id}.to_json
+	end
+
+	def categorylist
+		@categorylist = GalleryCategory.all
+		#render :layout => false
+	end
+
+	def gallery_category_delete
+		@category = GalleryCategory.find(params['id'])
+		@category.delete
+		render :json=>{"success"=>"true"}.to_json
+	end
+
+	def add_album
+		if is_manager? || is_admin?
+			@categorylist = GalleryCategory.all
+		elsif is_sub_manager?
+			@categorylist = GalleryCategory.authed_for_user(current_user,"new_album")
+		end
+		render :layout => false
+	end
+
+	def create_album
+		category = GalleryCategory.find(params['cid'])
+		albumnames = params["albumname"]
+		albumdescs = params["albumdesc"]
+		album = category.gallery_albums.new
+		I18n.locale = :en
+		album.name = albumnames["en"]
+		album.description = albumdescs["en"]
+		I18n.locale = :zh_tw
+		album.name = albumnames["zh_tw"]
+		album.description = albumdescs["zh_tw"]
+		album.save!
+		#x = category.gallery_albums.create({name: params['albumname'],description: params['albumdesc']})
+		render :json=>{"success"=>true,"id"=>album.id}.to_json
+	end
+
+	def get_albums
+		@categoryids = params["cid"]
+		@tags = params["tid"]
+		@albums = Array.new
+		if @categoryids == "all"
+			if @tags
+				if @tags.kind_of?(Array)
+					@tags.each do |tag|
+						@albums << GalleryAlbum.where(tagged_ids: tag)
+					end
+				else
+					@albums <<  GalleryAlbum.where(tagged_ids: @tags)
+				end
+			else
+				@albums << GalleryAlbum.all
+			end
+		else
+			@categoryids.each do |id|
+				category = GalleryCategory.find(id)
+				if @tags
+					if @tags.kind_of?(Array)
+						@tags.each do |tag|
+							@albums << category.gallery_albums.where(tagged_ids: tag)
+						end
+					else
+						@albums << category.gallery_albums.where(tagged_ids: @tags)
+					end
+				else
+					@albums << category.gallery_albums.all
+				end
+			end
+		end
+		@output =  Array.new
+		@albums.each do |album|
+			@albs = Array.new
+			album.each do |values|
+				tags = Tag.find(values.tagged_ids).map{|t| t.name}
+				category = GalleryCategory.find(values.gallery_category_id).name
+				@albs << {"_id"=>values.id,"cover"=>values.cover,"cover_path"=>values.cover_path,"description"=>values.description,"category_name"=>category,"gallery_category_id" => values.gallery_category_id,"name"=>values.name,"tag_ids"=>values.tag_ids,"tag_names"=>tags}
+			end
+			@output << @albs
+		end
+		render :json=>@output.to_json
+	end
+
+	def upload_image
+		albumid = params['aid'];
+		@album = GalleryAlbum.find(albumid)
+		@files = params['files']
+		a = Array.new
+		@files.each do |file|
+			@image = @album.gallery_images.new
+			@image.file = file
+			@image.save!
+			a << {"thumbnail_url"=>@image.file.thumb.url}
+		end
+		render :json=>a.to_json
+	end
+
+	def upload_panel
+		render :layout => false
+	end
+
+	def get_images
+		@album = GalleryAlbum.find(params["aid"])
+		render :json=>{"images" => @album.gallery_images.all, "tags" => @album.tag_ids}.to_json
+	end
+
+	def theater
+		picid = params["pic"]
+		@image = GalleryImage.find(picid)
+		@albumid = @image.gallery_album_id
+		album = GalleryAlbum.find(@albumid)
+		@images = album.gallery_images.all
+		render :layout=>false
+	end
+
+	def delete_album
+		aid = params['aid']
+		album = GalleryAlbum.find(aid)
+		album.delete
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def edit_album
+		if is_manager? || is_admin? || is_sub_manager?
+			aid = params['aid']
+			album = GalleryAlbum.find(aid)
+			@images = album.gallery_images.all
+			@album_name = album.name_translations
+			@cover = album.cover
+			render :layout => false
+		end
+	end
+
+	def set_cover
+		aid = params['aid']
+		album = GalleryAlbum.find(aid)
+		image = GalleryImage.find(params[:imageid])
+		album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:imageid]})
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def delete_images
+		images = params['images']
+		images.each do |image|
+			img = GalleryImage.find(image)
+			img.delete
+		end
+		if params['delete_cover'] == "true"
+			album = GalleryAlbum.find(params['aid'])
+			album.update_attributes(:cover=>"default")
+		end
+		render :json =>{"success"=>true}.to_json
+	end
+
+	def update_album
+		# data = params['data']
+		# album_name = params['name']
+		# aid = params['aid']
+		# data.each do |d|
+		# 	image = GalleryImage.find(d[1][:id])
+		# 	image.update_attributes(:description=>d[1][:text])
+		# end
+		# album = GalleryAlbum.find(aid)
+		# album.update_attributes(:name => album_name)
+		album_names = params[:albumnm]
+		data = params[:data]
+		aid =params[:aid]
+		debugger
+		data.each do |d|
+			image = GalleryImage.find(d[1][:id])
+			@site_valid_locales.each do |locale|
+				image.description_translations[locale] = d[1][:text][locale] 
+			end
+			image.save!
+		end
+
+		album = GalleryAlbum.find(aid)
+		
+		@site_valid_locales.each_with_index do |locale,i|
+			album.name_translations[locale] = album_names[i]
+		end
+		album.save!
+
+		 render :json =>{"success"=>true}.to_json
+	end
+
+	def save_tags
+		case params[:tag]
+		when "album"
+			@object = GalleryAlbum.find(params[:id])
+		when "pic"
+			@object = GalleryImage.find(params[:id])
+		end
+		@object.update_attributes({:tag_ids => params[:tids]})
+		render :json => {"success"=> "true"}.to_json
+	end
+end
+
+
+
+
+
+

app/controllers/panel/gallery/widget/albums_controller.rb

@@ -0,0 +1,59 @@
+class Panel::Gallery::Widget::AlbumsController < OrbitWidgetController
+
+	def widget1
+		@part = PagePart.find(params[:part_id])
+		@title = @part.title_translations[I18n.locale.to_s] 
+
+		vertical = @part.widget_options['vertical'].to_i rescue 0
+		horizontal = @part.widget_options['horizontal'].to_i rescue 0
+		
+		@album = Album.find(@part.widget_options['album_id']) rescue nil
+		@album_images = @album.album_images if @album
+
+		
+		@settings = {"vertical"=>vertical,"horizontal"=>horizontal}   #[note] horizontal has it's limitation from 2 to 6
+		@class = "c" + @settings["horizontal"].to_s
+		@total = @settings["vertical"] * @settings["horizontal"]
+		@rnd = Random.new
+		@images = []
+
+		if !@album_images.nil?
+			if @album_images.count > @total
+				@randoms = []
+				until @randoms.count == @total do
+					r = @rnd.rand(0...@album_images.count)
+					if !@randoms.include?r
+						@randoms << r
+						image = @album_images[r]
+						values = {"show_link"=>theater_panel_gallery_front_end_album_path(@album,:image_id=>image),"thumb"=>image.file.thumb.url}
+						@images << values
+					end
+				end
+			elsif @album_images.count == @total
+				@album_images.each do |image|
+					values = {"show_link"=>theater_panel_gallery_front_end_album_path(@album,:image_id=>image),"thumb"=>image.file.thumb.url}
+					@images << values
+				end
+			else
+				@album_images.each do |image|
+					values = {"show_link"=>theater_panel_gallery_front_end_album_path(@album,:image_id=>image),"thumb"=>image.file.thumb.url}
+					@images << values
+				end
+				until @images.count == @total do
+					values = {"show_link"=>"javascript:void(0);","thumb"=>"assets/gallery/nodata.jpg"}
+					@images << values
+				end
+			end
+		else
+			until @images.count == @total do
+				values = {"show_link"=>"javascript:void(0);","thumb"=>"assets/gallery/nodata.jpg"}
+				@images << values
+			end
+		end
+	end
+
+	def widget2
+
+	end
+
+end

app/helpers/panel/gallery/back_end/gallery_categories_helper.rb

@@ -0,0 +1,16 @@
+module Panel::Gallery::BackEnd::GalleryCategoriesHelper
+include ActionView::Helpers::UrlHelper
+
+  
+  def show_gallery_category_permission_link(gallery_category)
+    type = 'new_album'
+    oa = gallery_category.get_object_auth_by_title(type)
+    if oa.nil?
+      gallery_category.object_auths.new(title: type ).save
+      oa = gallery_category.get_object_auth_by_title(type)
+    end
+#    link_to t('announcement.bulletin.cate_auth'), edit_admin_object_auth_path(oa)
+     link_to t('gallery.cate_auth'),admin_object_auth_ob_auth_path(oa)
+  end
+
+end

app/models/album.rb

@@ -0,0 +1,18 @@
+class Album
+  include Mongoid::Document
+  include Mongoid::Timestamps
+
+  include OrbitCategory::Categorizable
+  include OrbitTag::Taggable
+
+  field :name, localize: true
+  field :description, localize: true
+  field :cover, default: "default"
+  field :cover_path   #can  refact
+  field :tag_names
+
+	# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
+  has_many :album_images, :autosave => true, :dependent => :destroy
+  accepts_nested_attributes_for :album_images, :allow_destroy => true
+ 
+end

app/models/album_image.rb

@@ -0,0 +1,15 @@
+class AlbumImage
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  include OrbitTag::Taggable
+
+	mount_uploader :file, GalleryUploader
+
+	field :title
+	field :description, localize: true
+
+	# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
+
+	belongs_to :album
+
+end

app/models/gallery_category.rb

@@ -0,0 +1,21 @@
+class GalleryCategory
+  include Mongoid::Document
+  include Mongoid::Timestamps
+
+  include OrbitCoreLib::ObjectAuthable
+
+  ObjectAuthTitlesOptions = %W{new_album}
+  APP_NAME = "album"
+
+  field :name, localize: true
+
+  has_many :albums, :autosave => true, :dependent => :destroy
+
+  def title
+    name
+  end
+
+  def pp_object
+    name
+  end
+end

app/uploaders/gallery_uploader.rb

@@ -0,0 +1,82 @@
+# encoding: utf-8
+module CarrierWave
+  module Uploader
+    module Versions
+      def recreate_version!(version)
+        already_cached = cached?
+        cache_stored_file! if !already_cached
+        send(version).store!
+        if !already_cached && @cache_id
+          tmp_dir = File.expand_path(File.join(cache_dir, cache_id), CarrierWave.root)
+          FileUtils.rm_rf(tmp_dir)
+        end
+      end
+    end
+  end
+end
+
+class GalleryUploader < CarrierWave::Uploader::Base
+
+  # Include RMagick or ImageScience support:
+  # include CarrierWave::RMagick
+  # include CarrierWave::ImageScience
+    include CarrierWave::MiniMagick
+
+  # Choose what kind of storage to use for this uploader:
+  # storage :file
+  # storage :s3
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "gallery/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  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('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process :scale => [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+  # version :thumb do
+  #   process :scale => [50, 50]
+  # end
+  
+  version :thumb do
+    process :resize_to_fill => [200, 200]
+  end
+
+  version :theater do
+    process :resize_to_limit => [1920, 1080]
+  end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  # def extension_white_list
+  #   %w(jpg jpeg gif png)
+  # end
+
+  # Override the filename of the uploaded files:
+  # def filename
+  #   "something.jpg" if original_filename
+  # end
+  
+#  def manipulate!
+#    raise current_path.inspect
+#    image = ::MiniMagick::Image.open(current_path)
+#    image = yield(image)
+#    image.write(current_path)
+#    ::MiniMagick::Image.open(current_path)
+#  rescue ::MiniMagick::Error, ::MiniMagick::Invalid => e
+#    raise CarrierWave::ProcessingError.new("Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: #{e}")
+#  end
+
+end
+

app/views/panel/gallery/back_end/album_images/show.html.erb

@@ -0,0 +1,57 @@
+
+<%= stylesheet_link_tag "gallery_old" %>
+
+<div id="orbit_gallery" class="rg">
+  <div class="rgbody">
+    <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="rslidenav">
+            <a href="" class="navP" title="上一張" onclick="return false;">Prev</a>
+            <a href="" class="navN" title="下一張" onclick="return false;">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="" onload="gallery.loadcomplete();" /></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>
+          <div class="slideinfo">
+            <span class="info"><%= @image.description %></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions form-fixed pagination-right rghead">
+  <div class="rgfn">
+    <%= link_to (content_tag(:i,I18n.t("gallery.back_to_photos"),:class=>"icon-arrow-left icon-black")),"",:class=>"bt-back btn pull-left btn-primary",:title=>I18n.t("gallery.back_to_photos")%>
+
+  </div>
+</div>
+</div>
+
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "rss" %>
+  <%= javascript_include_tag "galleryAPI" %>
+  
+<% end %>
+
+<script type="text/javascript">
+  galleryAPI.prototype.locale = "<%= I18n.locale %>";
+  var gallery = new galleryAPI();
+   gallery.loadArea = "theater";
+   gallery.loadTheater("<%= params[:id] %>");
+</script>
+
+
+
+
+

app/views/panel/gallery/back_end/album_images/upload_panel.html.erb

@@ -0,0 +1,111 @@
+<html>
+<head>
+<%= csrf_meta_tag %>
+<%= javascript_include_tag "jquery-latest" %>
+<%= stylesheet_link_tag "jquery-ui" %>
+<%= stylesheet_link_tag "jquery.fileupload-ui.css" %>
+
+</head>
+<body>
+<div id='scroller_for_panel'>
+<div id="fileupload">
+<%= form_for @album, :url => panel_gallery_back_end_album_path(@album), :html => {:class => 'clear'} do |f| %>
+
+    <!-- <form action="upload_image" method="POST" enctype="multipart/form-data"> -->
+        <div class="fileupload-buttonbar">
+            <label class="fileinput-button">
+                <span>Add files...</span>
+                <input type="file" name="files[]" multiple>
+            </label>
+          <!--   <input type="hidden" value="" name="aid" id="fileupload_aid" /> -->
+            <button type="submit" class="start">Start upload</button>
+            <button type="reset" class="cancel">Cancel upload</button>
+           <!-- <button type="button" class="delete">Delete files</button>-->
+        </div>
+    <!-- </form> -->
+    <% end %>
+    <div class="fileupload-content">
+        <table class="files"></table>
+        <div class="fileupload-progressbar"></div>
+    </div>
+</div>
+<script id="template-upload" type="text/x-jquery-tmpl">
+    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
+        <td class="preview"></td>
+        <td class="name">{{if name}}${name}{{else}}Untitled{{/if}}</td>
+        <td class="size">${sizef}</td>
+        {{if error}}
+            <td class="error" colspan="2">Error:
+                {{if error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="progress"><div></div></td>
+            <td class="start"><button>Start</button></td>
+        {{/if}}
+        <td class="cancel"><button>Cancel</button></td>
+    </tr>
+</script>
+<script id="template-download" type="text/x-jquery-tmpl">
+    <tr class="template-download{{if error}} ui-state-error{{/if}}">
+        {{if error}}
+            <td></td>
+            <td class="name">${name}</td>
+            <td class="size">${sizef}</td>
+            <td class="error" colspan="2">Error:
+                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
+                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
+                {{else error === 3}}File was only partially uploaded
+                {{else error === 4}}No File was uploaded
+                {{else error === 5}}Missing a temporary folder
+                {{else error === 6}}Failed to write file to disk
+                {{else error === 7}}File upload stopped by extension
+                {{else error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
+                {{else error === 'emptyResult'}}Empty file upload result
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="preview">
+                {{if thumbnail_url}}
+                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
+                {{/if}}
+            </td>
+            <td class="name">
+                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
+            </td>
+            <td class="size">${sizef}</td>
+            <td colspan="2"></td>
+        {{/if}}
+       
+    </tr>
+</script>
+<script type="text/javascript">
+    $("input#fileupload_aid").val(parent.g.urlVars['album']);
+</script>
+</div>
+
+    <%= javascript_include_tag "jquery-ui.min" %>
+    <%= javascript_include_tag "jquery.tmpl.min" %>
+    <%= javascript_include_tag "jquery.iframe-transport" %>
+    <%= javascript_include_tag "jquery.fileupload" %>
+    <%= javascript_include_tag "jquery.fileupload-ui" %>
+    <%= javascript_include_tag "upload" %>
+    
+</body>
+</html>
+
+<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+<script src="../../js/gallery/jquery.iframe-transport.js"></script>
+<script src="../../js/gallery/jquery.fileupload.js"></script>
+<script src="../../js/gallery/jquery.fileupload-ui.js"></script>
+<script src="../../js/gallery/upload.js"></script> -->

app/views/panel/gallery/back_end/albums/_album.html.erb

@@ -0,0 +1,22 @@
+<li class="rgalbum">
+  <a href="<%= panel_gallery_back_end_album_path(album) %>">
+    <% if album.cover == "default" %>
+     <%= image_tag "gallery/default.jpg" %>
+    <% else %>
+     <img src="<%= album.cover_path %>">
+    <% end %>
+    <p class="albumname"><%= album.name %></p>
+  </a>
+  <ul class="gallery_info clearfix">
+    <!-- <li class="view"><i class="icons-eye"></i> 321</li> -->
+    <li><i class="icons-tag"></i></li>
+    <li><%= link_to (content_tag(:i,"",:class=>"icon-trash danger")), panel_gallery_back_end_album_path(album), :confirm => "Are you sure?", :method=>:delete %></li>
+    <li class="albumcateg"><%= Category.find(album.category_id).title %></li>
+  </ul>
+  <ul class="albumtag">
+    <% album.tagged_ids.each do |tag| %>
+      <% r = @tags.select { |k| k.id.to_s == tag } %>
+       <li class="label"><%= r.map {|t| t.name}[0]%></li>
+    <%end%>
+  </ul>
+</li>

app/views/panel/gallery/back_end/albums/_form.html.erb

@@ -0,0 +1,107 @@
+<% content_for :page_specific_css do %>
+  <%= stylesheet_link_tag "lib/main-forms" %>
+  <%= stylesheet_link_tag "lib/fileupload" %>
+  <%= stylesheet_link_tag "lib/main-list" %>
+<% end %>
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
+  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
+  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
+  <%= javascript_include_tag "lib/modal-preview" %>
+  <%= javascript_include_tag "lib/file-type" %>
+<% end %>
+<%= f.error_messages %>
+   <fieldset>           
+            <!-- Input Area -->
+            <div class="input-area">
+
+              <!-- Module Tabs -->
+              <div class="nav-name"><strong>Module</strong></div>
+              <ul class="nav nav-pills module-nav">
+                <li class="active">
+                  <a href="#basic" data-toggle="tab">Basic</a>
+                </li>
+                <li>
+                  <a href="#tag" data-toggle="tab">Tags</a>
+                </li>
+              </ul>
+
+              <!-- Module -->
+              <div class="tab-content module-area">
+
+                <!-- Basic Module -->
+                <div class="tab-pane fade in active" id="basic">
+
+                  <!-- Category -->
+                  <div class="control-group">
+                    <label class="control-label muted">Category</label>
+                    <div class="controls">
+                     <%= f.select(:category_id, @categories.collect {|p| [ p.title, p.id ] }) %>
+                    </div>
+                  </div>
+
+                </div>
+ <!-- Tag Module -->
+                <div class="tab-pane fade" id="tag">
+
+                  <!-- Tag -->
+                  <div class="control-group">
+                    <label class="control-label muted">Tag</label>
+                    <div class="controls" data-toggle="buttons-checkbox">
+                      <%@tags.each do |tag|%>
+                          <label class="checkbox inline btn <%= 'active' if @album.tag_ids.include?(tag.id) %>">
+                            <%= check_box_tag 'album[tag_ids][]', tag.id, @album.tag_ids.include?(tag.id)%>
+                            <%= tag.name %>
+                          </label>
+                      <%end %>
+                    </div>
+                  </div>
+
+                </div>
+
+              </div>
+              <div class="nav-name"><strong>Language</strong></div>
+                 <ul class="nav nav-pills language-nav">
+                  <% @site_in_use_locales.each_with_index do |locale, i| %>
+                      <li <%= (i == 0 ? 'class=active' : '') %>>
+                        <a href=".<%= locale %>" data-toggle="tab"><%= I18nVariable.from_locale(locale) %></a>
+                      </li>
+                   <% end %>
+                </ul>
+                <div class="tab-content language-area">
+              <!-- Language Tabs -->
+               
+                 
+                    <% @site_in_use_locales.each_with_index do |locale, i| %>
+
+                         <div class="tab-pane fade in <%= (i == 0 ? 'active' : '') %> <%= locale %>">
+                          <div class="control-group input-title">
+                            <%= f.fields_for :name_translations do |name| %>
+                                <%= label_tag(locale, t("gallery.album_name"),:class=>"control-label muted") %>
+                                <div class="controls">
+                                   <%= name.text_field locale, :class => "input-block-level", :placeholder=>"Title",:value => (@album.name_translations[locale] rescue nil) %>
+                                </div>
+                             <% end %> 
+                          </div>
+                          <div class="control-group input-content">
+                             <%= f.fields_for :description_translations do |desc| %>
+                                 <%= label_tag(locale, t("gallery.album_desc"), :class=>"control-label muted") %>
+                                <div class="controls">
+                                  <div class="textarea">
+                                    <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@album.description_translations[locale] rescue nil)%>
+                                  </div>
+                                </div>
+                            <% end %>
+                          </div>
+                        </div>
+                    <% end %>
+                           
+              </div>
+             
+            </div>
+            <!-- Form Actions -->
+            <div class="form-actions">
+              <%= f.submit t("gallery.save"), :class=> "btn btn-primary bt-form-save" %>
+            </div>
+
+          </fieldset>

app/views/panel/gallery/back_end/albums/_image.html.erb

@@ -0,0 +1,13 @@
+<li class="rgalbum" data-image-id="<%= image.id.to_s %>">
+	<a href="<%= panel_gallery_back_end_album_image_path(image) %>">
+    	<img src="<%= image.file.thumb %>">
+	</a>
+	<ul class="photo-action clearfix">
+		<li class="photo_cover"><i class="<%= (@album.cover.to_s == image.id.to_s)? "icons-star" : "icons-star-2" %>"></i></li>
+		<li class="phtot_depiction"><a href="#view-photo-depiction" class="open" for="description"><i class="icon-comment-alt"></i></a></li>
+		<li class="phtot_tag"><a href="#view-photo-tags" class="open" for="tags"><i class="icons-tag"></i></a></li>
+	</ul>
+	<div class="check">
+		<input type="checkbox" class="checkbox">
+	</div>
+</li>

app/views/panel/gallery/back_end/albums/create.js.erb

@@ -0,0 +1,3 @@
+var gal = new galleryAPI();
+gal.loadAlbums("all");
+rcom.modalWindowClose();

app/views/panel/gallery/back_end/albums/edit.html.erb

@@ -0,0 +1,3 @@
+<%= form_for @album, :url => panel_gallery_back_end_album_path(@album), :html => {:class => 'form-horizontal main-forms'} do |f| %>
+  <%= render :partial => 'form', :locals => {:f => f} %>
+<% end %>

app/views/panel/gallery/back_end/albums/index.html.erb

@@ -0,0 +1,37 @@
+<% set_default_index do 
+  objects @albums
+  filter_field  type: 'objects',
+                values: @tags,
+                translation: 'tags',
+                object_field: 'name'
+
+  filter_field  type: 'objects',
+                values: @categories,
+                translation: 'category',
+                object_field: 'title'
+                
+  footer  link: 'new_panel_gallery_back_end_album_path',
+          paginate: false
+end %>
+<%= render 'admin/default_index/index' %>
+     
+<ul id="orbit_gallery" class="gallery" data-gallery-id="gallery">
+  <% @albums.each do |album| %>
+    <%= render :partial => "album", :object => album %>
+  <% end %>
+</ul>
+
+<% content_for :page_specific_css do %>
+  <%= stylesheet_link_tag "gallery" %>
+<% end %>
+
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "jquery.masonry.min.js" %>
+  <%= javascript_include_tag "jquery.lite.image.resize.js" %>
+  <%= javascript_include_tag "gallery" %>
+<% end %>
+
+
+
+
+

app/views/panel/gallery/back_end/albums/new.html.erb

@@ -0,0 +1,5 @@
+<div id="poststuff">
+<%= form_for @album, :url => {:action => "create"},  :html => {:class => 'form-horizontal main-forms'} do |f| %>
+       <%= render :partial => 'form', :locals => {:f => f} %>
+<% end %>
+</div>

app/views/panel/gallery/back_end/albums/new_images.html.erb

@@ -0,0 +1,3 @@
+<% @newimages.each do |image| %>
+	<%= render :partial=>"image", :object=>image %>
+<% end %> 

app/views/panel/gallery/back_end/albums/show.html.erb

@@ -0,0 +1,243 @@
+
+<%= stylesheet_link_tag "gallery" %>
+<%= stylesheet_link_tag "lib/tags-groups" %>
+<!-- <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>
+    <li><a href="<%= panel_gallery_back_end_albums_path %>">Gallery</a> <span class="divider">/</span></li>
+    <li class="active"><%= @album.name %></li>
+  </ul>
+</div> -->
+<!-- Bottom Nav -->
+<div class="bottomnav clearfix">
+  <div class="action pull-left">
+    <a href="<%= panel_gallery_back_end_albums_path %>" class="btn btn-small"><i class="icons-back"></i> Back</a>
+  </div>
+  <div class="action pull-right">
+    <a href="#" class="btn btn-inverse btn-small deselect hide">Deselect</a>
+    <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_panel_gallery_back_end_album_path(@album) %>" class="btn btn-small btn-success"><i class="icon-edit"></i> Edit</a>
+    <b class="divider"></b>
+   
+    <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i> Add Image</a>
+  </div>
+  <form action="<%= panel_gallery_back_end_upload_image_path %>", id='fileupload'>
+    <!-- Redirect browsers with JavaScript disabled to the origin page -->
+    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
+    <div class="fileupload-buttonbar">
+      <div class="navbar">
+        <div class="navbar-inner">
+          <ul class="nav">
+            <li>
+              <div class="fileinput-button add-photo">
+                <i class="icon-plus icon-white"></i>
+                <span>Add files...</span>
+                <input type="file" name="files[]" multiple>
+              </div>
+                <input type="hidden" value="<%= @album.id.to_s %>" name="album_id" id="fileupload_aid" />
+            </li>
+            <li>
+              <button type="submit" class="start add-photo">
+                <i class="icon-upload icon-white"></i>
+                <span>Start upload</span>
+              </button>
+            </li>
+            <li>
+              <button type="reset" class="cancel add-photo">
+                <i class="icon-ban-circle icon-white"></i>
+                <span>Cancel upload</span>
+              </button>
+            </li>
+            <!-- <li>
+              <button type="button" class="delete">
+                <i class="icons-trash icon-white"></i>
+                <span>Delete</span>
+              </button>
+            </li> -->
+          </ul>
+        </div>
+      </div>
+      <!-- The global progress information -->
+      <div class="fileupload-progress">
+          <!-- The global progress bar -->
+          <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+              <div class="bar" style="width:0%;"></div>
+          </div>
+          <!-- The extended global progress information -->
+          <div class="progress-extended"></div>
+      </div>
+    </div>
+    <!-- Drop Zone -->
+    <div id="dropzone" class="drop">
+      <div data-icons="&#xe0a3;"></div>
+      Drop files here
+    </div>
+    <!-- The loading indicator is shown during file processing -->
+    <div class="fileupload-loading"></div>
+    <!-- The table listing the files available for upload/download -->
+    <div id="file-list" class="nano">
+      <div class="content">
+        <ul role="presentation" class="files clearfix">
+        </ul>
+      </div>
+    </div>
+  </form>
+</div>
+
+<div class="rgbody">
+  <div class="gallery-info">
+    <h3><%= @album.name %></h3>
+    <p class="muted"><%= @album.description.html_safe %></p>
+  </div> 
+  <ul id="imgholder" class="gallery clearfix" data-gallery-id="<%= @album.id.to_s %>">
+    <% @images.each do |image| %>
+      <%= render :partial=>"image", :object=>image %>
+    <% end %>
+  </ul>
+</div>
+ <div id="dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Delete item" aria-hidden="true">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+      <h3>Delete Photo?</h3>
+    </div>
+    <div class="modal-body">
+      <span class="text-warning text-center">This action can not be restored, are you sure you want to delete?</span>
+      <div class="spinning">
+        <i class="icon-spinner icon-spin icon-4x"></i>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+      <button class="delete-item btn btn-danger" id="delete_selected_photos_btn">Delete</button>
+    </div>
+  </div>
+  <div id="view-photo-tags" class="nano" style="display:none">
+      <div class="content">
+        <form>
+          <fieldset>
+           <legend>Tags</legend>
+            <ul class="tags-groups">
+              <% @tags.each do |tag| %>
+              <li class="filter-item">
+                <p class="card pull-left">
+                  <input type="checkbox" value="<%= tag.id.to_s %>">
+                </p>
+                <a>
+                  <% @site_in_use_locales.each_with_index do |locale, i| %>
+                    <span class="tag"><%= tag.name_translations[locale] %></span>
+                    <% if @site_in_use_locales.count-1 != i %>
+                      /
+                    <% end %>  
+                  <% end %>
+                </a>
+              </li>
+              <% end %>
+            </ul>
+            <div class="form-actions">
+              <a href="javascript:$.pageslide.close()" class="btn btn-small">Cancel</a>
+              <input type="submit" value="Save" class="btn btn-primary" />
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
+
+    <div id="view-photo-depiction" class="nano" style="display:none">
+      <div class="content">
+        <form for="description" method="post" data-remote="true" action="/panel/gallery/back_end/update_image">
+          <fieldset>
+            <legend>Description</legend>
+             <% @site_in_use_locales.each_with_index do |locale, i| %>
+                <label><%= I18nVariable.from_locale(locale) %></label>
+                <textarea rows="10" name="album_image[description_translations][<%= locale %>]" for="<%= locale %>"></textarea>
+            <% end %>
+            <div class="form-actions">
+              <a href="javascript:$.pageslide.close()" class="btn btn-small">Cancel</a>
+              <input type="submit" value="Save" class="btn btn-primary" />
+              <input type="hidden" value="" name="image_id" />
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
+
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "jquery.masonry.min.js" %>
+  <%= javascript_include_tag "jquery.lite.image.resize.js" %>
+  <%= javascript_include_tag "lib/checkbox.card" %>
+  <%= javascript_include_tag "file-upload/vendor/jquery.ui.widget.js" %>
+  <%= javascript_include_tag "file-upload/tmpl.min.js" %>
+  <%= javascript_include_tag "file-upload/load-image.min.js" %>
+  <%= javascript_include_tag "file-upload/canvas-to-blob.min.js" %>
+  <%= javascript_include_tag "file-upload/jquery.iframe-transport.js" %>
+  <%= javascript_include_tag "file-upload/jquery.fileupload.js" %>
+  <%= javascript_include_tag "file-upload/jquery.fileupload-fp.js" %>
+  <%= javascript_include_tag "file-upload/jquery.fileupload-ui.js" %>
+  <%= javascript_include_tag "file-upload/drop-zone.js" %>
+  <%= javascript_include_tag "gallery" %>
+<% end %>
+ <!-- The template to display files available for upload -->
+<script id="template-upload" type="text/x-tmpl">
+    {% for (var i=0, file; file=o.files[i]; i++) { %}
+      <li class="template-upload fade">
+        <ul class="clearfix">
+            <li class="action-bnt">
+              {% if (o.files.valid && !i) { %}
+                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+                  <div class="bar" style="width:0%;"></div>
+                </div>
+                {% if (!o.options.autoUpload) { %}
+                  <button class="btn btn-primary start">
+                    <i class="icon-upload icon-white"></i>
+                  </button>
+                {% } %}
+              {% } %}
+              {% if (!i) { %}
+                <button class="btn btn-warning cancel">
+                  <i class="icon-ban-circle icon-white"></i>
+                </button>
+              {% } %}
+            </li>
+            <li class="preview pull-left"><span class="fade"></span></li>
+            <li class="name-size">
+              <p>{%=file.name%}</p>
+              {% if (file.error) { %}
+                <p class="error"><span class="label label-important">Error</span> {%=file.error%}</p>
+              {% } else if (o.files.valid && !i) { %}
+                <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
+              {% } %}
+            </li>
+          </ul>
+      </li>
+    {% } %}
+  </script>
+  <!-- The template to display files available for download -->
+<script id="template-download" type="text/x-tmpl">
+  {% for (var i=0, file; file=o.files[i]; i++) { %}
+    <li class="template-download fade">
+      <ul class="clearfix">
+        {% if (file.error) { %}
+          <li class="name-size">
+            <p>{%=file.name%}</p>
+            <p class="error"><span class="label label-important">Error</span> {%=file.error%}</p>
+          </li>
+        {% } else { %}
+          <li class="preview">
+            {% if (file.thumbnail_url) { %}
+              <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
+            {% } %}
+          </li>
+          <li class="name-size">
+            <p><a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a></p>
+            <p ><span class="label label-success">Success</span> File uploaded successfully!</p>
+            <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
+          </li>
+        {% } %}
+      </ul>
+    </li>
+  {% } %}
+</script>
+
+
+

app/views/panel/gallery/back_end/albums/upload_panel.html.erb

@@ -0,0 +1,107 @@
+<html>
+<head>
+<%= csrf_meta_tag %>
+<%= javascript_include_tag "jquery-latest" %>
+<%= stylesheet_link_tag "jquery-ui" %>
+<%= stylesheet_link_tag "jquery.fileupload-ui.css" %>
+
+</head>
+<body>
+<div id='scroller_for_panel'>
+<div id="fileupload">
+    <%= form_for @album, :url => panel_gallery_back_end_upload_image_path, :html => {:class => 'clear'} do |f| %>
+        <div class="fileupload-buttonbar">
+            <label class="fileinput-button">
+                <span>Add files...</span>
+                <input type="file" name="files[]" multiple>
+            </label>
+             <input type="hidden" value="<%= params[:album_id] %>" name="album_id" id="fileupload_aid" />
+            <button type="submit" class="start">Start upload</button>
+            <button type="reset" class="cancel">Cancel upload</button>
+           <!-- <button type="button" class="delete">Delete files</button>-->
+        </div>
+    <!-- </form> -->
+    <% end %>
+    <div class="fileupload-content">
+        <table class="files"></table>
+        <div class="fileupload-progressbar"></div>
+    </div>
+</div>
+<script id="template-upload" type="text/x-jquery-tmpl">
+    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
+        <td class="preview"></td>
+        <td class="name">{{if name}}${name}{{else}}Untitled{{/if}}</td>
+        <td class="size">${sizef}</td>
+        {{if error}}
+            <td class="error" colspan="2">Error:
+                {{if error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="progress"><div></div></td>
+            <td class="start"><button>Start</button></td>
+        {{/if}}
+        <td class="cancel"><button>Cancel</button></td>
+    </tr>
+</script>
+<script id="template-download" type="text/x-jquery-tmpl">
+    <tr class="template-download{{if error}} ui-state-error{{/if}}">
+        {{if error}}
+            <td></td>
+            <td class="name">${name}</td>
+            <td class="size">${sizef}</td>
+            <td class="error" colspan="2">Error:
+                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
+                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
+                {{else error === 3}}File was only partially uploaded
+                {{else error === 4}}No File was uploaded
+                {{else error === 5}}Missing a temporary folder
+                {{else error === 6}}Failed to write file to disk
+                {{else error === 7}}File upload stopped by extension
+                {{else error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
+                {{else error === 'emptyResult'}}Empty file upload result
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="preview">
+                {{if thumbnail_url}}
+                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
+                {{/if}}
+            </td>
+            <td class="name">
+                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
+            </td>
+            <td class="size">${sizef}</td>
+            <td colspan="2"></td>
+        {{/if}}
+       
+    </tr>
+</script>
+
+</div>
+
+    <%= javascript_include_tag "jquery-ui.min" %>
+    <%= javascript_include_tag "jquery.tmpl.min" %>
+    <%= javascript_include_tag "jquery.iframe-transport" %>
+    <%= javascript_include_tag "jquery.fileupload" %>
+    <%= javascript_include_tag "jquery.fileupload-ui" %>
+    <%= javascript_include_tag "upload" %>
+    
+</body>
+</html>
+
+<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+<script src="../../js/gallery/jquery.iframe-transport.js"></script>
+<script src="../../js/gallery/jquery.fileupload.js"></script>
+<script src="../../js/gallery/jquery.fileupload-ui.js"></script>
+<script src="../../js/gallery/upload.js"></script> -->

app/views/panel/gallery/back_end/gallery_categories/_category.html.erb

@@ -0,0 +1,13 @@
+  <div class="tag clear">
+      <div class="tagitem">
+        <i class="icon-folder-close"></i>
+        <% @site_valid_locales.each do |locale| %>
+       		<span class="value" for="<%= locale %>"><%= category.name_translations[locale] rescue nil %> </span>
+       	<% end %>
+      </div>
+      <div class="action">
+        <%= link_to(t(:delete_), panel_gallery_back_end_gallery_category_path(category), :method => :delete, :confirm => t("sure?"), :remote => true, :class => "delete") %>
+         <%= link_to(t(:edit), edit_panel_gallery_back_end_gallery_category_path(category), :remote => true, :class => "edit") %>
+      	<%= show_gallery_category_permission_link(category) %>
+      </div>
+    </div>

app/views/panel/gallery/back_end/gallery_categories/create.js.erb

@@ -0,0 +1,2 @@
+var dom = $("<%= j render :partial => 'category', :object => @category %>");
+$("div#tags").append(dom);

app/views/panel/gallery/back_end/gallery_categories/edit.html.erb

@@ -0,0 +1,10 @@
+<%= form_for @category, :url => panel_gallery_back_end_gallery_category_path(@category), :remote => true do |f| %>
+  <%= f.fields_for :name_translations do |name| %>
+    <% @site_valid_locales.each do |locale| %>
+      <%= label_tag(locale,t("gallery.new_category")+"["+I18nVariable.from_locale(locale)+"]") %>
+      <%= name.text_field locale, :value =>(@category.name_translations[locale]) %> 
+    <% end %>
+  <% end %>
+<%= f.submit t("gallery.save"), :class=> "btn btn-primary temp_save_btn" %>
+<a href="#" class="btn btn-primary" id="temp_cancel_btn" onclick="return false;"><%= I18n.t(:cancel) %></a>
+<% end %> 

app/views/panel/gallery/back_end/gallery_categories/index.html.erb

@@ -0,0 +1,50 @@
+	<div id="tags" class="clear">
+      <%= render :partial => 'category', :collection => @categorylist %>  
+ </div>
+    <div class="form-actions form-fixed form-inline pagination-right">
+        <%= form_for @new_category, :url => {:action => "create"}, :remote => true do |f| %>
+          <%= f.fields_for :name_translations do |name| %>
+            <% @site_valid_locales.each do |locale| %>
+              <%= label_tag(locale,t("gallery.new_category")+"["+I18nVariable.from_locale(locale)+"]") %>
+              <%= name.text_field locale %> 
+            <% end %>
+          <% end %>
+          <%= f.submit t("gallery.save"), :class=> "btn btn-primary" %>
+        <% end %> 
+		</div>
+<script type="text/javascript">
+	var deleteCategory = function(a){
+	  	var parent = a.parent().parent();
+       parent.hide("slide",function(){parent.remove();})
+	}
+  var parent;
+	var editCategory = function(a,data){
+    parent = a.parent().parent();
+      var parenthtml = parent.html();
+      var tempdom = $("<div class='tagitem'></div>");
+      tempdom.append(data);
+      parent.html(tempdom);
+      tempdom.find("a#temp_cancel_btn").click(function(){
+        parent.html(parenthtml);
+      })
+	}
+
+  $(document).ready(function(){
+      $("#tags div.action a.delete").live('ajax:success', function(){
+        deleteCategory($(this));
+      })
+      $("#tags div.action a.edit").live('ajax:success',function(evt, data, status, xhr){
+        editCategory($(this),data);
+      })
+  })
+</script>
+
+
+
+
+
+
+
+
+
+

app/views/panel/gallery/back_end/gallery_categories/update.js.erb

@@ -0,0 +1,2 @@
+var dom = $("<%= j render :partial => 'category', :object => @category %>");
+parent.html(dom.html());

app/views/panel/gallery/front_end/album_images/upload_panel.html.erb

@@ -0,0 +1,111 @@
+<html>
+<head>
+<%= csrf_meta_tag %>
+<%= javascript_include_tag "jquery-latest" %>
+<%= stylesheet_link_tag "jquery-ui" %>
+<%= stylesheet_link_tag "jquery.fileupload-ui.css" %>
+
+</head>
+<body>
+<div id='scroller_for_panel'>
+<div id="fileupload">
+<%= form_for @album, :url => panel_gallery_back_end_album_path(@album), :html => {:class => 'clear'} do |f| %>
+
+    <!-- <form action="upload_image" method="POST" enctype="multipart/form-data"> -->
+        <div class="fileupload-buttonbar">
+            <label class="fileinput-button">
+                <span>Add files...</span>
+                <input type="file" name="files[]" multiple>
+            </label>
+          <!--   <input type="hidden" value="" name="aid" id="fileupload_aid" /> -->
+            <button type="submit" class="start">Start upload</button>
+            <button type="reset" class="cancel">Cancel upload</button>
+           <!-- <button type="button" class="delete">Delete files</button>-->
+        </div>
+    <!-- </form> -->
+    <% end %>
+    <div class="fileupload-content">
+        <table class="files"></table>
+        <div class="fileupload-progressbar"></div>
+    </div>
+</div>
+<script id="template-upload" type="text/x-jquery-tmpl">
+    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
+        <td class="preview"></td>
+        <td class="name">{{if name}}${name}{{else}}Untitled{{/if}}</td>
+        <td class="size">${sizef}</td>
+        {{if error}}
+            <td class="error" colspan="2">Error:
+                {{if error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="progress"><div></div></td>
+            <td class="start"><button>Start</button></td>
+        {{/if}}
+        <td class="cancel"><button>Cancel</button></td>
+    </tr>
+</script>
+<script id="template-download" type="text/x-jquery-tmpl">
+    <tr class="template-download{{if error}} ui-state-error{{/if}}">
+        {{if error}}
+            <td></td>
+            <td class="name">${name}</td>
+            <td class="size">${sizef}</td>
+            <td class="error" colspan="2">Error:
+                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
+                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
+                {{else error === 3}}File was only partially uploaded
+                {{else error === 4}}No File was uploaded
+                {{else error === 5}}Missing a temporary folder
+                {{else error === 6}}Failed to write file to disk
+                {{else error === 7}}File upload stopped by extension
+                {{else error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
+                {{else error === 'emptyResult'}}Empty file upload result
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="preview">
+                {{if thumbnail_url}}
+                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
+                {{/if}}
+            </td>
+            <td class="name">
+                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
+            </td>
+            <td class="size">${sizef}</td>
+            <td colspan="2"></td>
+        {{/if}}
+       
+    </tr>
+</script>
+<script type="text/javascript">
+    $("input#fileupload_aid").val(parent.g.urlVars['album']);
+</script>
+</div>
+
+    <%= javascript_include_tag "jquery-ui.min" %>
+    <%= javascript_include_tag "jquery.tmpl.min" %>
+    <%= javascript_include_tag "jquery.iframe-transport" %>
+    <%= javascript_include_tag "jquery.fileupload" %>
+    <%= javascript_include_tag "jquery.fileupload-ui" %>
+    <%= javascript_include_tag "upload" %>
+    
+</body>
+</html>
+
+<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+<script src="../../js/gallery/jquery.iframe-transport.js"></script>
+<script src="../../js/gallery/jquery.fileupload.js"></script>
+<script src="../../js/gallery/jquery.fileupload-ui.js"></script>
+<script src="../../js/gallery/upload.js"></script> -->

app/views/panel/gallery/front_end/albums/_album.html.erb

@@ -0,0 +1,14 @@
+<div class='rgalbum'>
+	<a class='cover' title='<%= album.name %>' href='<%= panel_gallery_front_end_album_path(album) %>'>
+	 <% if album.cover == "default" %>
+	     <%= image_tag "gallery/default.jpg" %>
+	  <% else %>
+	     <img src="<%= album.cover_path %>">
+    <% end %>
+	</a>
+	<span class='categoryname'><i class='icon-folder-close'></i><%=  Category.find(album.category_id).title %></span>
+	<span class='albumname'>
+		<a title='<%= album.description %>' href='<%= panel_gallery_front_end_album_path(album) %>'><%= album.name %></a>
+	</span>
+	<span class='tagnames'></span>
+</div>

app/views/panel/gallery/front_end/albums/_image.html.erb

@@ -0,0 +1,5 @@
+<div class='rgphoto'>
+	<a title='<%= image.description %>' href='<%= theater_panel_gallery_front_end_album_path(@album,:image_id=>image) %>'>
+		<img src='<%= image.file.thumb.url %>'/>
+	</a>
+</div>

app/views/panel/gallery/front_end/albums/index.html.erb

@@ -0,0 +1,14 @@
+<%#= stylesheet_link_tag "gallery_frontend" %>
+
+<div id="orbit_gallery" class="rg">
+  <div class="rgbody">
+    <div id="imgholder">
+      <% @albums.each do |album| %>
+        <%= render :partial => "album", :object => album %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+
+

app/views/panel/gallery/front_end/albums/show.html.erb

@@ -0,0 +1,12 @@
+<%#= stylesheet_link_tag "gallery_frontend" %>
+
+<div id="orbit_gallery" class="rg">
+  <div class="rgbody">
+    <div id="imgholder">
+      <% @images.each do |image| %>
+        <%= render :partial => "image", :object => image %>
+      <% end %>
+    </div>
+  </div>
+</div>
+

app/views/panel/gallery/front_end/albums/theater.html.erb

@@ -0,0 +1,66 @@
+
+<%= stylesheet_link_tag "gallery_frontend" %>
+
+<div id="orbit_gallery" class="rg">
+  <div class="rgbody">
+    <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="rslidenav">
+            <a href="" class="navP" title="上一張" onclick="return false;">Prev</a>
+            <a href="" class="navN" title="下一張" onclick="return false;">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>
+            <% 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>
+          <div class="slideinfo">
+            <span class="info"><%= @image.description %></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- tag part -->
+  <div class="taglist"> 
+    <h3 class="taglist_title"><%= t('gallery.photo_tag') %></h3>
+    <ul>
+      <% @tagnames.each do |tagname| %>
+        <li><%= tagname %></li>
+      <% end %>
+    </ul>
+  </div>
+  <!-- tag end -->
+  <div class="form-actions form-fixed pagination-right rghead">
+  <div class="rgfn">
+    <a class="bt-back rgbt" title="<%= I18n.t("gallery.back_to_albums") %>" href="<%= @back_link %>"><i class="icon-arrow-left"></i> <%= I18n.t("gallery.back_to_albums") %></a>
+  </div>
+</div>
+</div>
+
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "galleryAPI_frontend" %>
+   <%#= javascript_include_tag "jquery.tinyscrollbar" %>
+  <%= javascript_include_tag "rss" %>
+<% end %>
+
+<script type="text/javascript">
+  galleryAPI.prototype.locale = "<%= I18n.locale %>";
+    	var gallery = new galleryAPI();
+    	gallery.initialize();
+    	gallery.loadTheater("<%= params[:id] %>","<%= params[:image_id] %>");
+</script>
+
+
+
+
+

app/views/panel/gallery/front_end/orbit_galleries/add_album.html.erb

@@ -0,0 +1,34 @@
+<div class="modal-window" id="categories">
+  <div class="modal-header">
+    <h3><%= t("gallery.add_album") %></h3>
+  </div>
+  <div class="modal-body add-album">
+    <select id="category_list">
+        <option value=""><%= t("gallery.select_category") %></option>
+      <% @categorylist.each do |category| %>
+        <option value='<%= category.id %>' ><%= category.name %></option>
+      <% end %>
+    </select>
+    <ul class="nav nav-tabs">
+      <% @site_valid_locales.each_with_index do |locale, i| %>
+        <li <%= ( i == 0 ) ? "class=active" : '' %>><a data-toggle="tab" href=".<%= locale %>"><%= I18nVariable.from_locale(locale) %></a></li>
+      <% end %>
+    </ul>
+    <div class="tab_content form-horizontal">
+      <% @site_valid_locales.each_with_index do |locale, i| %>
+      <% if i == 0 %>
+        <div class="<%= locale %> fade tab-pane in active">
+      <% else %>
+        <div class="<%= locale %> fade tab-pane" >
+      <% end %>
+        <p class="control-group"><label class="control-label"><%= t("gallery.album_name") %></label><input type="text" id="name_<%= locale %>" /></p>
+        <p class="control-group"><label class="control-label"><%= t("gallery.album_desc") %></label><input type="text" id="desc_<%= locale %>" /></p>
+      </div>
+    <% end %>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn" data-dismiss="modal" id="album_name_close_btn" onclick="return false;"><%= t(:close) %></a>
+    <a href="#" class="btn btn-primary" id="album_name_save_btn" onclick="return false;"><%= t("gallery.save_changes") %></a>
+  </div>
+</div>

app/views/panel/gallery/front_end/orbit_galleries/categorylist.html.erb

@@ -0,0 +1,89 @@
+	<div id="tags" class="clear">
+	<% @categorylist.each do |category| %>
+    <div class="tag clear">
+      <div class="tagitem">
+        <i class="icon-folder-close"></i>
+        <% @site_valid_locales.each do |locale| %>
+       		<span class="value" for="<%= locale %>"><%= category.name_translations[locale] %> </span>
+       	<% end %>
+      </div>
+      <div class="action">
+      	<a href="<%= category.id %>" class='delete' onclick='return false;'><%= t(:delete_) %></a>
+      	<a href="<%= category.id %>" class='edit' onclick='return false;'><%= t(:edit) %></a>
+      	<%= show_gallery_category_permission_link(category) %>
+      </div>
+    </div>
+   <% end %>
+ </div>
+    <div class="form-actions form-fixed pagination-right">
+			<div style="margin:0;padding:0;display:inline">
+				<%= t("gallery.new_category")+"["+ t("gallery.english")+"]"  %> : <input type="text" id="category_name_en" />
+  			<%= t("gallery.new_category") +"["+ t("gallery.chinese")+"]" %> : <input type="text" id="category_name_zh_tw" />
+  			<a href="#" class="btn btn-primary" id="category_save_btn" onclick="return false;"><%= t("gallery.save") %></a>
+			</div>
+		</div>
+<script type="text/javascript">
+	var deleteCategory = function(a){
+	  	var cid = a.attr("href");
+	  	var parent = a.parent().parent();
+	    $.post("gallery_category_delete",{id:cid},function(response){
+	    if(response.success)
+		     parent.hide("slide",function(){parent.remove();})
+	  })
+	}
+
+	var editCategory = function(a){
+			var cid = a.attr("href");
+			var parent = a.parent().parent();
+			var parenthtml = parent.html();
+			var tempdom = $("<div class='tagitem'></div>");
+			parent.find("span.value").each(function(){
+				var locale = $(this).attr("for");
+				var lang = {
+					"en" : "English",
+					"zh_tw" : "Chinese"
+				}
+				tempdom.append("<label>"+lang[locale] + " :</label><input type='text' id='temp_name_"+locale+"' value='"+$(this).text()+"' />");
+			})
+			tempdom.append('<br /><a href="#" class="btn btn-primary" id="temp_save_btn" onclick="return false;"><%= I18n.t("gallery.save") %></a> <a href="#" class="btn btn-primary" id="temp_cancel_btn" onclick="return false;"><%= I18n.t(:cancel) %></a>');
+			tempdom.find("a#temp_cancel_btn").click(function(){
+				parent.html(parenthtml);
+				parent.find("div.action a.delete").click(function(){
+					 deleteCategory($(this));
+				})
+				parent.find(" div.action a.edit").click(function(){
+					editCategory($(this));
+				})
+			})
+			parent.html(tempdom);
+	}
+
+  $(document).ready(function(){
+      $("#tags div.action a.delete").click(function(){
+        deleteCategory($(this));
+      })
+      $("#tags div.action a.edit").click(function(){
+        editCategory($(this));
+      })
+      $("#category_save_btn").click(function(){
+        var lang = {
+          "en" : $("#category_name_en").val(),
+          "zh_tw" : $("#category_name_zh_tw").val()
+       	};
+        
+        $.post("gallery_category_save",{"category":lang},function(response){
+          if(response.success){
+          	var $dom = $('<div class="tag clear hide"><div class="tagitem"><i class="icons-star"></i>'+lang.en+' '+lang.zh_tw+'</div> <div class="action"><a href="'+response.id+'" class="delete" onclick="return false;"><%= I18n.t(:delete_) %></a></div></div>');
+            $("div#tags").append($dom);
+            $dom.show('slide');
+            $dom.find("a.delete").click(function(){
+              deleteCategory($(this));
+            })
+            $("input[type=text]").val("");
+          }
+        })
+
+     })
+
+  })
+</script>

app/views/panel/gallery/front_end/orbit_galleries/edit_album.html.erb

@@ -0,0 +1,74 @@
+<ul class="breadcrumb">
+	<li><span>Home</span><span class="divider">/</span></li>
+	<li><span><%= t('gallery.gallery') %></span><span class="divider">/</span></li>
+	<li class="text-blue"><%= t(:edit) %></li>
+</ul>
+<ul class="nav nav-tabs">
+	<% @site_valid_locales.each_with_index do |locale, i| %>
+    <li <%= ( i == 0 ) ? "class=active" : '' %>><a data-toggle="tab" href=".<%= locale %>"><%= I18nVariable.from_locale(locale) %></a></li>
+	<% end %>
+</ul>
+<form id="edit_album" action="update_album" method="post">
+	<div class="tab_content">
+		<% @site_valid_locales.each_with_index do |locale, i| %>
+			<% if i == 0 %>
+				<div class="<%= locale %> fade tab-pane in active">
+			<% else %>
+				<div class="<%= locale %> fade tab-pane" >
+			<% end %>
+
+			<div class="albumname_edit">
+				<label for=""><%= t("gallery.album_name") %></label>
+				<div class="inputui rginput rgih26 w380"><input type="text" name="album[name_translations][<%= locale %>]" value="<%= @album_name[locale] %>" class="txtchange" /></div>
+			</div>
+
+			<div class='description_loader'>
+				<% @images.each_with_index do |image,x| %>
+					<div class="rgphoto_edit <%= locale %>">
+						<a href="orbit_gallery?theater=<%= image.id %>"><img src="<%= image.file.thumb.url %>"></a>
+						<div class="inputui rginput rgih98 w380">
+							<textarea name="gallery_album_gallery_images_attributes[<%= x %>][description_translations][<%= locale %>]" class="txtchange" for="<%= image.id %>"><%= image.description_translations[locale] %></textarea>
+						</div>
+						<div class="edit_fn">
+							<% if image.id.to_s == @cover %>
+								<a class="btn btn-primary rgbtsg bt-cover setcover active" onclick="return false;" title="<%= t("gallery.cover") %>" href="<%= image.id %>"><span class="icon-star icon-white"></span></a>
+							<% else %>
+								<a class="btn rgbtsg bt-cover" onclick="return false;" title="<%= t("gallery.set_cover") %>" href="<%= image.id %>"><span class="icon-star-empty"></span></a>
+							<% end %>
+							<a class="btn rgbtsg bt-tag" onclick="return false;" title="<%= t("gallery.photo_tag") %>" href="<%= image.id %>"><span class="icon-tags"></span></a>
+							<a class="btn rgbtsg bt-dels" onclick="return false;" title="<%= t(:delete_) %>" href="<%= image.id %>"><span class="icon-trash"></span></a>
+						</div>
+					</div>
+				<% end %>
+			</div>	
+		</div>
+	<% end %>
+	<input type="submit" value="Submit" />
+</form>
+	
+	<!-- <div class="tab-pane in active">
+		<div class="albumname_edit">
+			<label for="">Album Name:</label>
+			<div class="inputui rginput rgih26 w380"><span><input type="text" id='album_name_text' value="<%= @album_name %>" class="txtchange" /></span></div>
+		</div>
+		<div id='description_loader'>
+			<% @images.each do |image| %>
+			<div class="rgphoto_edit">
+				<a href="orbit_gallery?theater=<%= image.id %>"><img src="<%= image.file.thumb.url %>"></a>
+				<div class="inputui rginput rgih98 w380">
+					<span>
+						<textarea  name="description_box" class="txtchange" for="<%= image.id%>"><%= image.description %></textarea>
+					</span>
+				</div>
+				<div class="edit_fn">
+					<a class="rgui rgbt rgbtsg bt-dels" onclick="return false;" title="Delete" href="<%= image.id %>">Delete</a>
+					<% if image.id.to_s == @cover %>
+						<a class="rgui rgbt rgbtsg bt-cover setcover" onclick="return false;" title="Set Cover" href="<%= image.id %>">Set Cover</a>
+					<% else %>
+						<a class="rgui rgbt rgbtsg bt-cover" onclick="return false;" title="Set Cover" href="<%= image.id %>">Set Cover</a>
+					<% end %>
+				</div>
+			</div>
+			<% end %>
+		</div>
+	</div>  -->

app/views/panel/gallery/front_end/orbit_galleries/index.html.erb

@@ -0,0 +1,95 @@
+
+<%= stylesheet_link_tag "gallery_frontend" %>
+
+<div id="orbit_gallery" class="rg">
+  <!-- <div class="rghead">
+    <div class="rgfn">
+        
+    </div>
+  </div> -->
+  
+  <div class="rgbody">
+    <div id="imgholder">
+
+    </div>
+  </div>
+  <!-- tag part -->
+  <%# if @authenticated %>
+  <div id="tag_panel" class="my_scroll">
+    <div class="scrollbar">
+      <div class="track">
+        <div class="thumb">
+          <div class="end"></div>
+        </div>
+      </div>
+    </div>
+     <% 
+        @locales = Array.new
+        @site_valid_locales.each do |locale|
+          @locales << locale
+        end
+      %>
+    <div class="viewport">
+      <div class="overview">
+        <ul class="tag_list" id="gallery_tag_list">
+          <% @tags.each do |tag| %>
+             <li data-content="<%= tag.id %>"><input id="tag_<%= tag.id %>" type="checkbox"><label for="tag_<%= tag.id %>"><%= tag.name %></label><span style="display:none;"><%= tag[@locales[1]] %> <%= tag[@locales[0]] %></span></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+    <div class="tag_search"><div class="icon-search"></div><input type="text" value="<%= t('gallery.search_tags') %>" onblur="if(this.value=='')this.value='<%= t('gallery.search_tags') %>';" onfocus="if(this.value=='<%= t("gallery.search_tags") %>')this.value='';" id="tag_search_box"><div class="tag_save"><a class="btn bt-save"><i class="icon-ok"></i><%= I18n.t("gallery.save") %></a></div></div>
+    
+  </div>
+  <%# end %>
+  <% content_for :page_specific_javascript do %>
+   <%= javascript_include_tag "jquery.tinyscrollbar" %>
+  <% end %>
+  <div class="taglist"> <!-- add "album_tags" or "photo_tags" class to .taglist -->
+    <h3 class="taglist_title"><%= t('gallery.album_tag') %></h3>
+    <ul>
+      <li>Computer,</li>
+      <li>Birds,</li>
+      <li>Girls,</li>
+      <li>Boys,</li>
+      <li>Human</li>
+    </ul>
+  </div>
+  <!-- tag end -->
+  <div class="rghead">
+  <div class="rgfn">
+  <!--   <a href="" class="btn btn-primary pull-right"><i class="icon-plus icon-white"></i>新增</a> -->
+  </div>
+</div>
+</div>
+<script type="text/javascript">
+galleryAPI.prototype.loadFooterPanel = function(area,id,callbackFn){
+    var headarea = null;
+    if(area == "images"){
+      headarea = '<a class="bt-back rgbt" title="<%= I18n.t("gallery.back_to_albums") %>" href="gallery"><i class="icon-arrow-left"></i> <%= I18n.t("gallery.back_to_albums") %></a> ';
+       // headarea+='<a class="bt-tag btn btn-primary pull-right" title="<%= I18n.t("gallery.album_tag") %>" href="" ><i class="icon-tag icon-white"></i><%= I18n.t("gallery.album_tag") %></a>';
+      
+    }else if (area == "theater"){
+      headarea = '<a href="" class="bt-back rgbt" title="<%= I18n.t("gallery.back_to_photos") %>"><i class="icon-arrow-left"></i> <%= I18n.t("gallery.back_to_photos") %></a></div>';
+      // headarea+= '<a class="bt-tag btn btn-primary pull-right" title="<%= I18n.t("gallery.photo_tag") %>" href="" ><i class="icon-tag icon-white"></i><%= I18n.t("gallery.photo_tag") %></a>';
+    }
+    if(typeof callbackFn == "function"){
+      callbackFn.call(this,headarea);
+    }
+  }
+</script>
+<% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "galleryAPI_frontend" %>
+  <%= javascript_include_tag "rss" %>
+<% end %>
+
+<script type="text/javascript">
+  galleryAPI.prototype.locale = "<%= I18n.locale %>";
+	var gallery = new galleryAPI();
+	gallery.initialize();
+</script>
+
+
+
+
+

app/views/panel/gallery/front_end/orbit_galleries/theater.html.erb

@@ -0,0 +1,34 @@
+<!-- <div class="rghead">
+		<div class="rgfn">
+				<a href="" class="rgui bt-back rgbt" title="Back" id='bakbtngallery'><span id='album_name_span'>Back to photos</span></a>
+				</div>
+               <div class="rgtitle">Gallery</div>
+		</div>
+	</div> -->
+	<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.url %>" alt="" /></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>
+			</div>
+		</div>
+		<div class="slidelist">
+			<ul id='galleryimagelist' style="display:none;">
+				<% i=0 %>
+				<% @images.each do |image| %>
+					<li for="<%= i %>"><a href="orbit_gallery?theater=<%= image.id %>" class="list_element" data-content="<%= image.file.url %>" onclick="return false;"><img src="<%= image.file.thumb.url %>" alt="" /></a></li>
+					<% i=i+1 %>
+				<% 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>
+			<div class="slideinfo">
+			<!-- 	<b class="info"><%= @image.title %></b> -->
+				<span class="info"><%= @image.description %></span>
+			</div>
+		</div>
+	</div>

app/views/panel/gallery/front_end/orbit_galleries/upload_panel.html.erb

@@ -0,0 +1,108 @@
+<html>
+<head>
+<%= csrf_meta_tag %>
+<%= javascript_include_tag "jquery-latest" %>
+<%= stylesheet_link_tag "jquery-ui" %>
+<%= stylesheet_link_tag "jquery.fileupload-ui.css" %>
+
+</head>
+<body>
+<div id='scroller_for_panel'>
+<div id="fileupload">
+    <form action="upload_image" method="POST" enctype="multipart/form-data">
+        <div class="fileupload-buttonbar">
+            <label class="fileinput-button">
+                <span>Add files...</span>
+                <input type="file" name="files[]" multiple>
+            </label>
+            <input type="hidden" value="" name="aid" id="fileupload_aid" />
+            <button type="submit" class="start">Start upload</button>
+            <button type="reset" class="cancel">Cancel upload</button>
+           <!-- <button type="button" class="delete">Delete files</button>-->
+        </div>
+    </form>
+    <div class="fileupload-content">
+        <table class="files"></table>
+        <div class="fileupload-progressbar"></div>
+    </div>
+</div>
+<script id="template-upload" type="text/x-jquery-tmpl">
+    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
+        <td class="preview"></td>
+        <td class="name">{{if name}}${name}{{else}}Untitled{{/if}}</td>
+        <td class="size">${sizef}</td>
+        {{if error}}
+            <td class="error" colspan="2">Error:
+                {{if error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="progress"><div></div></td>
+            <td class="start"><button>Start</button></td>
+        {{/if}}
+        <td class="cancel"><button>Cancel</button></td>
+    </tr>
+</script>
+<script id="template-download" type="text/x-jquery-tmpl">
+    <tr class="template-download{{if error}} ui-state-error{{/if}}">
+        {{if error}}
+            <td></td>
+            <td class="name">${name}</td>
+            <td class="size">${sizef}</td>
+            <td class="error" colspan="2">Error:
+                {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
+                {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
+                {{else error === 3}}File was only partially uploaded
+                {{else error === 4}}No File was uploaded
+                {{else error === 5}}Missing a temporary folder
+                {{else error === 6}}Failed to write file to disk
+                {{else error === 7}}File upload stopped by extension
+                {{else error === 'maxFileSize'}}File is too big
+                {{else error === 'minFileSize'}}File is too small
+                {{else error === 'acceptFileTypes'}}Filetype not allowed
+                {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+                {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
+                {{else error === 'emptyResult'}}Empty file upload result
+                {{else}}${error}
+                {{/if}}
+            </td>
+        {{else}}
+            <td class="preview">
+                {{if thumbnail_url}}
+                    <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
+                {{/if}}
+            </td>
+            <td class="name">
+                <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
+            </td>
+            <td class="size">${sizef}</td>
+            <td colspan="2"></td>
+        {{/if}}
+       
+    </tr>
+</script>
+<script type="text/javascript">
+    $("input#fileupload_aid").val(parent.g.urlVars['album']);
+</script>
+</div>
+
+    <%= javascript_include_tag "jquery-ui.min" %>
+    <%= javascript_include_tag "jquery.tmpl.min" %>
+    <%= javascript_include_tag "jquery.iframe-transport" %>
+    <%= javascript_include_tag "jquery.fileupload" %>
+    <%= javascript_include_tag "jquery.fileupload-ui" %>
+    <%= javascript_include_tag "upload" %>
+    
+</body>
+</html>
+
+<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+<script src="../../js/gallery/jquery.iframe-transport.js"></script>
+<script src="../../js/gallery/jquery.fileupload.js"></script>
+<script src="../../js/gallery/jquery.fileupload-ui.js"></script>
+<script src="../../js/gallery/upload.js"></script> -->

app/views/panel/gallery/widget/albums/widget1.html.erb

@@ -0,0 +1,21 @@
+<%#= stylesheet_link_tag "widget_gallery" %>
+<%# content_for :page_specific_javascript do %>
+  <%#= javascript_include_tag "cycle" %>
+<%# end %>
+<% if @title %>
+  <h2 class="h2"><%= @title %></h2>
+<% end %>
+<div class="four columns">
+	<div class="widget_gallery w1 <%= @class %>">
+		<ul>
+			<% @images.each do |image| %>
+				<li><a href="<%= image['show_link'] %>" title="photo description 1"><img src="<%= image['thumb'] %>" alt=""/></a></li>
+			<% end %>
+			<!-- <li><a href="" title="photo description 2"><img src="images/assets/2.jpg" alt=""/></a></li>
+			<li><a href="" title="photo description 3"><img src="images/assets/3.jpg" alt=""/></a></li>
+			<li><a href="" title="photo description 4"><img src="images/assets/4.jpg" alt=""/></a></li>
+			<li><a href="" title="photo description 5"><img src="images/assets/5.jpg" alt=""/></a></li>
+			<li><a href="" title="photo description 6"><img src="images/assets/6.jpg" alt=""/></a></li> -->
+		</ul>
+	</div>
+</div>

config/locales/en.yml

@@ -0,0 +1,39 @@
+en:
+
+  gallery:
+    add_album: Add Album
+    add_images: Add Images
+    all: All
+    new: New
+    album: Album
+    album_desc: Album Description
+    album_name: Album Name
+    album_not_found: Album Not Found
+    album_tag: Album Tag
+    back_to_albums: Back to Albums
+    back_to_photos: Back to Photos
+    cate_auth: Category Authorization
+    chinese: Chinese
+    cover: Cover
+    del_album: Delete Album
+    del_album?: Delete this album?
+    delete_selected: Delete Selected
+    english: English
+    frontend:
+      albums: Front-end albums
+    gallery: Gallery
+    categories: Category
+    new_category: New Category
+    no_description: No Decription
+    photo_tag: Photo Tag
+    pic_not_found: Picture Not Found
+    save: Save
+    save_changes: Save Changes
+    search_tags: Search Tags
+    select_category: Select Category
+    set_cover: Set as Cover
+    widget:
+      widget1: Widget1
+    widget_option:
+      horizontal: Horizontal
+      vertical: Vertical

config/locales/zh_tw.yml

@@ -0,0 +1,37 @@
+zh_tw:
+
+  gallery:
+    add_album: 新增相冊
+    add_images: 新增影像
+    album: 相冊
+    album_desc: 相冊描述
+    album_name: 相冊名稱
+    album_not_found: 找不到相冊
+    album_tag: 相冊標籤
+    back_to_albums: 回到相冊
+    back_to_photos: 回到相片
+    cate_auth: 類別授權
+    chinese: 中文
+    cover: 封面
+    del_album: 刪除相冊
+    del_album?: 要刪除這本相簿嗎？
+    delete_selected: 刪除已選取項目
+    english: 英文
+    frontend:
+      albums: 相簿前台
+    gallery: 相簿
+    manage_categories: 管理類別
+    new_category: 新增類別
+    no_description: 沒有描述
+    photo_tag: 相片標籤
+    pic_not_found: 找不到圖片
+    save: 儲存
+    save_changes: 儲存變更
+    search_tags: 搜尋標籤
+    select_category: 選擇類別
+    set_cover: 設定為封面
+    widget:
+      widget1: Widget1
+    widget_option:
+      horizontal: 水平
+      vertical: 垂直

config/routes.rb

@@ -0,0 +1,68 @@
+Rails.application.routes.draw do
+
+	namespace :panel do
+		namespace :gallery do
+	    namespace :back_end do
+      	match "get_albums" => "albums#get_albums"
+       
+      	match "upload_image" => "albums#upload_image"
+      	match "save_tags" => "tags#save_tags"
+      	match "albums/save_tags" => "tags#save_tags"
+        match "new_images" => "albums#new_images"
+        match "set_cover" => "albums#set_cover"
+        match "delete_photos" => "album_images#delete_photos"
+        match "update_image" => "album_images#update_image"
+        match "image_tagging" => "album_images#image_tagging"
+       	resources :albums do 
+      		
+      		match "imgs" => "albums#imgs"
+      		match "upload_panel" => "albums#upload_panel"
+      		match "images_tags" => "albums#images_tags"
+          match "get_imgs_json" => "albums#get_imgs_json"
+
+
+          collection do
+            get "get_album_json"
+          end
+	      end
+
+    		match "album_images/#!/:id" => "album_images#show"
+    	
+    		resources :album_images 
+   		end
+	    
+    	namespace :front_end do
+        match "orbit_galleries" => "orbit_galleries#index"
+    		match "get_albums" => "albums#get_albums"
+      	# match "orbit_galleries" => "orbit_galleries#index"
+      	# match "gallery_category_save" => "orbit_galleries#new_category"
+      	# match "categorylist" => "orbit_galleries#categorylist"
+      	# match "gallery_category_delete" => "orbit_galleries#gallery_category_delete"
+      	# match "add_album" => "orbit_galleries#add_album"
+      	# match "create_album" => "orbit_galleries#create_album"
+      	# match "get_albums" => "orbit_galleries#get_albums"
+      	# match "upload_image" => "orbit_galleries#upload_image"
+      	# match "upload_panel" => "orbit_galleries#upload_panel"
+      	# match "get_images" => "orbit_galleries#get_images"
+      	# match "theater" => "orbit_galleries#theater"
+      	# match "delete_album" => "orbit_galleries#delete_album"
+      	# match "edit_album" => "orbit_galleries#edit_album"
+      	# match "set_cover" => "orbit_galleries#set_cover"
+      	# match "delete_images" => "orbit_galleries#delete_images"
+      	# match "update_album" => "orbit_galleries#update_album"
+      	# match "save_tags" => "orbit_galleries#save_tags"
+    		resources :albums do
+      		member do
+      			get "imgs"
+      			get "theater"
+      		end
+    		end
+    		resources :album_images 
+    	end
+      
+    	namespace :widget do
+    		match "widget1" => "albums#widget1"
+    	end
+		end
+	end
+end

gallery.gemspec

@@ -0,0 +1,23 @@
+$:.push File.expand_path("../lib", __FILE__)
+
+# Maintain your gem's version:
+require "gallery/version"
+
+# Describe your gem and declare its dependencies:
+Gem::Specification.new do |s|
+  s.name        = "gallery"
+  s.version     = Gallery::VERSION
+  s.authors     = ["RulingDigital"]
+  s.email       = ["service@rulingcom.com"]
+  s.homepage    = "http://www.rulingcom.com"
+  s.summary     = ""
+  s.description = "Orbit Gallery module"
+
+  s.files = Dir["{app,config,db,lib}/**/*"] + ["MIT-LICENSE", "Rakefile", "README.rdoc"]
+  s.test_files = Dir["test/**/*"]
+
+  # s.add_dependency "rails", "~> 3.1.4"
+  # s.add_dependency "jquery-rails"
+
+  s.add_development_dependency "sqlite3"
+end

gallery.json

@@ -0,0 +1,14 @@
+{
+  "title": "gallery",
+  "version": "0.1",
+  "organization": "Rulingcom",
+  "author": "Visual dep",
+  "intro": "A simple and amazing gallery",
+  "update_info": "Some info",
+  "create_date": "11-08-2012",
+  "app_pages":  ["albums"],
+  "widgets": ["albums"],
+  "category": ["gallery_categories"],
+  "widget_fields":[],
+  "enable_frontend": true
+}

lib/gallery.rb

@@ -0,0 +1,4 @@
+require "gallery/engine"
+
+module Gallery
+end

lib/gallery/engine.rb

@@ -0,0 +1,84 @@
+module Gallery
+  class Engine < Rails::Engine
+  	initializer "gallery" do
+  		OrbitApp.registration "Gallery",:type=> 'ModuleApp' do
+		module_label 'gallery.gallery'
+		base_url File.expand_path File.dirname(__FILE__)    
+		# personal_plugin :enable => true,:path=>"panel/gallery/plugin/profile",:i18n=>'admin.gallery'
+
+		version "0.1"
+		organization "Rulingcom"
+		author "Visual dep"
+		intro "A simple and amazing gallery"
+		update_info 'some update_info'
+
+		front_end do
+		  app_page 'albums' do
+		    frontend_i18n "gallery.front_end.albums"
+		  end
+		end
+		enable_widget_data_count false 
+		authorizable
+		categorizable
+		taggable
+
+		widgets do
+		  # default_widget do
+		  #   query 'Bulletin.all'
+		  #   image :image
+		  # end
+
+		  # categories_query 'GalleryCategory.all'
+		  # tags_query 'GalleryTag.all'
+
+		  #* customize_widget "albums","gallery.widget.albums",:fields=>[],:style=>[],:options=>{"widget1"=>{"vertical"=>[1, 2], "horizontal"=>[1, 2, 3, 4, 5, 6], "album_id"=>{"query"=>"GalleryAlbum.all", "value"=>:id, "label"=>:name}}} 
+		  #* customize_widget_options_fields_i18n({"widget1"=>{"vertical"=>"gallery.widget_option.vertical", "horizontal"=>"gallery.widget_option.horizontal", "album_id"=>"gallery.album"}} )
+
+		  customize_widget "widget1" do 
+		    widget_i18n "gallery.widget.widget1"
+		    style ["1","2"]
+		    options "vertical",:i18n => "gallery.widget_option.vertical",:options_item=>[1, 2]
+		    options "horizontal",:i18n => "gallery.widget_option.horizontal",:options_item=>[1, 2,3,4,5,6]
+		    options "album_id",:i18n =>"gallery.album",:options_item => {"query"=>"Album.all", "value"=>:id, "label"=>:name}
+		  end
+
+		end
+
+		side_bar do
+		  head_label_i18n  'gallery.gallery',:icon_class=>"icons-pictures"
+		  available_for [:admin,:guest,:manager,:sub_manager]
+		  active_for_controllers ({:private=>['albums','album_images','gallery_categories','/panel/gallery/back_end/tags']})
+		  active_for_object_auth ['GalleryCategory'] 
+
+		  head_link_path "panel_gallery_back_end_albums_path"
+
+		  context_link 'gallery.all',
+		                        :link_path=>"panel_gallery_back_end_albums_path" ,
+		                        :priority=>3,
+		                        :active_for_category => 'Gallery',
+		                        :active_for_action=>{:albums=>:index},
+		                        :available_for => [:manager]
+
+		  context_link 'gallery.new',
+		                        :link_path=>"new_panel_gallery_back_end_album_path" ,
+		                        :priority=>3,
+		                        :active_for_category => 'Gallery',
+		                        :active_for_action=>{:albums=>:new},
+		                        :available_for => [:manager]
+		  
+		  context_link 'gallery.categories',
+		                        :link_path=>"admin_module_app_categories_path(get_module_app)" ,
+		                        :priority=>3,
+		                        :active_for_category => 'Gallery',
+		                        :available_for => [:manager]
+
+		  context_link 'tags',
+		                        :link_path=>"admin_module_tags_path(module_app_id: get_module_app)" ,
+		                        :priority=>4,
+		                        :active_for_tag => 'Gallery',
+		                        :available_for => [:manager]
+		end
+		end
+  	end
+  end
+end

lib/gallery/version.rb

@@ -0,0 +1,3 @@
+module Gallery
+  VERSION = "0.0.1"
+end

lib/tasks/gallery_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :gallery do
+#   # Task goes here
+# end

script/rails

@@ -0,0 +1,6 @@
+#!/usr/bin/env ruby
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails 3 gems installed from the root of your application.
+
+ENGINE_PATH = File.expand_path('../..',  __FILE__)
+load File.expand_path('../../test/dummy/script/rails',  __FILE__)