ActionItem152: implementing search inside lightbox

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1193 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem152: implementing search inside lightbox
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1193 3f533792-8f58-4932-b0fe-aaf55b0a4547
AntonioTerceiro
1 parent 372527d6
Showing 8 changed files with 355 additions and 4 deletions Show diff stats
app/controllers/public/search_controller.rb
app/helpers/application_helper.rb
app/helpers/lightbox_helper.rb
app/views/layouts/application.rhtml
app/views/search/popup.rhtml
public/javascripts/lightbox.js
public/stylesheets/lightbox.css
test/unit/lightbox_helper_text.rb
@@ -52,8 +52,8 @@ class SearchController &lt; ApplicationController
     @tagged = @tag.taggings.map(&:taggable)
   end
-  def advanced_search
-    
+  def popup
+    render :action => 'popup', :layout => false
   end
 end
 # Methods added to this helper will be available to all templates in the
 # application.
 module ApplicationHelper
+
   include PermissionName
+
+  include LightboxHelper
   # Displays context help. You can pass the content of the help message as the
   # first parameter or using template code inside a block passed to this
@@ -110,6 +113,8 @@ module ApplicationHelper
   end
   def shortcut_header_links
+    search_link = ( lightbox_link_to content_tag('span', _('Search')), { :controller => 'search', :action => 'popup' }, { :id => 'open_search'} )
+
     if logged_in?
       [
         ( link_to_homepage '<img src="' +
@@ -120,13 +125,13 @@ module ApplicationHelper
 	# O ID icon_accessibility tambem tem que aparcer e testei o link nao ta funcionado.
         ( link_to content_tag('span', _('Admin')), { :controller => 'admin_panel' }, :id => 'link_admin_panel' if current_user.person.is_admin?), 
         ( link_to content_tag('span', _('Logout')), { :controller => 'account', :action => 'logout'}, :id => 'link_logout'),
-        '<a href="javascript:alert(\'to do...\')" id="open_search"><span>Search</span></a>'
+        search_link,
       ]
     else
       [
         ( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ),
         ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ),
-        '<a href="javascript:alert(\'to do...\')" id="open_search"><span>Search</span></a>'
+        search_link,
       ]
     end.join(" ")
   end
@@ -0,0 +1,19 @@
+module LightboxHelper
+
+  def include_lightbox_header
+    stylesheet_link_tag('lightbox') + javascript_include_tag('lightbox')
+  end
+
+  def lightbox_link_to(text, url, options = {})
+    the_class = 'lbOn'
+    the_class << " #{options[:class]}" if options.has_key?(:class)
+    link_to(text, url, options.merge(:class => the_class ))
+  end
+
+  def lightbox_close(text, options = {})
+    the_class = 'lbAction'
+    the_class << " #{options[:class]}" if options.has_key?(:class)
+    link_to(text, '#', options.merge({ :class => the_class, :rel => 'deactivate' }))
+  end
+
+end
@@ -17,6 +17,7 @@
     <%= stylesheet_link_tag 'button' %>
     <%= stylesheet_link_tag 'search' %>
     <%= javascript_include_tag 'menu' %>
+    <%= include_lightbox_header %>
     <%# cms stuff %>
     <% if params[:controller] == 'cms' %>
       <%= javascript_include_tag 'cms' %>
@@ -0,0 +1,21 @@
+<h2><%= _('Search %s') % @environment.name %></h2>
+
+<% form_tag(:action => 'index') do%>
+  <div id='search-' style='text-align: center;'>
+    <%= text_field_tag('query', '', :style => 'width: 70%;') %>
+    <%= submit_tag(_('Search')) %>
+  </div>
+
+  <h3><%= _('Search options') %></h3>
+
+
+  <div>
+    <%= submit_tag(_('Search')) %>
+    <%= lightbox_close(_('Close')) %>
+  </div>
+
+<% end %>
+
+<script type='text/javascript'>
+  $('query').focus();
+</script>
@@ -0,0 +1,202 @@
+/*
+Created By: Chris Campbell
+Website: http://particletree.com
+Date: 2/1/2006
+
+Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
+*/
+
+/*-------------------------------GLOBAL VARIABLES------------------------------------*/
+
+var detect = navigator.userAgent.toLowerCase();
+var OS,browser,version,total,thestring;
+
+/*-----------------------------------------------------------------------------------------------*/
+
+//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
+
+function getBrowserInfo() {
+	if (checkIt('konqueror')) {
+		browser = "Konqueror";
+		OS = "Linux";
+	}
+	else if (checkIt('safari')) browser 	= "Safari"
+	else if (checkIt('omniweb')) browser 	= "OmniWeb"
+	else if (checkIt('opera')) browser 		= "Opera"
+	else if (checkIt('webtv')) browser 		= "WebTV";
+	else if (checkIt('icab')) browser 		= "iCab"
+	else if (checkIt('msie')) browser 		= "Internet Explorer"
+	else if (!checkIt('compatible')) {
+		browser = "Netscape Navigator"
+		version = detect.charAt(8);
+	}
+	else browser = "An unknown browser";
+
+	if (!version) version = detect.charAt(place + thestring.length);
+
+	if (!OS) {
+		if (checkIt('linux')) OS 		= "Linux";
+		else if (checkIt('x11')) OS 	= "Unix";
+		else if (checkIt('mac')) OS 	= "Mac"
+		else if (checkIt('win')) OS 	= "Windows"
+		else OS 								= "an unknown operating system";
+	}
+}
+
+function checkIt(string) {
+	place = detect.indexOf(string) + 1;
+	thestring = string;
+	return place;
+}
+
+/*-----------------------------------------------------------------------------------------------*/
+
+Event.observe(window, 'load', initialize, false);
+Event.observe(window, 'load', getBrowserInfo, false);
+Event.observe(window, 'unload', Event.unloadCache, false);
+
+var lightbox = Class.create();
+
+lightbox.prototype = {
+
+	yPos : 0,
+	xPos : 0,
+
+	initialize: function(ctrl) {
+		this.content = ctrl.href;
+		Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
+		ctrl.onclick = function(){return false;};
+	},
+	
+	// Turn everything on - mainly the IE fixes
+	activate: function(){
+		if (browser == 'Internet Explorer'){
+			this.getScroll();
+			this.prepareIE('100%', 'hidden');
+			this.setScroll(0,0);
+			this.hideSelects('hidden');
+		}
+		this.displayLightbox("block");
+	},
+	
+	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
+	prepareIE: function(height, overflow){
+		bod = document.getElementsByTagName('body')[0];
+		bod.style.height = height;
+		bod.style.overflow = overflow;
+  
+		htm = document.getElementsByTagName('html')[0];
+		htm.style.height = height;
+		htm.style.overflow = overflow; 
+	},
+	
+	// In IE, select elements hover on top of the lightbox
+	hideSelects: function(visibility){
+		selects = document.getElementsByTagName('select');
+		for(i = 0; i < selects.length; i++) {
+			selects[i].style.visibility = visibility;
+		}
+	},
+	
+	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
+	getScroll: function(){
+		if (self.pageYOffset) {
+			this.yPos = self.pageYOffset;
+		} else if (document.documentElement && document.documentElement.scrollTop){
+			this.yPos = document.documentElement.scrollTop; 
+		} else if (document.body) {
+			this.yPos = document.body.scrollTop;
+		}
+	},
+	
+	setScroll: function(x, y){
+		window.scrollTo(x, y); 
+	},
+	
+	displayLightbox: function(display){
+		$('overlay').style.display = display;
+		$('lightbox').style.display = display;
+		if(display != 'none') this.loadInfo();
+	},
+	
+	// Begin Ajax request based off of the href of the clicked linked
+	loadInfo: function() {
+		var myAjax = new Ajax.Request(
+        this.content,
+        {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
+		);
+		
+	},
+	
+	// Display Ajax response
+	processInfo: function(response){
+		info = "<div id='lbContent'>" + response.responseText + "</div>";
+		new Insertion.Before($('lbLoadMessage'), info)
+		$('lightbox').className = "done";	
+		this.actions();			
+	},
+	
+	// Search through new links within the lightbox, and attach click event
+	actions: function(){
+		lbActions = document.getElementsByClassName('lbAction');
+
+		for(i = 0; i < lbActions.length; i++) {
+			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
+			lbActions[i].onclick = function(){return false;};
+		}
+
+	},
+	
+	// Example of creating your own functionality once lightbox is initiated
+	insert: function(e){
+	   link = Event.element(e).parentNode;
+	   Element.remove($('lbContent'));
+	 
+	   var myAjax = new Ajax.Request(
+			  link.href,
+			  {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
+	   );
+	 
+	},
+	
+	// Example of creating your own functionality once lightbox is initiated
+	deactivate: function(){
+		Element.remove($('lbContent'));
+		
+		if (browser == "Internet Explorer"){
+			this.setScroll(0,this.yPos);
+			this.prepareIE("auto", "auto");
+			this.hideSelects("visible");
+		}
+		
+		this.displayLightbox("none");
+	}
+}
+
+/*-----------------------------------------------------------------------------------------------*/
+
+// Onload, make all links that need to trigger a lightbox active
+function initialize(){
+	addLightboxMarkup();
+	lbox = document.getElementsByClassName('lbOn');
+	for(i = 0; i < lbox.length; i++) {
+		valid = new lightbox(lbox[i]);
+	}
+}
+
+// Add in markup necessary to make this work. Basically two divs:
+// Overlay holds the shadow
+// Lightbox is the centered square that the content is put into.
+function addLightboxMarkup() {
+	bod 				= document.getElementsByTagName('body')[0];
+	overlay 			= document.createElement('div');
+	overlay.id		= 'overlay';
+	lb					= document.createElement('div');
+	lb.id				= 'lightbox';
+	lb.className 	= 'loading';
+	lb.innerHTML	= '<div id="lbLoadMessage">' +
+						  '<p>Loading</p>' +
+						  '</div>';
+	bod.appendChild(overlay);
+	bod.appendChild(lb);
+}
 \ No newline at end of file
@@ -0,0 +1,62 @@
+/* - - - - - - - - - - - - - - - - - - - - -
+
+Title : Lightbox CSS
+Author : Kevin Hale
+URL : http://particletree.com/features/lightbox-gone-wild/
+
+Created : January 13, 2006
+Modified : February 1, 2006
+
+- - - - - - - - - - - - - - - - - - - - - */
+
+#lightbox{
+	display:none;
+	position: absolute;
+	top:50%;
+	left:50%;
+	z-index:9999;
+	width:500px;
+	height:400px;
+	margin:-220px 0 0 -250px;
+	border:1px solid #fff;
+	background:#FDFCE9;
+	text-align:left;
+}
+#lightbox[id]{
+	position:fixed;
+}
+
+#overlay{
+	display:none;
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	z-index:5000;
+	background-color:#000;
+	-moz-opacity: 0.8;
+	opacity:.80;
+	filter: alpha(opacity=80);
+}
+#overlay[id]{
+	position:fixed;
+}
+
+#lightbox.done #lbLoadMessage{
+	display:none;
+}
+#lightbox.done #lbContent{
+	display:block;
+}
+#lightbox.loading #lbContent{
+	display:none;
+}
+#lightbox.loading #lbLoadMessage{
+	display:block;
+}
+
+#lightbox.done img{
+	width:100%;
+	height:100%;
+}
 \ No newline at end of file
@@ -0,0 +1,41 @@
+require File.dirname(__FILE__) + '/../test_helper'
+
+class LightboxHelperTest < Test::Unit::TestCase
+
+  include LightboxHelper
+
+  should 'include lightbox properly' do
+    expects(:stylesheet_link_tag).with('lightbox').returns('[lightbox.css]')
+    expects(:javascript_include_tag).with('lightbox').returns('[lightbox.js]')
+    assert_equal '[lightbox.css][lightbox.js]', include_lightbox_header
+  end
+
+  should 'provide the needed files' do
+    assert File.exists?(File.join(RAILS_ROOT, 'public', 'stylesheets', 'lightbox.css')), 'lightbox.css expected to be in public/stylesheets, but not found'
+    assert File.exists?(File.join(RAILS_ROOT, 'public', 'javascripts', 'lightbox.js')), 'lightbox.js expected to be in public/javascripts, but not found'
+  end
+
+  should 'provide lightbox_link_to helper' do
+    expects(:link_to).with('text', { :action => 'view', :id => '1' }, { :class => 'lbOn', :id => 'my-link' }).returns('[link]')
+    assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :id => 'my-link' })
+  end
+
+  should 'merge existing :class option in lightbox_link_to' do
+    expects(:link_to).with('text', { :action => 'view', :id => '1' }, { :class => 'lbOn my-button', :id => 'my-link' }).returns('[link]')
+    assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :class => 'my-button',  :id => 'my-link' })
+
+  end
+
+  should 'provide link to close lightbox' do
+    expects(:link_to).with('text', '#', { :class => 'lbAction', :rel => 'deactivate', :id => 'my-id' }).returns('[close-lightbox]')
+
+    assert_equal '[close-lightbox]', lightbox_close('text', :id => 'my-id')
+  end
+
+  should 'merge existing :class option in lightbox_close' do
+    expects(:link_to).with('text', '#', { :class => 'lbAction my-class', :rel => 'deactivate', :id => 'my-id' }).returns('[close-lightbox]')
+
+    assert_equal '[close-lightbox]', lightbox_close('text', :class => 'my-class', :id => 'my-id' )
+  end
+
+end
@@ -0,0 +1,19 @@		@@ -0,0 +1,19 @@
	1	+module LightboxHelper
	2	+
	3	+ def include_lightbox_header
	4	+ stylesheet_link_tag('lightbox') + javascript_include_tag('lightbox')
	5	+ end
	6	+
	7	+ def lightbox_link_to(text, url, options = {})
	8	+ the_class = 'lbOn'
	9	+ the_class << " #{options[:class]}" if options.has_key?(:class)
	10	+ link_to(text, url, options.merge(:class => the_class ))
	11	+ end
	12	+
	13	+ def lightbox_close(text, options = {})
	14	+ the_class = 'lbAction'
	15	+ the_class << " #{options[:class]}" if options.has_key?(:class)
	16	+ link_to(text, '#', options.merge({ :class => the_class, :rel => 'deactivate' }))
	17	+ end
	18	+
	19	+end
@@ -0,0 +1,21 @@		@@ -0,0 +1,21 @@
	1	+<h2><%= _('Search %s') % @environment.name %></h2>
	2	+
	3	+<% form_tag(:action => 'index') do%>
	4	+ <div id='search-' style='text-align: center;'>
	5	+ <%= text_field_tag('query', '', :style => 'width: 70%;') %>
	6	+ <%= submit_tag(_('Search')) %>
	7	+ </div>
	8	+
	9	+ <h3><%= _('Search options') %></h3>
	10	+
	11	+
	12	+ <div>
	13	+ <%= submit_tag(_('Search')) %>
	14	+ <%= lightbox_close(_('Close')) %>
	15	+ </div>
	16	+
	17	+<% end %>
	18	+
	19	+<script type='text/javascript'>
	20	+ $('query').focus();
	21	+</script>
	@@ -0,0 +1,202 @@		@@ -0,0 +1,202 @@
		1	+/*
		2	+Created By: Chris Campbell
		3	+Website: http://particletree.com
		4	+Date: 2/1/2006
		5	+
		6	+Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
		7	+*/
		8	+
		9	+/-------------------------------GLOBAL VARIABLES------------------------------------/
		10	+
		11	+var detect = navigator.userAgent.toLowerCase();
		12	+var OS,browser,version,total,thestring;
		13	+
		14	+/-----------------------------------------------------------------------------------------------/
		15	+
		16	+//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
		17	+
		18	+function getBrowserInfo() {
		19	+ if (checkIt('konqueror')) {
		20	+ browser = "Konqueror";
		21	+ OS = "Linux";
		22	+ }
		23	+ else if (checkIt('safari')) browser = "Safari"
		24	+ else if (checkIt('omniweb')) browser = "OmniWeb"
		25	+ else if (checkIt('opera')) browser = "Opera"
		26	+ else if (checkIt('webtv')) browser = "WebTV";
		27	+ else if (checkIt('icab')) browser = "iCab"
		28	+ else if (checkIt('msie')) browser = "Internet Explorer"
		29	+ else if (!checkIt('compatible')) {
		30	+ browser = "Netscape Navigator"
		31	+ version = detect.charAt(8);
		32	+ }
		33	+ else browser = "An unknown browser";
		34	+
		35	+ if (!version) version = detect.charAt(place + thestring.length);
		36	+
		37	+ if (!OS) {
		38	+ if (checkIt('linux')) OS = "Linux";
		39	+ else if (checkIt('x11')) OS = "Unix";
		40	+ else if (checkIt('mac')) OS = "Mac"
		41	+ else if (checkIt('win')) OS = "Windows"
		42	+ else OS = "an unknown operating system";
		43	+ }
		44	+}
		45	+
		46	+function checkIt(string) {
		47	+ place = detect.indexOf(string) + 1;
		48	+ thestring = string;
		49	+ return place;
		50	+}
		51	+
		52	+/-----------------------------------------------------------------------------------------------/
		53	+
		54	+Event.observe(window, 'load', initialize, false);
		55	+Event.observe(window, 'load', getBrowserInfo, false);
		56	+Event.observe(window, 'unload', Event.unloadCache, false);
		57	+
		58	+var lightbox = Class.create();
		59	+
		60	+lightbox.prototype = {
		61	+
		62	+ yPos : 0,
		63	+ xPos : 0,
		64	+
		65	+ initialize: function(ctrl) {
		66	+ this.content = ctrl.href;
		67	+ Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
		68	+ ctrl.onclick = function(){return false;};
		69	+ },
		70	+
		71	+ // Turn everything on - mainly the IE fixes
		72	+ activate: function(){
		73	+ if (browser == 'Internet Explorer'){
		74	+ this.getScroll();
		75	+ this.prepareIE('100%', 'hidden');
		76	+ this.setScroll(0,0);
		77	+ this.hideSelects('hidden');
		78	+ }
		79	+ this.displayLightbox("block");
		80	+ },
		81	+
		82	+ // Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
		83	+ prepareIE: function(height, overflow){
		84	+ bod = document.getElementsByTagName('body')[0];
		85	+ bod.style.height = height;
		86	+ bod.style.overflow = overflow;
		87	+
		88	+ htm = document.getElementsByTagName('html')[0];
		89	+ htm.style.height = height;
		90	+ htm.style.overflow = overflow;
		91	+ },
		92	+
		93	+ // In IE, select elements hover on top of the lightbox
		94	+ hideSelects: function(visibility){
		95	+ selects = document.getElementsByTagName('select');
		96	+ for(i = 0; i < selects.length; i++) {
		97	+ selects[i].style.visibility = visibility;
		98	+ }
		99	+ },
		100	+
		101	+ // Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
		102	+ getScroll: function(){
		103	+ if (self.pageYOffset) {
		104	+ this.yPos = self.pageYOffset;
		105	+ } else if (document.documentElement && document.documentElement.scrollTop){
		106	+ this.yPos = document.documentElement.scrollTop;
		107	+ } else if (document.body) {
		108	+ this.yPos = document.body.scrollTop;
		109	+ }
		110	+ },
		111	+
		112	+ setScroll: function(x, y){
		113	+ window.scrollTo(x, y);
		114	+ },
		115	+
		116	+ displayLightbox: function(display){
		117	+ $('overlay').style.display = display;
		118	+ $('lightbox').style.display = display;
		119	+ if(display != 'none') this.loadInfo();
		120	+ },
		121	+
		122	+ // Begin Ajax request based off of the href of the clicked linked
		123	+ loadInfo: function() {
		124	+ var myAjax = new Ajax.Request(
		125	+ this.content,
		126	+ {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
		127	+ );
		128	+
		129	+ },
		130	+
		131	+ // Display Ajax response
		132	+ processInfo: function(response){
		133	+ info = "<div id='lbContent'>" + response.responseText + "</div>";
		134	+ new Insertion.Before($('lbLoadMessage'), info)
		135	+ $('lightbox').className = "done";
		136	+ this.actions();
		137	+ },
		138	+
		139	+ // Search through new links within the lightbox, and attach click event
		140	+ actions: function(){
		141	+ lbActions = document.getElementsByClassName('lbAction');
		142	+
		143	+ for(i = 0; i < lbActions.length; i++) {
		144	+ Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
		145	+ lbActions[i].onclick = function(){return false;};
		146	+ }
		147	+
		148	+ },
		149	+
		150	+ // Example of creating your own functionality once lightbox is initiated
		151	+ insert: function(e){
		152	+ link = Event.element(e).parentNode;
		153	+ Element.remove($('lbContent'));
		154	+
		155	+ var myAjax = new Ajax.Request(
		156	+ link.href,
		157	+ {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
		158	+ );
		159	+
		160	+ },
		161	+
		162	+ // Example of creating your own functionality once lightbox is initiated
		163	+ deactivate: function(){
		164	+ Element.remove($('lbContent'));
		165	+
		166	+ if (browser == "Internet Explorer"){
		167	+ this.setScroll(0,this.yPos);
		168	+ this.prepareIE("auto", "auto");
		169	+ this.hideSelects("visible");
		170	+ }
		171	+
		172	+ this.displayLightbox("none");
		173	+ }
		174	+}
		175	+
		176	+/-----------------------------------------------------------------------------------------------/
		177	+
		178	+// Onload, make all links that need to trigger a lightbox active
		179	+function initialize(){
		180	+ addLightboxMarkup();
		181	+ lbox = document.getElementsByClassName('lbOn');
		182	+ for(i = 0; i < lbox.length; i++) {
		183	+ valid = new lightbox(lbox[i]);
		184	+ }
		185	+}
		186	+
		187	+// Add in markup necessary to make this work. Basically two divs:
		188	+// Overlay holds the shadow
		189	+// Lightbox is the centered square that the content is put into.
		190	+function addLightboxMarkup() {
		191	+ bod = document.getElementsByTagName('body')[0];
		192	+ overlay = document.createElement('div');
		193	+ overlay.id = 'overlay';
		194	+ lb = document.createElement('div');
		195	+ lb.id = 'lightbox';
		196	+ lb.className = 'loading';
		197	+ lb.innerHTML = '<div id="lbLoadMessage">' +
		198	+ '<p>Loading</p>' +
		199	+ '</div>';
		200	+ bod.appendChild(overlay);
		201	+ bod.appendChild(lb);
		202	+}
0	\ No newline at end of file	203	\ No newline at end of file
	@@ -0,0 +1,62 @@		@@ -0,0 +1,62 @@
		1	+/* - - - - - - - - - - - - - - - - - - - - -
		2	+
		3	+Title : Lightbox CSS
		4	+Author : Kevin Hale
		5	+URL : http://particletree.com/features/lightbox-gone-wild/
		6	+
		7	+Created : January 13, 2006
		8	+Modified : February 1, 2006
		9	+
		10	+- - - - - - - - - - - - - - - - - - - - - */
		11	+
		12	+#lightbox{
		13	+ display:none;
		14	+ position: absolute;
		15	+ top:50%;
		16	+ left:50%;
		17	+ z-index:9999;
		18	+ width:500px;
		19	+ height:400px;
		20	+ margin:-220px 0 0 -250px;
		21	+ border:1px solid #fff;
		22	+ background:#FDFCE9;
		23	+ text-align:left;
		24	+}
		25	+#lightbox[id]{
		26	+ position:fixed;
		27	+}
		28	+
		29	+#overlay{
		30	+ display:none;
		31	+ position:absolute;
		32	+ top:0;
		33	+ left:0;
		34	+ width:100%;
		35	+ height:100%;
		36	+ z-index:5000;
		37	+ background-color:#000;
		38	+ -moz-opacity: 0.8;
		39	+ opacity:.80;
		40	+ filter: alpha(opacity=80);
		41	+}
		42	+#overlay[id]{
		43	+ position:fixed;
		44	+}
		45	+
		46	+#lightbox.done #lbLoadMessage{
		47	+ display:none;
		48	+}
		49	+#lightbox.done #lbContent{
		50	+ display:block;
		51	+}
		52	+#lightbox.loading #lbContent{
		53	+ display:none;
		54	+}
		55	+#lightbox.loading #lbLoadMessage{
		56	+ display:block;
		57	+}
		58	+
		59	+#lightbox.done img{
		60	+ width:100%;
		61	+ height:100%;
		62	+}
0	\ No newline at end of file	63	\ No newline at end of file
@@ -0,0 +1,41 @@		@@ -0,0 +1,41 @@
	1	+require File.dirname(__FILE__) + '/../test_helper'
	2	+
	3	+class LightboxHelperTest < Test::Unit::TestCase
	4	+
	5	+ include LightboxHelper
	6	+
	7	+ should 'include lightbox properly' do
	8	+ expects(:stylesheet_link_tag).with('lightbox').returns('[lightbox.css]')
	9	+ expects(:javascript_include_tag).with('lightbox').returns('[lightbox.js]')
	10	+ assert_equal '[lightbox.css][lightbox.js]', include_lightbox_header
	11	+ end
	12	+
	13	+ should 'provide the needed files' do
	14	+ assert File.exists?(File.join(RAILS_ROOT, 'public', 'stylesheets', 'lightbox.css')), 'lightbox.css expected to be in public/stylesheets, but not found'
	15	+ assert File.exists?(File.join(RAILS_ROOT, 'public', 'javascripts', 'lightbox.js')), 'lightbox.js expected to be in public/javascripts, but not found'
	16	+ end
	17	+
	18	+ should 'provide lightbox_link_to helper' do
	19	+ expects(:link_to).with('text', { :action => 'view', :id => '1' }, { :class => 'lbOn', :id => 'my-link' }).returns('[link]')
	20	+ assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :id => 'my-link' })
	21	+ end
	22	+
	23	+ should 'merge existing :class option in lightbox_link_to' do
	24	+ expects(:link_to).with('text', { :action => 'view', :id => '1' }, { :class => 'lbOn my-button', :id => 'my-link' }).returns('[link]')
	25	+ assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :class => 'my-button', :id => 'my-link' })
	26	+
	27	+ end
	28	+
	29	+ should 'provide link to close lightbox' do
	30	+ expects(:link_to).with('text', '#', { :class => 'lbAction', :rel => 'deactivate', :id => 'my-id' }).returns('[close-lightbox]')
	31	+
	32	+ assert_equal '[close-lightbox]', lightbox_close('text', :id => 'my-id')
	33	+ end
	34	+
	35	+ should 'merge existing :class option in lightbox_close' do
	36	+ expects(:link_to).with('text', '#', { :class => 'lbAction my-class', :rel => 'deactivate', :id => 'my-id' }).returns('[close-lightbox]')
	37	+
	38	+ assert_equal '[close-lightbox]', lightbox_close('text', :class => 'my-class', :id => 'my-id' )
	39	+ end
	40	+
	41	+end