pelargir-image_picker 0.5

data/CHANGELOG

@@ -0,0 +1 @@
+10/23/08 - Initial version [Matthew Bass]

data/MIT-LICENSE

@@ -0,0 +1,16 @@
+Copyright (c) 2007-2008 Matthew Bass (http://matthewbass.com)
+
+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.

data/README

@@ -0,0 +1,78 @@
+= image_picker
+
+A simple, customizable image browser.
+
+
+== Installation
+
+Install the gem directly:
+
+  gem sources -a http://gems.github.com (you only have to do this once)
+  sudo gem install pelargir-image_picker
+  
+Or install the gem in your Rails project as a plugin:
+  
+  script/plugin install git://github.com/pelargir/image_picker.git
+
+Or clone the project:
+
+  git clone git://github.com/pelargir/image_picker.git
+
+Then copy the required image, JS, and CSS files into your Rails project
+
+  rake image_picker:install_files
+
+
+== Usage
+
+First, add the picker to your view and pass it the name of the image
+being picked. This name is used to create a hidden field that stores
+the database ID of the image that gets picked:
+
+  <%= image_picker :avatar %>
+  
+Now tell your controller that you'll be picking images, and which
+ActiveRecord model you'll be using:
+
+  class SomeController < ActionController::Base
+    image_picker :model => Image
+  end
+
+The ActiveRecord class must respond to three method calls:
+
+  thumbnail: the path to the image's thumbnail (e.g. /images/foo_small.gif)
+  title: a friendly title for the image
+  description: a description of the image (optional)
+
+That's it! The picker will show up in your view and, once you've
+picked an image, its database ID will be set as the value of the
+hidden field "<name>_id" where <name> is the name you passed
+to the image_picker helper in your view. The hidden field can
+then be submitted via a form or referenced in JavaScript.
+
+
+== Other Options
+
+The controller helper accepts any arguments you can pass to an
+ActiveRecord finder. For example:
+
+  class SomeController < ActionController::Base
+    image_picker :model => Image, :order => "created_at DESC"
+  end
+
+If the will_paginate plugin is installed, the image picker will
+use it automatically. You can pass pagination options to the
+controller helper as well. For example:
+
+  class SomeController < ActionController::Base
+    image_picker :model => Image, :per_page => 6
+  end
+
+
+== Resources
+
+Repository: http://github.com/pelargir/image_picker/
+Blog: http://matthewbass.com
+Author: Matthew Bass
+
+Extraction work sponsored by Terralien

data/Rakefile

@@ -0,0 +1,22 @@
+require 'rake'
+require 'rake/testtask'
+require 'rake/rdoctask'
+
+desc 'Default: run unit tests.'
+task :default => :test
+
+desc 'Test the image_picker plugin.'
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = true
+end
+
+desc 'Generate documentation for the image_picker plugin.'
+Rake::RDocTask.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'image_picker'
+  rdoc.options << '--line-numbers' << '--inline-source'
+  rdoc.rdoc_files.include('README')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end

data/files/public/javascripts/image_picker.js

@@ -0,0 +1,21 @@
+var ImagePicker = {
+	pick:function(field, image_id, image_title, image_url) {
+		$(field + '_id').value = image_id;
+		$(field).src = image_url;
+		$(field).alt = image_title;
+		Modalbox.hide();
+	},
+	
+	clear:function(field, image_url) {
+		$(field + '_id').value = '';
+		$(field).src = image_url;
+		$(field).alt = 'No_image';
+		Modalbox.hide();
+	},
+	
+	open_picker:function(params) {
+		url = $H(params).unset('url');
+		Modalbox.show(url + '?' + $H(params).toQueryString(),
+			{title: 'Select an image...', width: 520, afterLoad: ImagePicker.setup});
+	}
+};

data/files/public/javascripts/modalbox.js

@@ -0,0 +1,573 @@
+/*
+ModalBox - The pop-up window thingie with AJAX, based on prototype and script.aculo.us.
+
+Copyright Andrey Okonetchnikov (andrej.okonetschnikow@gmail.com), 2006-2007
+All rights reserved.
+ 
+VERSION 1.6.0
+Last Modified: 12/13/2007
+*/
+
+if (!window.Modalbox)
+	var Modalbox = new Object();
+
+Modalbox.Methods = {
+	overrideAlert: false, // Override standard browser alert message with ModalBox
+	focusableElements: new Array,
+	currFocused: 0,
+	initialized: false,
+	active: true,
+	options: {
+		title: "ModalBox Window", // Title of the ModalBox window
+		overlayClose: true, // Close modal box by clicking on overlay
+		width: 500, // Default width in px
+		height: 90, // Default height in px
+		overlayOpacity: .65, // Default overlay opacity
+		overlayDuration: .25, // Default overlay fade in/out duration in seconds
+		slideDownDuration: .5, // Default Modalbox appear slide down effect in seconds
+		slideUpDuration: .5, // Default Modalbox hiding slide up effect in seconds
+		resizeDuration: .25, // Default resize duration seconds
+		inactiveFade: true, // Fades MB window on inactive state
+		transitions: true, // Toggles transition effects. Transitions are enabled by default
+		loadingString: "Please wait. Loading...", // Default loading string message
+		closeString: "Close window", // Default title attribute for close window link
+		closeValue: "×", // Default string for close link in the header
+		params: {},
+		method: 'get', // Default Ajax request method
+		autoFocusing: true, // Toggles auto-focusing for form elements. Disable for long text pages.
+		aspnet: false // Should be use then using with ASP.NET costrols. Then true Modalbox window will be injected into the first form element.
+	},
+	_options: new Object,
+	
+	setOptions: function(options) {
+		Object.extend(this.options, options || {});
+	},
+	
+	_init: function(options) {
+		// Setting up original options with default options
+		Object.extend(this._options, this.options);
+		this.setOptions(options);
+		
+		//Create the overlay
+		this.MBoverlay = new Element("div", { id: "MB_overlay", opacity: "0" });
+		
+		//Create DOm for the window
+		this.MBwindow = new Element("div", {id: "MB_window", style: "display: none"}).update(
+			this.MBframe = new Element("div", {id: "MB_frame"}).update(
+				this.MBheader = new Element("div", {id: "MB_header"}).update(
+					this.MBcaption = new Element("div", {id: "MB_caption"})
+				)
+			)
+		);
+		this.MBclose = new Element("a", {id: "MB_close", title: this.options.closeString, href: "#"}).update("<span>" + this.options.closeValue + "</span>");
+		this.MBheader.insert({'bottom':this.MBclose});
+		
+		this.MBcontent = new Element("div", {id: "MB_content"}).update(
+			this.MBloading = new Element("div", {id: "MB_loading"}).update(this.options.loadingString)
+		);
+		this.MBframe.insert({'bottom':this.MBcontent});
+		
+		// Inserting into DOM. If parameter set and form element have been found will inject into it. Otherwise will inject into body as topmost element.
+		// Be sure to set padding and marging to null via CSS for both body and (in case of asp.net) form elements. 
+		var injectToEl = this.options.aspnet ? $(document.body).down('form') : $(document.body);
+		injectToEl.insert({'top':this.MBwindow});
+		injectToEl.insert({'top':this.MBoverlay});
+		
+		// Initial scrolling position of the window. To be used for remove scrolling effect during ModalBox appearing
+		this.initScrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
+		this.initScrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+		
+		//Adding event observers
+		this.hideObserver = this._hide.bindAsEventListener(this);
+		this.kbdObserver = this._kbdHandler.bindAsEventListener(this);
+		this._initObservers();
+
+		this.initialized = true; // Mark as initialized
+	},
+	
+	show: function(content, options) {
+		if(!this.initialized) this._init(options); // Check for is already initialized
+		
+		this.content = content;
+		this.setOptions(options);
+		
+		if(this.options.title) // Updating title of the MB
+			$(this.MBcaption).update(this.options.title);
+		else { // If title isn't given, the header will not displayed
+			$(this.MBheader).hide();
+			$(this.MBcaption).hide();
+		}
+		
+		if(this.MBwindow.style.display == "none") { // First modal box appearing
+			this._appear();
+			this.event("onShow"); // Passing onShow callback
+		}
+		else { // If MB already on the screen, update it
+			this._update();
+			this.event("onUpdate"); // Passing onUpdate callback
+		} 
+	},
+	
+	hide: function(options) { // External hide method to use from external HTML and JS
+		if(this.initialized) {
+			// Reading for options/callbacks except if event given as a pararmeter
+			if(options && typeof options.element != 'function') Object.extend(this.options, options); 
+			// Passing beforeHide callback
+			this.event("beforeHide");
+			if(this.options.transitions)
+				Effect.SlideUp(this.MBwindow, { duration: this.options.slideUpDuration, transition: Effect.Transitions.sinoidal, afterFinish: this._deinit.bind(this) } );
+			else {
+				$(this.MBwindow).hide();
+				this._deinit();
+			}
+		} else throw("Modalbox is not initialized.");
+	},
+	
+	_hide: function(event) { // Internal hide method to use with overlay and close link
+		event.stop(); // Stop event propaganation for link elements
+		/* Then clicked on overlay we'll check the option and in case of overlayClose == false we'll break hiding execution [Fix for #139] */
+		if(event.element().id == 'MB_overlay' && !this.options.overlayClose) return false;
+		this.hide();
+	},
+	
+	alert: function(message){
+		var html = '<div class="MB_alert"><p>' + message + '</p><input type="button" onclick="Modalbox.hide()" value="OK" /></div>';
+		Modalbox.show(html, {title: 'Alert: ' + document.title, width: 300});
+	},
+		
+	_appear: function() { // First appearing of MB
+		if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) { // Preparing IE 6 for showing modalbox
+			window.scrollTo(0,0);
+			this._prepareIE("100%", "hidden"); 
+		}
+		this._setWidth();
+		this._setPosition();
+		if(this.options.transitions) {
+			$(this.MBoverlay).setStyle({opacity: 0});
+			new Effect.Fade(this.MBoverlay, {
+					from: 0, 
+					to: this.options.overlayOpacity, 
+					duration: this.options.overlayDuration, 
+					afterFinish: function() {
+						new Effect.SlideDown(this.MBwindow, {
+							duration: this.options.slideDownDuration, 
+							transition: Effect.Transitions.sinoidal, 
+							afterFinish: function(){ 
+								this._setPosition(); 
+								this.loadContent();
+							}.bind(this)
+						});
+					}.bind(this)
+			});
+		} else {
+			$(this.MBoverlay).setStyle({opacity: this.options.overlayOpacity});
+			$(this.MBwindow).show();
+			this._setPosition(); 
+			this.loadContent();
+		}
+		this._setWidthAndPosition = this._setWidthAndPosition.bindAsEventListener(this);
+		Event.observe(window, "resize", this._setWidthAndPosition);
+	},
+	
+	resize: function(byWidth, byHeight, options) { // Change size of MB without loading content
+		var wHeight = $(this.MBwindow).getHeight();
+		var wWidth = $(this.MBwindow).getWidth();
+		var hHeight = $(this.MBheader).getHeight();
+		var cHeight = $(this.MBcontent).getHeight();
+		var newHeight = ((wHeight - hHeight + byHeight) < cHeight) ? (cHeight + hHeight - wHeight) : byHeight;
+		if(options) this.setOptions(options); // Passing callbacks
+		if(this.options.transitions) {
+			new Effect.ScaleBy(this.MBwindow, byWidth, newHeight, {
+					duration: this.options.resizeDuration, 
+				  	afterFinish: function() { 
+						this.event("_afterResize"); // Passing internal callback
+						this.event("afterResize"); // Passing callback
+					}.bind(this)
+				});
+		} else {
+			this.MBwindow.setStyle({width: wWidth + byWidth + "px", height: wHeight + newHeight + "px"});
+			setTimeout(function() {
+				this.event("_afterResize"); // Passing internal callback
+				this.event("afterResize"); // Passing callback
+			}.bind(this), 1);
+			
+		}
+		
+	},
+	
+	resizeToContent: function(options){
+		
+		// Resizes the modalbox window to the actual content height.
+		// This might be useful to resize modalbox after some content modifications which were changed ccontent height.
+		
+		var byHeight = this.options.height - this.MBwindow.offsetHeight;
+		if(byHeight != 0) {
+			if(options) this.setOptions(options); // Passing callbacks
+			Modalbox.resize(0, byHeight);
+		}
+	},
+	
+	resizeToInclude: function(element, options){
+		
+		// Resizes the modalbox window to the camulative height of element. Calculations are using CSS properties for margins and border.
+		// This method might be useful to resize modalbox before including or updating content.
+		
+		var el = $(element);
+		var elHeight = el.getHeight() + parseInt(el.getStyle('margin-top')) + parseInt(el.getStyle('margin-bottom')) + parseInt(el.getStyle('border-top-width')) + parseInt(el.getStyle('border-bottom-width'));
+		if(elHeight > 0) {
+			if(options) this.setOptions(options); // Passing callbacks
+			Modalbox.resize(0, elHeight);
+		}
+	},
+	
+	_update: function() { // Updating MB in case of wizards
+		$(this.MBcontent).update("");
+		this.MBcontent.appendChild(this.MBloading);
+		$(this.MBloading).update(this.options.loadingString);
+		this.currentDims = [this.MBwindow.offsetWidth, this.MBwindow.offsetHeight];
+		Modalbox.resize((this.options.width - this.currentDims[0]), (this.options.height - this.currentDims[1]), {_afterResize: this._loadAfterResize.bind(this) });
+	},
+	
+	loadContent: function () {
+		if(this.event("beforeLoad") != false) { // If callback passed false, skip loading of the content
+			if(typeof this.content == 'string') {
+				var htmlRegExp = new RegExp(/<\/?[^>]+>/gi);
+				if(htmlRegExp.test(this.content)) { // Plain HTML given as a parameter
+					this._insertContent(this.content.stripScripts());
+					this._putContent(function(){
+						this.content.extractScripts().map(function(script) { 
+							return eval(script.replace("<!--", "").replace("// -->", ""));
+						}.bind(window));
+					}.bind(this));
+				} else // URL given as a parameter. We'll request it via Ajax
+					new Ajax.Request( this.content, { method: this.options.method.toLowerCase(), parameters: this.options.params, 
+						onSuccess: function(transport) {
+							var response = new String(transport.responseText);
+							this._insertContent(transport.responseText.stripScripts());
+							this._putContent(function(){
+								response.extractScripts().map(function(script) { 
+									return eval(script.replace("<!--", "").replace("// -->", ""));
+								}.bind(window));
+							});
+						}.bind(this),
+						onException: function(instance, exception){
+							Modalbox.hide();
+							throw('Modalbox Loading Error: ' + exception);
+						}
+					});
+					
+			} else if (typeof this.content == 'object') {// HTML Object is given
+				this._insertContent(this.content);
+				this._putContent();
+			} else {
+				Modalbox.hide();
+				throw('Modalbox Parameters Error: Please specify correct URL or HTML element (plain HTML or object)');
+			}
+		}
+	},
+	
+	_insertContent: function(content){
+		$(this.MBcontent).hide().update("");
+		if(typeof content == 'string') {
+			setTimeout(function() { // Hack to disable content flickering in Firefox
+				this.MBcontent.update(content);
+			}.bind(this), 1);
+		} else if (typeof content == 'object') { // HTML Object is given
+			var _htmlObj = content.cloneNode(true); // If node already a part of DOM we'll clone it
+			// If clonable element has ID attribute defined, modifying it to prevent duplicates
+			if(content.id) content.id = "MB_" + content.id;
+			/* Add prefix for IDs on all elements inside the DOM node */
+			$(content).select('*[id]').each(function(el){ el.id = "MB_" + el.id; });
+			this.MBcontent.appendChild(_htmlObj);
+			this.MBcontent.down().show(); // Toggle visibility for hidden nodes
+			if(Prototype.Browser.IE) // Toggling back visibility for hidden selects in IE
+				$$("#MB_content select").invoke('setStyle', {'visibility': ''});
+		}
+	},
+	
+	_putContent: function(callback){
+		// Prepare and resize modal box for content
+		if(this.options.height == this._options.height) {
+			setTimeout(function() { // MSIE sometimes doesn't display content correctly
+				Modalbox.resize(0, $(this.MBcontent).getHeight() - $(this.MBwindow).getHeight() + $(this.MBheader).getHeight(), {
+					afterResize: function(){
+						this.MBcontent.show().makePositioned();
+						this.focusableElements = this._findFocusableElements();
+						this._setFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
+						setTimeout(function(){ // MSIE fix
+							if(callback != undefined)
+								callback(); // Executing internal JS from loaded content
+							this.event("afterLoad"); // Passing callback
+						}.bind(this),1);
+					}.bind(this)
+				});
+			}.bind(this), 1);
+		} else { // Height is defined. Creating a scrollable window
+			this._setWidth();
+			this.MBcontent.setStyle({overflow: 'auto', height: $(this.MBwindow).getHeight() - $(this.MBheader).getHeight() - 13 + 'px'});
+			this.MBcontent.show();
+			this.focusableElements = this._findFocusableElements();
+			this._setFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
+			setTimeout(function(){ // MSIE fix
+				if(callback != undefined)
+					callback(); // Executing internal JS from loaded content
+				this.event("afterLoad"); // Passing callback
+			}.bind(this),1);
+		}
+	},
+	
+	activate: function(options){
+		this.setOptions(options);
+		this.active = true;
+		$(this.MBclose).observe("click", this.hideObserver);
+		if(this.options.overlayClose)
+			$(this.MBoverlay).observe("click", this.hideObserver);
+		$(this.MBclose).show();
+		if(this.options.transitions && this.options.inactiveFade)
+			new Effect.Appear(this.MBwindow, {duration: this.options.slideUpDuration});
+	},
+	
+	deactivate: function(options) {
+		this.setOptions(options);
+		this.active = false;
+		$(this.MBclose).stopObserving("click", this.hideObserver);
+		if(this.options.overlayClose)
+			$(this.MBoverlay).stopObserving("click", this.hideObserver);
+		$(this.MBclose).hide();
+		if(this.options.transitions && this.options.inactiveFade)
+			new Effect.Fade(this.MBwindow, {duration: this.options.slideUpDuration, to: .75});
+	},
+	
+	_initObservers: function(){
+		$(this.MBclose).observe("click", this.hideObserver);
+		if(this.options.overlayClose)
+			$(this.MBoverlay).observe("click", this.hideObserver);
+		if(Prototype.Browser.IE)
+			Event.observe(document, "keydown", this.kbdObserver);
+		else
+			Event.observe(document, "keypress", this.kbdObserver);
+	},
+	
+	_removeObservers: function(){
+		$(this.MBclose).stopObserving("click", this.hideObserver);
+		if(this.options.overlayClose)
+			$(this.MBoverlay).stopObserving("click", this.hideObserver);
+		if(Prototype.Browser.IE)
+			Event.stopObserving(document, "keydown", this.kbdObserver);
+		else
+			Event.stopObserving(document, "keypress", this.kbdObserver);
+	},
+	
+	_loadAfterResize: function() {
+		this._setWidth();
+		this._setPosition();
+		this.loadContent();
+	},
+	
+	_setFocus: function() { 
+		/* Setting focus to the first 'focusable' element which is one with tabindex = 1 or the first in the form loaded. */
+		if(this.focusableElements.length > 0 && this.options.autoFocusing == true) {
+			var firstEl = this.focusableElements.find(function (el){
+				return el.tabIndex == 1;
+			}) || this.focusableElements.first();
+			this.currFocused = this.focusableElements.toArray().indexOf(firstEl);
+			firstEl.focus(); // Focus on first focusable element except close button
+		} else if($(this.MBclose).visible())
+			$(this.MBclose).focus(); // If no focusable elements exist focus on close button
+	},
+	
+	_findFocusableElements: function(){ // Collect form elements or links from MB content
+		this.MBcontent.select('input:not([type~=hidden]), select, textarea, button, a[href]').invoke('addClassName', 'MB_focusable');
+		return this.MBcontent.select('.MB_focusable');
+	},
+	
+	_kbdHandler: function(event) {
+		var node = event.element();
+		switch(event.keyCode) {
+			case Event.KEY_TAB:
+				event.stop();
+				
+				/* Switching currFocused to the element which was focused by mouse instead of TAB-key. Fix for #134 */ 
+				if(node != this.focusableElements[this.currFocused])
+					this.currFocused = this.focusableElements.toArray().indexOf(node);
+				
+				if(!event.shiftKey) { //Focusing in direct order
+					if(this.currFocused == this.focusableElements.length - 1) {
+						this.focusableElements.first().focus();
+						this.currFocused = 0;
+					} else {
+						this.currFocused++;
+						this.focusableElements[this.currFocused].focus();
+					}
+				} else { // Shift key is pressed. Focusing in reverse order
+					if(this.currFocused == 0) {
+						this.focusableElements.last().focus();
+						this.currFocused = this.focusableElements.length - 1;
+					} else {
+						this.currFocused--;
+						this.focusableElements[this.currFocused].focus();
+					}
+				}
+				break;			
+			case Event.KEY_ESC:
+				if(this.active) this._hide(event);
+				break;
+			case 32:
+				this._preventScroll(event);
+				break;
+			case 0: // For Gecko browsers compatibility
+				if(event.which == 32) this._preventScroll(event);
+				break;
+			case Event.KEY_UP:
+			case Event.KEY_DOWN:
+			case Event.KEY_PAGEDOWN:
+			case Event.KEY_PAGEUP:
+			case Event.KEY_HOME:
+			case Event.KEY_END:
+				// Safari operates in slightly different way. This realization is still buggy in Safari.
+				if(Prototype.Browser.WebKit && !["textarea", "select"].include(node.tagName.toLowerCase()))
+					event.stop();
+				else if( (node.tagName.toLowerCase() == "input" && ["submit", "button"].include(node.type)) || (node.tagName.toLowerCase() == "a") )
+					event.stop();
+				break;
+		}
+	},
+	
+	_preventScroll: function(event) { // Disabling scrolling by "space" key
+		if(!["input", "textarea", "select", "button"].include(event.element().tagName.toLowerCase())) 
+			event.stop();
+	},
+	
+	_deinit: function()
+	{	
+		this._removeObservers();
+		Event.stopObserving(window, "resize", this._setWidthAndPosition );
+		if(this.options.transitions) {
+			Effect.toggle(this.MBoverlay, 'appear', {duration: this.options.overlayDuration, afterFinish: this._removeElements.bind(this) });
+		} else {
+			this.MBoverlay.hide();
+			this._removeElements();
+		}
+		$(this.MBcontent).setStyle({overflow: '', height: ''});
+	},
+	
+	_removeElements: function () {
+		$(this.MBoverlay).remove();
+		$(this.MBwindow).remove();
+		if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) {
+			this._prepareIE("", ""); // If set to auto MSIE will show horizontal scrolling
+			window.scrollTo(this.initScrollX, this.initScrollY);
+		}
+		
+		/* Replacing prefixes 'MB_' in IDs for the original content */
+		if(typeof this.content == 'object') {
+			if(this.content.id && this.content.id.match(/MB_/)) {
+				this.content.id = this.content.id.replace(/MB_/, "");
+			}
+			this.content.select('*[id]').each(function(el){ el.id = el.id.replace(/MB_/, ""); });
+		}
+		/* Initialized will be set to false */
+		this.initialized = false;
+		this.event("afterHide"); // Passing afterHide callback
+		this.setOptions(this._options); //Settings options object into intial state
+	},
+	
+	_setWidth: function () { //Set size
+		$(this.MBwindow).setStyle({width: this.options.width + "px", height: this.options.height + "px"});
+	},
+	
+	_setPosition: function () {
+		$(this.MBwindow).setStyle({left: Math.round((Element.getWidth(document.body) - Element.getWidth(this.MBwindow)) / 2 ) + "px"});
+	},
+	
+	_setWidthAndPosition: function () {
+		$(this.MBwindow).setStyle({width: this.options.width + "px"});
+		this._setPosition();
+	},
+	
+	_getScrollTop: function () { //From: http://www.quirksmode.org/js/doctypes.html
+		var theTop;
+		if (document.documentElement && document.documentElement.scrollTop)
+			theTop = document.documentElement.scrollTop;
+		else if (document.body)
+			theTop = document.body.scrollTop;
+		return theTop;
+	},
+	_prepareIE: function(height, overflow){
+		$$('html, body').invoke('setStyle', {width: height, height: height, overflow: overflow}); // IE requires width and height set to 100% and overflow hidden
+		$$("select").invoke('setStyle', {'visibility': overflow}); // Toggle visibility for all selects in the common document
+	},
+	event: function(eventName) {
+		if(this.options[eventName]) {
+			var returnValue = this.options[eventName](); // Executing callback
+			this.options[eventName] = null; // Removing callback after execution
+			if(returnValue != undefined) 
+				return returnValue;
+			else 
+				return true;
+		}
+		return true;
+	}
+};
+
+Object.extend(Modalbox, Modalbox.Methods);
+
+if(Modalbox.overrideAlert) window.alert = Modalbox.alert;
+
+Effect.ScaleBy = Class.create();
+Object.extend(Object.extend(Effect.ScaleBy.prototype, Effect.Base.prototype), {
+  initialize: function(element, byWidth, byHeight, options) {
+    this.element = $(element)
+    var options = Object.extend({
+	  scaleFromTop: true,
+      scaleMode: 'box',        // 'box' or 'contents' or {} with provided values
+      scaleByWidth: byWidth,
+	  scaleByHeight: byHeight
+    }, arguments[3] || {});
+    this.start(options);
+  },
+  setup: function() {
+    this.elementPositioning = this.element.getStyle('position');
+      
+    this.originalTop  = this.element.offsetTop;
+    this.originalLeft = this.element.offsetLeft;
+	
+    this.dims = null;
+    if(this.options.scaleMode=='box')
+      this.dims = [this.element.offsetHeight, this.element.offsetWidth];
+	 if(/^content/.test(this.options.scaleMode))
+      this.dims = [this.element.scrollHeight, this.element.scrollWidth];
+    if(!this.dims)
+      this.dims = [this.options.scaleMode.originalHeight,
+                   this.options.scaleMode.originalWidth];
+	  
+	this.deltaY = this.options.scaleByHeight;
+	this.deltaX = this.options.scaleByWidth;
+  },
+  update: function(position) {
+    var currentHeight = this.dims[0] + (this.deltaY * position);
+	var currentWidth = this.dims[1] + (this.deltaX * position);
+	
+	currentHeight = (currentHeight > 0) ? currentHeight : 0;
+	currentWidth = (currentWidth > 0) ? currentWidth : 0;
+	
+    this.setDimensions(currentHeight, currentWidth);
+  },
+
+  setDimensions: function(height, width) {
+    var d = {};
+    d.width = width + 'px';
+    d.height = height + 'px';
+    
+	var topd  = Math.round((height - this.dims[0])/2);
+	var leftd = Math.round((width  - this.dims[1])/2);
+	if(this.elementPositioning == 'absolute' || this.elementPositioning == 'fixed') {
+		if(!this.options.scaleFromTop) d.top = this.originalTop-topd + 'px';
+		d.left = this.originalLeft-leftd + 'px';
+	} else {
+		if(!this.options.scaleFromTop) d.top = -topd + 'px';
+		d.left = -leftd + 'px';
+	}
+    this.element.setStyle(d);
+  }
+});

data/files/public/stylesheets/modalbox.css

@@ -0,0 +1,95 @@
+#MB_overlay {
+	position: absolute;
+	margin: auto;
+	top: 0;	left: 0;
+	width: 100%; height: 100%;
+	z-index: 9999;
+	background-color: #000!important;
+}
+#MB_overlay[id] { position: fixed; }
+
+#MB_window {
+	position: absolute;
+	top: 0;
+	border: 0 solid;
+	text-align: left;
+	z-index: 10000;
+}
+#MB_window[id] { position: fixed!important; }
+
+#MB_frame {
+	position: relative;
+	background-color: #EFEFEF;
+	height: 100%;
+}
+
+#MB_header {
+	margin: 0;
+	padding: 0;
+}
+
+#MB_content {
+	padding: 6px .75em;
+	overflow: auto;
+}
+
+#MB_caption {
+	font: bold 100% "Lucida Grande", Arial, sans-serif;
+	text-shadow: #FFF 0 1px 0;
+	padding: .5em 2em .5em .75em;
+	margin: 0;
+	text-align: left;
+}
+
+#MB_close {
+	display: block;
+	position: absolute;
+	right: 5px; top: 4px;
+	padding: 2px 3px;
+	font-weight: bold;
+	text-decoration: none;
+	font-size: 13px;
+}
+#MB_close:hover {
+	background: transparent;
+}
+
+#MB_loading {
+	padding: 1.5em;
+	text-indent: -10000px;
+	background: transparent url(spinner.gif) 50% 0 no-repeat;
+}
+
+/* Color scheme */
+#MB_frame {
+	padding-bottom: 7px;
+	-webkit-border-radius: 7px; 
+	-moz-border-radius: 7px;
+	border-radius: 7px;
+}
+#MB_window {
+	background-color: #EFEFEF;
+	color: #000;
+	-webkit-box-shadow: 0 8px 64px #000; 
+	-moz-box-shadow: 0 0 64px #000; 
+	box-shadow: 0 0 64px #000;
+	
+	-webkit-border-radius: 7px; 
+	-moz-border-radius: 7px;
+	border-radius: 7px;
+}
+#MB_content { border-top: 1px solid #F9F9F9; }
+#MB_header {
+  background-color: #DDD;
+  border-bottom: 1px solid #CCC;
+}
+#MB_caption { color: #000 }
+#MB_close { color: #777 }
+#MB_close:hover { color: #000 }
+
+
+/* Alert message */
+.MB_alert {
+	margin: 10px 0;
+	text-align: center;
+}

data/image_picker.gemspec

@@ -0,0 +1,32 @@
+Gem::Specification.new do |s|
+  s.name     = "image_picker"
+  s.version  = "0.5"
+  s.date     = "2008-10-23"
+  s.summary  = "A simple, customizable image browser."
+  s.email    = "pelargir@gmail.com"
+  s.homepage = "http://github.com/pelargir/image_picker"
+  s.description = "A simple, customizable image browser."
+  s.has_rdoc = true
+  s.authors  = ["Matthew Bass"]
+  s.files    = [
+    "CHANGELOG",
+    "files/public/images/no_image.jpg",
+    "files/public/images/spinner.gif",
+    "files/public/javascripts/image_picker.js",
+    "files/public/javascripts/modalbox.js",
+    "files/public/stylesheets/modalbox.css",
+		"init.rb",
+		"install.rb",
+		"lib/image_picker.rb",
+		"lib/image_picker/controller.rb",
+		"lib/image_picker/link_renderer.rb",
+    "MIT-LICENSE",
+    "Rakefile",
+		"README",
+		"tasks/image_picker.rake",
+		"templates/open_picker.html.erb",
+		"image_picker.gemspec"
+		]
+  s.rdoc_options = ["--main", "README"]
+  s.extra_rdoc_files = ["README"]
+end

data/init.rb

@@ -0,0 +1,3 @@
+require 'image_picker'
+require 'image_picker/controller'
+require 'image_picker/link_renderer'

data/install.rb

@@ -0,0 +1,17 @@
+require 'rake'
+ 
+begin
+  puts "=========================================================="
+  puts "Attempting to copy required files into your application..."
+  puts "=========================================================="
+  RAKE_FILE = File.join(File.dirname(__FILE__), '/tasks/image_picker.rake')
+  load RAKE_FILE
+  
+  Rake::Task['image_picker:install_files'].invoke
+  puts "=========================================================="
+  puts "Success!"
+  puts "=========================================================="
+rescue Exception => ex
+  puts "FAILED TO COPY FILES DURING INSTALL.  PLEASE RUN rake image_picker:install_files."
+  puts "EXCEPTION: #{ex}"
+end

data/lib/image_picker.rb

@@ -0,0 +1,11 @@
+module ImagePicker
+  def image_picker(field)
+    url = url_for :action => "open_picker"
+    html = stylesheet_link_tag "modalbox"
+    html += javascript_include_tag :defaults, "image_picker", "modalbox"
+    html += link_to_function image_tag("no_image.jpg", :id => field), "ImagePicker.open_picker({field:'#{field}', url:'#{url}'})"
+    html += hidden_field_tag "#{field}_id"
+  end
+end
+
+ActionView::Base.send :include, ImagePicker

data/lib/image_picker/controller.rb

@@ -0,0 +1,28 @@
+module ImagePicker
+  module Controller
+    def self.included(base)
+      base.extend(ClassMethods)
+    end
+    
+    module ClassMethods
+      def image_picker(options={})
+        define_method "open_picker" do
+          model = options.delete(:model)
+          @field = params[:field]
+          @images = defined?(WillPaginate) ? model.paginate(options.merge(:page => params[:page])) : model.all(options)
+          render :file => "#{RAILS_ROOT}/vendor/plugins/image_picker/templates/open_picker.html.erb"
+        end
+
+        define_method "pick" do
+          image = Image.find(params[:id])
+          field = params[:field]
+          render :update do |page|
+            page.call "parent.ImagePicker.pick", field, image.id, image.title, image.thumbnail
+          end
+        end
+      end
+    end
+  end
+end
+
+ActionController::Base.send :include, ImagePicker::Controller

data/lib/image_picker/link_renderer.rb

@@ -0,0 +1,9 @@
+if defined?(WillPaginate)
+  module ImagePicker
+    class LinkRenderer < WillPaginate::LinkRenderer
+      def page_link(page, text, attributes = {})
+        @template.link_to_function text, "ImagePicker.open_picker({field:$('target_field').value, page:'#{page}', terms:$('terms').value});"
+      end
+    end
+  end
+end

data/tasks/image_picker.rake

@@ -0,0 +1,39 @@
+require 'find'
+ 
+module ImagePicker
+  class Assets
+    @source = File.expand_path(File.join(File.dirname(__FILE__), '..', 'files'))
+    @destination = RAILS_ROOT
+    class << self 
+      attr_accessor :source, :destination
+    end
+    
+    def self.install
+      paths = []
+      Find.find(source) do |path|
+        Find.prune if path =~ /\/\..+/
+        Find.prune if path =~ /CVS/
+        paths << path
+      end
+      paths.each do |path| 
+        dest_path = path.gsub(source, destination)
+        if File.directory?(path)
+          FileUtils.mkdir_p(dest_path) unless File.exists?(dest_path)
+        else
+          FileUtils.cp(path, dest_path)
+        end
+      end
+    rescue Exception => e
+      puts "Error trying to copy files: #{e.inspect}"
+      raise e
+    end
+    
+  end  
+end
+ 
+namespace :image_picker do
+  desc "Install files required by image_picker"
+  task :install_files do  
+    ImagePicker::Assets.install
+  end
+end

data/templates/open_picker.html.erb

@@ -0,0 +1,38 @@
+<div style="width: 500px">
+  <%= hidden_field_tag :target_field, @field %>
+  <%= hidden_field_tag :default_image, "/images/no_image.jpg" %>
+  
+  <div style="float:right">
+    <%= link_to_function "clear image", "ImagePicker.clear($('target_field').value, $('default_image').value);", :id => "clear" %>
+  </div>
+  
+  <% if defined?(WillPaginate) -%>
+    <div style="text-align:center; clear:both;">
+      <%= will_paginate @images, :renderer => ImagePicker::LinkRenderer %>
+    </div>
+  <% end -%>
+  
+  <% if @images.any? -%>
+    <table border="0", cellpadding="10" cellspacing="5">
+      <% @images.in_groups_of(3) do |e| -%>
+        <tr>
+          <% e.compact.each do |i| -%>
+            <td style="text-align:center" valign="top">
+              <%= link_to_remote image_tag(i.thumbnail, :alt => i.title), :url => {:action => "pick", :field => @field, :id => i}, :method => :post %>
+              <br/>
+              <strong><%= i.title %></strong>
+              <% if i.respond_to?(:description) -%>
+                <br/>
+                <%= i.description %>
+              <% end -%>
+            </td>
+          <% end -%>
+        </tr>
+      <% end -%>
+    </table>
+  <% else -%>
+    <div style="margin:10px; text-align:center; font-style:italic;">
+      Nothing found.
+    </div>
+  <% end -%>
+</div>

metadata

@@ -0,0 +1,70 @@
+--- !ruby/object:Gem::Specification 
+name: pelargir-image_picker
+version: !ruby/object:Gem::Version 
+  version: "0.5"
+platform: ruby
+authors: 
+- Matthew Bass
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2008-10-23 00:00:00 -07:00
+default_executable: 
+dependencies: []
+
+description: A simple, customizable image browser.
+email: pelargir@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: 
+- README
+files: 
+- CHANGELOG
+- files/public/images/no_image.jpg
+- files/public/images/spinner.gif
+- files/public/javascripts/image_picker.js
+- files/public/javascripts/modalbox.js
+- files/public/stylesheets/modalbox.css
+- init.rb
+- install.rb
+- lib/image_picker.rb
+- lib/image_picker/controller.rb
+- lib/image_picker/link_renderer.rb
+- MIT-LICENSE
+- Rakefile
+- README
+- tasks/image_picker.rake
+- templates/open_picker.html.erb
+- image_picker.gemspec
+has_rdoc: true
+homepage: http://github.com/pelargir/image_picker
+post_install_message: 
+rdoc_options: 
+- --main
+- README
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.2.0
+signing_key: 
+specification_version: 2
+summary: A simple, customizable image browser.
+test_files: []
+