var PythonImageOpener = {
	"a.image-popup" : function(element) {
		PythonEvent.observe(element, "click", ImagePopup.popupImage);
		element = null;
	},
	"a.image-popup-link" : function(element) {
		PythonEvent.observe(element, "click", ImagePopup.popupImageLink);
		element = null;
	}
};

var ImagePopup = {
	"popupImageLink" : function(event) {
	  var link = PythonEvent.element(event);
	  if (link.href){
	  	ImagePopup.openImage(event, link.href);
	  }
  },
	
	"popupImage" : function(event) {
		var image = PythonEvent.element(event);
		var link = image.parentNode;
		var productCode = link.getAttribute("id");
		if (productCode != null && productCode.indexOf("-")>0){
			productCode = productCode.substring(0,productCode.indexOf("-"));
		}
		if (link.href){
			// call ajax to get image array
			new Ajax.Request(Parameters.rootPath + 'public/product/get-media.html',
			  {
			    method:'get',
				parameters: {code: productCode},
			    onSuccess: function(transport){
			      var response = transport.responseText || "";
				  
				  var popupImages = response.split(",");
				  if (popupImages.length == 1 && popupImages[0] == ""){
					popupImages = new Array();
				  }
				  ImagePopup.openImage(event, link.href, popupImages);
			      
			    },
			    onFailure: function(){ ImagePopup.openImage(event, link.href); }
			  });
		}
		
		PythonEvent.stop(event);
	},
	
	"openImage" : function(event, link, images) {
		var popupImage = new Image();
    
		PythonEvent.observe(popupImage, "load", function() {
			var popup = PythonElement.get("image-popup");
				    
			var theImage = null;
			if (popup == null) {
				popup = document.createElement("div");
				popup.setAttribute("id", "image-popup");
				popup.innerHTML = "<div id='image-popup-title'>Click image to close</div>" +
					"<img id='image-popup-image' src='" + popupImage.src + "'/>";				
				document.body.appendChild(popup);		
				theImage = PythonElement.get("image-popup-image");
				PythonEvent.observe(popup, "click", ImagePopup.closeImage);
			}
			else {
				theImage = PythonElement.get("image-popup-image");
				theImage.src = popupImage.src;
			}
		    
			var nav = ImagePopup.getImageNavigation(images, link);
			if (nav != null){
				popup.appendChild(nav);
			}
			
			var height = PythonWindow.viewportHeight();
		  var scrollY = PythonWindow.scrollPosition()[1];
		  var offset = ((height - popupImage.height)/2) < 10 ? 10 : ((height - popupImage.height)/2);
		    
		  popup.style.left = ((document.body.scrollWidth - popupImage.width - 2) / 2) + "px";
		  popup.style.top = (scrollY + offset) + "px";
			popup.style.display = "block";
			ImagePopup.addIEIFrame(popup);
		    
			ImagePopup.relocatePopup(popupImage);	
		});

		popupImage.src = link;
    
		PythonEvent.stop(event);
	},
	
	"getImageNavigation" : function(images, current) {
		var nav = PythonElement.get("image-popup-nav");
		
		if (nav == null){
			var nav = document.createElement("div");
		}
		else {
			while (nav.childNodes[0]){
				nav.removeChild(nav.childNodes[0]);
			}
			if (nav.parentNode != null){
				nav.parentNode.removeChild(nav);
			}
		}
		nav.setAttribute("id", "image-popup-nav");
		
		if (images==null || images.length == 0){
			return null;
		}
		var currentIndex = 0;
		for (var i=0; i < images.length; i++){
			if (current.indexOf(images[i])>=0){
				currentIndex = i;
				break;
			}
		}
		
		var lt = document.createElement("a");
		lt.innerHTML = "&lt;";
		nav.appendChild(lt);
		lt.setAttribute("href", Parameters.rootPath + images[currentIndex-1]);
		PythonEvent.observe(lt, "click", ImagePopup.changeImage);
		
		if (currentIndex == 0){
			lt.style.display = "none";
		}
		
		for (var i= 0; i<images.length; i++){
			var change = document.createElement("a");
			change.innerHTML = i+1;
			nav.appendChild(change);
			if (currentIndex == i){
				Element.addClassName(change, "current");
			}
			change.setAttribute("href", Parameters.rootPath + images[i]);
			PythonEvent.observe(change, "click", ImagePopup.changeImage);
		}
		
		var gt = document.createElement("a");
		gt.innerHTML = ">";
		nav.appendChild(gt);
		gt.setAttribute("href", Parameters.rootPath + images[currentIndex+1]);
		PythonEvent.observe(gt, "click", ImagePopup.changeImage);
		if (currentIndex == images.length-1){
			gt.style.display = "none";
		}
		return nav;		
	},
	
	"closeImage" : function (event) {
		var popup = PythonElement.get("image-popup");
		popup.style.display = "none";
		ImagePopup.removeIEIFrame();
	},
	
	/**
	 * Support for covering selects with iframes for IE < 7
	 */
	"addIEIFrame" : function(popup) {
		if (document.all && document.getElementById && !window.Opera){
			// Add a shim to hide select items for drop down menus.
			if (navigator.appVersion.substr(22,3) != "5.0"){
				var popupIFrame = PythonElement.get("image-popup-iframe");
				
				if (popupIFrame == null){
					popupIFrame = document.createElement('iframe');
					popupIFrame.setAttribute("id", "image-popup-iframe");
					popupIFrame.scrolling = "no";
					// a dummy file, so we don't https warning messages
					popupIFrame.src = "blank.htm";
					popupIFrame.frameBorder = "0";
				}

				popupIFrame.style.width = popup.clientWidth + 2;
				popupIFrame.style.height = popup.clientHeight + 2;				
				popupIFrame.style.top = popup.style.top;
				popupIFrame.style.left = popup.style.left;
				popupIFrame.style.zIndex=10;
				popup.parentNode.insertBefore(popupIFrame,popup);
				
				popup.style.zIndex=100;
			}
		}
	},
	
	"removeIEIFrame" : function() {
		var popupIFrame = PythonElement.get("image-popup-iframe");
		if (popupIFrame != null){
			popupIFrame.parentNode.removeChild(popupIFrame);
		}
	},
	
	"changeImage" : function (event) {
		var link = PythonEvent.element(event);
		var popupImage = new Image();
    
		PythonEvent.observe(popupImage, "load", function() {
			var theImage = PythonElement.get("image-popup-image");
			
			theImage.src = popupImage.src;
			
			ImagePopup.updateNavigation(link);
			ImagePopup.relocatePopup(popupImage);
		});
		
		popupImage.src = link.href;
		PythonEvent.stop(event);
	},
	
	"updateNavigation" : function (current) {
		var nav = PythonElement.get("image-popup-nav");
		var ELEMENT_NODE = 1;
		if (nav == null) {
			return;
		}
		
		var increment = 0;
		if(current.innerHTML=="&lt;"){
			increment = -1;
		} 
		else if(current.innerHTML=="&gt;"){
			increment = 1;
		}
				
		var currentIndex = 0;
		if(current.innerHTML=="&lt;" || current.innerHTML=="&gt;"){
			for (var i=0; i<nav.childNodes.length; i++){
				var child = nav.childNodes[i];
				if (child.nodeType == ELEMENT_NODE){
					if (Element.hasClassName(child, "current")) {
						current = nav.childNodes[i+increment];
						currentIndex = i+increment;
						break;
					}
				}
			}
		}
		else{		
			var element = 0;
			for (var i=0; i<nav.childNodes.length; i++){
				var child = nav.childNodes[i];
				if (child.nodeType == ELEMENT_NODE){
					if (child == current) {
						currentIndex = element;
						break;
					}
					element++;
				}
			}
		}
	
		var element = 0;
		for (var i=0; i<nav.childNodes.length; i++){
			var child = nav.childNodes[i];
			if (child.nodeType == ELEMENT_NODE){
				if (element == currentIndex) {
					Element.addClassName(child, "current")
				}
				else {
					Element.removeClassName(child, "current");				
				}
				if (element == 0){
					if (currentIndex > 1){
						child.style.display = "inline";
						child.href = nav.childNodes[currentIndex-1].href;
					}
					else {
						child.style.display = "none";
					}
				}
				if (element == nav.childNodes.length-1){
					if (currentIndex < nav.childNodes.length - 2){
						child.style.display = "inline";
						child.href = nav.childNodes[currentIndex+1].href;
					}
					else {
						child.style.display = "none";
					}
				}
				element++;
			}
		}
	},
	
	"relocatePopup" : function (popupImage){
		var popup = PythonElement.get("image-popup");
		var height = PythonWindow.viewportHeight();
		var scrollY = PythonWindow.scrollPosition()[1];
		var offset = ((height - popupImage.height)/2) < 10 ? 10 : ((height - popupImage.height)/2);
		    
		popup.style.left = ((document.body.scrollWidth - popupImage.width - 2) / 2) + "px";
		popup.style.top = (scrollY + offset) + "px";
		popup.style.display = "block";
		ImagePopup.addIEIFrame(popup);
	}
}

/* Duplicates of Prototype for main site */
var PythonEvent = {
	"observe" : function(element, eventName, handler) {
		if (element.addEventListener) {
      element.addEventListener(eventName, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + eventName, handler);
    }
	},
	"stop" : function(event) {
    if (event.preventDefault) {
      event.preventDefault();
      event.stopPropagation();
    } else {
      event.returnValue = false;
      event.cancelBubble = true;
    }
	},
	"element" : function(event) {
    return event.target || event.srcElement;
  }
}

var PythonWindow = {
	"viewportHeight" : function() { 
    var height = 0;
    if (window.innerHeight) {
			height = window.innerHeight;
    }
    else if (document.documentElement) {
			height = document.documentElement.clientHeight;
    }
    else {
			height = document.body.clientHeight;
    }
    
    return height;
	},
	
	/*
	 * How far we're scrolled down the viewport
   */
	"scrollPosition" : function() {
    var scrollY, scrollX;
    
		if (self.pageYOffset) {
			scrollX = self.pageXOffset;
			scrollY = self.pageYOffset;
		}
		else if (document.documentElement && document.documentElement.scrollTop) {
			scrollX = document.documentElement.scrollLeft;
			scrollY = document.documentElement.scrollTop;
		}
		else if (document.body) {
			scrollX = document.body.scrollLeft;
			scrollY = document.body.scrollTop;
		}	
		
		return [scrollX, scrollY];
	}
}

var PythonElement = {
	"get" : function(id) {
		return document.getElementById(id);
	}
}

Behaviour.register(PythonImageOpener);