;(function($) {
	
	$.fn.fixPNG = function() {
		return this.each(function () {
			var image = $(this).css('backgroundImage');

			if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)) {
				image = RegExp.$1;
				$(this).css({
					'backgroundImage': 'none',
					'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=" + ($(this).css('backgroundRepeat') == 'no-repeat' ? 'crop' : 'scale') + ", src='" + image + "')"
				}).each(function () {
					var position = $(this).css('position');
					if (position != 'absolute' && position != 'relative')
						$(this).css('position', 'relative');
				});
			}
		});
	};
	
	$.fn.elephantbox = function(userInput){
		
		var $image = false;
		
		var host = "http://" + location.hostname;
		
		function getViewport(){
			return {
				width: $(window).width(),
				height: $(window).height(),
				left: $(document).scrollLeft(), 
				top:$(document).scrollTop()
			};
		}
		
		function open_elephantbox(number){
			
			$box.empty();
			//setShadow();
			
			//alert(source_array[number]);
			
			$image = $("<img/>").load(function(){			
				image_width = this.width;
				image_height = this.height;
								
				var window_d = getViewport();
				var viewport_height = Math.round((window_d.height) * 0.75);
				//alert("top:" + window_d.top + "; height:" + window_d.height + "; viewportheight:" + viewport_height);
				var viewport_width = (window_d.width - window_d.left) * 0.9;
				var viewport_top = Math.round(((window_d.height-viewport_height)/2)) - 15;
				//alert(viewport_top);
				var viewport_start = (window_d.height/2);
								
				if(image_width > viewport_width){
					image_height = Math.round(image_height * (viewport_width/image_width));
					image_width = viewport_width;
				}
												
				if(image_height > viewport_height){
					image_width = Math.round(image_width * (viewport_height/image_height));
					image_height = viewport_height;
				}
												
				$(this).css({
					opacity: 0
				}).attr("width", image_width).attr("height", image_height);
				
				$caption.empty().html(getText(number) + " <span style=\"display: block; float: right; position: relative; right: 10px;\">" + number + "/" + elements_count + "</span>");
				
				if($.browser.msie){
					pngFix();	
				}
				
				if(display == "closed"){
					$box.css({
						top: viewport_start
					});
				}
				
				$box.css({
					"z-index":1000,
					overflow: "visible"
				}).animate({
					opacity: 1,
					height: image_height + 30,
					width: image_width,
					top: viewport_top
				}, defaults.boxtime, function(){
				
					$exit.css({
						background: ""
					});
					
					$box.append($image).hover(function(){
						$exit.css({
							background: "url('" + defaults.exit + "')"
						});
					}, function(){
						$exit.css({
							background: ""
						});	
					});
					
					$box.find("img").animate({
						opacity: 1
					}, defaults.time);
					
					$caption.appendTo($box).animate({
						opacity: 1	
					}, defaults.boxtime, function(){
						activateControls(number);	
					});
					
					
					$exit.appendTo($box).css({
						opacity: 1
					}).click(function(){
						$container.click();	
					});
					removeLoaderBackground();
					
					display = "open";
					
				});
				
				
				
				
			});
			
			$image.attr("src", source_array[number]);
			
		}
		
		var defaults = $.extend({
			time: 300,
			boxtime: 500,
			opacity: 0.7,
			gallery: true,
			preload: false,
			shadow: true,
			loader: host + "/elephantbox/30-0.gif",
			loaderWhite: host + "/elephantbox/30-0-1.gif",
			exit: host + "/elephantbox/esc.png",
			overlay: {
				"background-color": "#000",
				position: "fixed",
				height: "100%",
				width: "100%",
				opacity: 0,
				"z-index": 999,
				top: 0,
				left: 0,
				cursor: "pointer"
			},
			container: {
				position: "fixed",
				left: 0,
				top: 0,
				height: "100%",
				width: "100%",
				"z-index": 1000,
				overflow: "auto",
				cursor: "pointer"
			},
			box: {
				"background-color": "#fff",
				position: "relative",
				margin: "0px auto",
				padding: "5px",
				height: "0px",
				width: "0px",
				opacity: 0,
				"z-index": 1001,
				cursor: "auto"
			}
		}, userInput);
		
		//alert(defaults.loader);
		
		var $elements = $(this);
		var elements_count = $(this).length;
		var elements_loaded = 0;
		var counter = 0;
		var current = false;
		var imageRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i;
		var $overlay = $("<div/>").css(defaults.overlay).addClass("elephant_overlay");
		var $container = $("<div/>").css(defaults.container).addClass("elephant_container");
		var $box = $("<div/>").css(defaults.box).addClass("elephant_box");
		var source_array = new Array();
		var image_height = 0;
		var image_width = 0;
		var display = "closed";
		var clickedInside = false;
		
		
		var $exit = $("<div/>").css({
			height: "36px",
			width: "36px",
			position: "absolute",
			left: 5,
			top: 5
		});
		
		/*
		
		var $corner_tl = $("<div/>").css({
			position: "absolute",
			height: 20,
			width: 20,
			left: -20,
			top: -20,
			background: "url('./elephantbox/shadow_tl.png') no-repeat"
		});
		
		var $corner_tr = $("<div/>").css({
			position: "absolute",
			height: 20,
			width: 20,
			right: -20,
			top: -20,
			background: "url('./elephantbox/shadow_tr.png') no-repeat"
		});
		
		var $corner_bl = $("<div/>").css({
			position: "absolute",
			height: 20,
			width: 20,
			left: -20,
			bottom: -20,
			background: "url('./elephantbox/shadow_bl.png') no-repeat"
		});
		
		var $corner_br = $("<div/>").css({
			position: "absolute",
			height: 20,
			width: 20,
			right: -20,
			bottom: -20,
			background: "url('./elephantbox/shadow_br.png') no-repeat"
		});
		
		var $corner_t = $("<div/>").css({
			position: "absolute",
			height: 20,
			width: "100%",
			top: -20,
			left: 0,
			background: "url('./elephantbox/shadow_t.png') repeat-x"
		});
		
		var $corner_b = $("<div/>").css({
			position: "absolute",
			height: 20,
			width: "100%",
			bottom: -20,
			left: 0,
			background: "url('./elephantbox/shadow_b.png') repeat-x"
		});
		
		var $corner_l = $("<div/>").css({
			position: "absolute",
			width: 20,
			height: "100%",
			left: -20,
			top: 0,
			background: "url('./elephantbox/shadow_l.png') repeat-y"
		});
		
		var $corner_r = $("<div/>").css({
			position: "absolute",
			width: 20,
			height: "100%",
			right: -20,
			top: 0,
			background: "url('./elephantbox/shadow_r.png') repeat-y"
		});
		
		*/
		
		var $caption = $("<p/>").css({
			opacity: 0,
			display: "block",
			width: "100%",
			padding: "2px 0px 3px 0px",
			height: "30px",
			position: "absolute",
			bottom: 2,
			left: 5,
			"line-height": "30px",
			"padding": 0,
			"margin": 0,
			"font-family": "Verdana",
			"font-size": "14px",
			color: "#868686",
			"z-index": 1003
		});
		
		var $previous = $("<div/>").css({
			width: "40%",
			height: "100%",
			"z-index": 1002,
			cursor: "pointer",
			position: "absolute",
			left: "5px",
			top: 0
		});
		
		var $next = $("<div/>").css({
			width: "40%",
			height: "100%",
			"z-index": 1003,
			cursor: "pointer",
			position: "absolute",
			right: "5px",
			top: 0
		});
		
		$box.css({
			background: "white url('" + defaults.loaderWhite + "') no-repeat center center"	
		});
		
		function loseControls(){
			
			$next.css({
				background: "none"	
			});
			$previous.css({
				background: "none"	
			});
			$next.remove();
			$previous.remove();
		}
		
		function activateControls(number){
			$(document).unbind("keydown");
			$(document).bind("keydown",function(e) {
								
				if(e.keyCode == 27) {
					$container.click();
				}else if(e.keyCode == 37 && number != 1) {
					$(document).unbind("keydown");
					$previous.click();
					

				}else if(e.keyCode == 39 && number != elements_count) {
					$(document).unbind("keydown");
					$next.click();
				}
			});
			
			if(number < elements_count){
			
				$box.prepend($next);
				
				$next.hover(function(){
					
					$next.css({
						background: "url('" + host + "/elephantbox/next.png') no-repeat center right"
					});
				},function(){
					$next.css({
						background: "none"
					});
				}).click(function(){
					
					loseControls();
					
					$image.animate({
						opacity: 0	
					}, defaults.time);
					
					$caption.animate({
						opacity: 0	
					}, defaults.time, function(){
						open_elephantbox(number+1);
					});
					
				});
			
			}
			
			if(number > 1){
				
				$box.prepend($previous);
				
				$previous.hover(function(){
					
					$previous.css({
						background: "url('" + host + "/elephantbox/previous.png') no-repeat center left"
					});
				},function(){
					$previous.css({
						background: "none"
					});
				}).click(function(){
					
					loseControls();
					
					$image.animate({
						opacity: 0	
					}, defaults.time);
					
					$caption.animate({
						opacity: 0	
					}, defaults.time, function(){
						open_elephantbox(number-1);
					});
					
				});
			
			}
			
		}
		
		function pngFix(){
			$exit.fixPNG();	
		}
		
		$exit.css({
			opacity: 0,
			"z-index": 1002,
			cursor: "pointer"
		});
		
		function getText(number){
			
			var element = number-1;
			
			return $elements.eq(element).attr("title");
			
		}
		
		function setShadow(){
			return false;
			
			if(defaults.shadow != true){
				return false;	
			}
			
			$box.append($corner_tl);
			$box.append($corner_tr);
			$box.append($corner_t);
			$box.append($corner_l);
			$box.append($corner_r);
			$box.append($corner_b);
			$box.append($corner_bl);
			$box.append($corner_br);
		}
		
		function setLoaderBackground(){
		
			$overlay.css({
				"background-image":"url('" + defaults.loader + "')",
				"background-position": "center center",
				"background-repeat": "no-repeat"
			});
		
		}
		
		function removeLoaderBackground(){
			$overlay.css({
				"background-image":"none"
			});
		}
		
		return $(this).each(function(){
			
			var source = $(this).attr("href");
			var loaded = false;
			var width = 0;
			var height = 0;
			
			if(source.match(imageRegExp)){
								
				if(defaults.preload){
					
					var preload_image = $("<img/>");
					preload_image.load(function(){
						loaded = true;
						elements_loaded++;
						width = this.width;
						height = this.height;
					});
					preload_image.attr("src", source);
					
				}
			
				var $element = $(this);
				
				counter++;
				var number = counter;
				source_array[number] = source;
				
				$element.click(function(e){
					
					setLoaderBackground();
					
					$(".elephant_overlay").remove();
					$(".elephant_container").remove();
					
					
					$overlay.prependTo("body");
					$container.prependTo("body");
					$box.prependTo($container);
					$container.unbind("click");
					$container.click(function(){
						
						setTimeout(function(){
							
							if(clickedInside == false){
								
								$(document).unbind("keypress");
								
								var window_d = getViewport();
								var viewport_start = window_d.height/2;
								loseControls();
								$exit.remove();
								
								$caption.animate({
									opacity: 0
								}, defaults.boxtime);
								
								$box.find("img").animate({
									opacity: 0
								}, defaults.boxtime, function(){
								
									$caption.empty();
									$(this).remove();
									
									$box.animate({
										height: 0,
										width: 0,
										opacity: 0,
										top: viewport_start
									}, defaults.boxtime, function(){
										$container.remove();
									
										//$container.remove();
										$overlay.animate({
											opacity: 0
										}, defaults.time, function(){
											$overlay.remove();
											display = "closed";
										});
									
									});
								
								});
							
							}else{
								clickedInside = false;
							}
						}, 100);
						
					});
					
					$box.click(function(){
						clickedInside = true;	
					});
					
					$overlay.animate({
						opacity: defaults.opacity
					}, defaults.time, function(){
														
						var load_image = $("<img/>").load(function(){
							open_elephantbox(number);
						});
						load_image.attr("src", source_array[number]);
												
					});
					
					e.preventDefault();
					return false;
					
				});
			
			}else{
				elements_count--;
			}
			
			
		});
		
	}

})(jQuery);