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;
	},
	"a.popup-to-scale" : function(element) {
		PythonEvent.observe(element, "click", ImagePopup.popupToScale);
		element = null;
	},
	"a.wall-colour" : function(element) {
		PythonEvent.observe(element, "click", ImagePopup.switchColour);
		PythonEvent.observe(element, "mouseover", ImagePopup.switchColour);
		element = null;
	}
};

var ImagePopup = {
	"switchColour" : function(event) {
	  var link = PythonEvent.element(event);
	  
	  PythonElement.get("room").className = link.className;

	  Event.stop(event);
	},
	"popupToScale" : function(event) {
	  var link = PythonEvent.element(event);
	  
	  if (link.tagName == "IMG") {
	  	link = link.parentNode;
	  }
	  
	  window.open(link.href, '_blank', 'width=640,height=522,toolbar=no,status=no,location=no,scrollbars=no,resizable=yes,menubar=no');
	  
	  Event.stop(event);
	},
	"popupImageLink" : function(event) {
	  var link = PythonEvent.element(event);
	  
	  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("-"));
		}
		
		// 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);
			}
		    
			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";
	},
	
	"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";
	}
}

/* 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);