var Popover = function(url, options) { this.url = url, this.options = options, this.viewportwidth = "", this.viewportheight = "", this.showing = false; }

var glossary = glossary || {	
	Close: "Close",
	previous_image: "Previous Image",
	next_image: "Next Image"
};

var websover = {

	extraWidth: 22, // accounts for paddings and borders
	extraHeight: 68, // and the titlebar height as well (22 + 46)
	
    /* Slots to store active context */
    currentShadow: null,
	currentWrap: null,
    currentBorder: null,
    currentPopover: null,
    currentContent: null,
    garbageBin: null,

    imageToLoad: null, //holds URL of image to load, set here for the sake of having reference during setTimeout
	loadSrcTo: null, //for use with multiple images lightbox, swaps src when image w corresponding src is loaded

    removeBadElements: function() { 
		if(/msie|MSIE 6/.test(navigator.userAgent)) { 
            var selects = document.getElementsByTagName("SELECT");
            for(var i = 0; i < selects.length; i++) {
                if(selects[i].style.visibility == "hidden") selects[i].style.visibility = "visible";
                else selects[i].style.visibility = "hidden";
            }
        } 

        var iframes = document.getElementsByTagName("IFRAME");
        for(var i = 0; i < iframes.length; i++) {
            if(iframes[i].style.visibility == "hidden") {
                iframes[i].style.visibility = "visible";
            } else { if(iframes[i].id != "websover_iframe" && iframes[i].id != "documentarea") iframes[i].style.visibility = "hidden"; }
        }
    },

    getTotalDocSize: function() { return Math.max((document.documentElement.scrollHeight || document.body.scrollHeight), (document.documentElement.offsetHeight || document.body.offsetHeight)); },

    hide: function() {
        websover.removeBadElements();

        /* Temporarily uncommenting for odd Chrome bug -- Ryan :: if(websover.currentContent.id === "websover_iframe") websover.currentContent.src = "javascript:false;"; */
        websover.currentWrap.style.display = "none";
        websover.currentShadow.style.display = "none";

        // If it's an iframe, we're safe to fully obliterate the reference, but if it's an object we need to keep the reference around.
        if(websover.currentContent.tagName === "IFRAME") {
            websover.currentContent.src = "javascript:false;"; // Shhhh, fixes a very ninja-esque bug that Idris found.
            websover.garbageBin.appendChild(websover.currentContent);
            websover.garbageBin.innerHTML = "";
        } else {
            websover.currentContent.parentNode.removeChild(websover.currentContent);
        }
    },
    
    /* This is used in maybe one place. Consider killing it. */
	changeIframeDest: function(paramObj) { 
		var iframe = document.getElementById("websover_iframe");
        document.getElementById("websover_title").innerHTML = paramObj.title;
		if(iframe) iframe.src = paramObj.url; 
    },

	checkScrolling: function(resizeObj, websoverIframe) {
		if(typeof resizeObj.scrolling !== "undefined") {
			if(resizeObj.scrolling === true) {
				websoverIframe.setAttribute("scrolling", "auto");
				websoverIframe.style.overflow = "auto";
			} else if(resizeObj.scrolling === false) {
				websoverIframe.setAttribute("scrolling", "no");
				websoverIframe.style.overflow = "hidden";
			}
		}
	},

	resize: function(resizeObj) {
        // Note: Resize !== the same as reposition. Resize uses different math based on passed in obj params.
		var websoverIframe = document.getElementById("websover_iframe_container") || websover.currentContent,
			toWidth = resizeObj.width ? resizeObj.width : websover.width,
            toHeight = resizeObj.height ? resizeObj.height : websover.height,
			newLeft = -parseInt((toWidth + websover.extraWidth)/2),
			newTop = -parseInt((toHeight + websover.extraHeight)/2);

		if(typeof jQuery != "undefined" && (typeof resizeObj.animation === 'undefined')) {
			if(typeof resizeObj.before !== "undefined" && typeof resizeObj.before === "function") resizeObj.before();
			
			jQuery(websover.currentBorder).animate({ 
				top: newTop,
				left: newLeft,
				width: toWidth
			}, 500);
            jQuery(websover.currentPopover).animate({width: toWidth}, 500, function() {
                if(typeof resizeObj.after !== "undefined" && typeof resizeObj.after === "function") resizeObj.after();
                websover.checkScrolling(resizeObj, websoverIframe);
				jQuery(websoverIframe).fadeIn("fast");
				websover.reposition();
			});
			if(websoverIframe.tagName !== "IMG") jQuery(websoverIframe).animate({height: toHeight}, 500);

		} else {
			if(typeof resizeObj.before != "undefined" && typeof resizeObj.before == "function") resizeObj.before();
			
			websover.currentBorder.style.top = newTop + "px";
			websover.currentBorder.style.left = newLeft + "px";
			websover.currentBorder.style.width = toWidth + "px";
			
			websover.currentPopover.style.width = toWidth + "px";
			if(websoverIframe.tagName !== "IMG") websoverIframe.style.height = toHeight + "px";
			
			if(websoverIframe.style.visibility === "hidden") websoverIframe.style.visibility = "visible";
			if(typeof resizeObj.after != "undefined" && typeof resizeObj.after == "function") resizeObj.after();
			websover.checkScrolling(resizeObj, websoverIframe);
			websoverIframe.style.display = "block";
			
			websover.reposition();
		}

        websover.width = toWidth;
        websover.height = toHeight;

    },

    resizeImg: function() {
		// here goes fix for IE, assuming we don't ever pass in an image smaller than 60x60
        var width = websover.imageToLoad.width || websover.imageToLoad.offsetWidth,
			height = websover.imageToLoad.height || websover.imageToLoad.offsetHeight,
			isImgLoading = width<60 || height<60 ? false : true;
	
        if(isImgLoading) {
            var viewportwidth = (typeof window.innerWidth !== "undefined" ? window.innerWidth : document.documentElement.clientWidth),
		        viewportheight = (typeof window.innerHeight !== "undefined" ? window.innerHeight : document.documentElement.clientHeight);

            websover.resize({
                width: width, height: height,
                scrolling: false,
                after: function() {
                    websover.width = width;
                    websover.height = height;
                    websover.imageToLoad.style.position = "static";
                    websover.imageToLoad.style.visibility = "visible";
					if(websover.loadSrcTo) {
						websover.loadSrcTo.style.visibility = "visible";
						websover.loadSrcTo.src = websover.imageToLoad.src;
					}
                }
            });
        } else {
            setTimeout(websover.resizeImg, 200);
        }
    },

	reposition: function() {
		var windowHeight =  (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight)
		var verticalScroll = (typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop)

		if(windowHeight < websover.height + websover.extraHeight) {
			websover.currentWrap.style.position = "absolute";
			websover.currentWrap.style.top = "0";
			websover.currentBorder.style.top = verticalScroll + 20 + "px";
			//websover.currentBorder.style.top = parseInt(websover.currentBorder.style.top) + (websover.height - document.height)/2 + websover.extraHeight + "px";
		} else {
			websover.currentWrap.style.position = "fixed";
			websover.currentWrap.style.top = "50%";
		}
	},

    watchImgLoad: function() {
        /* IE doesn't like to fire the onload event with the proper width/heights in place, so we need to check the odd complete property... */
        if(/msie|MSIE 6/.test(navigator.userAgent) || /msie|MSIE 7/.test(navigator.userAgent) || /msie|MSIE 8/.test(navigator.userAgent)) {
            if(websover.imageToLoad.complete !== null && websover.imageToLoad.complete === true) websover.resizeImg();
            else setTimeout(websover.resizeImg, 200);
        } else {
            websover.imageToLoad.onload = websover.resizeImg;
        }
    },

	/* setting up before firing watchImgLoad. This was pulled out from single image to also be used by multiple img lightbox */
	initWatchImgLoad: function(src){
        websover.imageToLoad = document.createElement("img");
        websover.imageToLoad.style.position = "absolute";
        websover.imageToLoad.style.visibility = "hidden";
        websover.imageToLoad.style.top = "0px";
        websover.imageToLoad.style.left = "0px";

        // Set the src to be blank, then reset it to our desired (fixes a bug in webkit browsers where the onload doesn't repeatedly fire)
        websover.imageToLoad.src = "";
        websover.watchImgLoad();
        websover.imageToLoad.src = src;
		if(websover.loadSrcTo)	websover.loadSrcTo.style.visibility = "hidden";
	}
}

Popover.prototype = {    
    show: function() {
        websover.removeBadElements();

		/*---------------------------------------| Setting up options and parameters |---------------------------------------*/
        var options = this.options, scrollOption = (typeof options.scrolling !== "undefined" && options.scrolling == true ? "auto" : "no");
        websover.width = (options.width ? options.width : 100);
        websover.height = (options.height ? options.height : 100);
        if(typeof options.closeButton == 'undefined') options.closeButton = true;


		/*---------------------------------------| Creating websover DOM nodes |---------------------------------------*/
        if(websover.currentShadow === null) {
            websover.currentShadow = document.createElement('div');
	        websover.currentShadow.setAttribute("id", "websover_shadow");
            document.body.appendChild(websover.currentShadow);
        }
        // in certain spots, various CSS rules !important this to 2000px. Consider doing that here instead.
        //websover.currentShadow.style.height = websover.getTotalDocSize() + "px"; 
        websover.currentShadow.style.display = "block";

        if(websover.garbageBin === null) {
            websover.garbageBin = document.createElement('div');
            websover.garbageBin.cssText = "display: none;";
            document.body.appendChild(websover.garbageBin);
        }

        if(websover.currentWrap === null) {
            websover.currentWrap = document.createElement('div');
            websover.currentWrap.setAttribute("id", "websover_wrap");
						if(typeof options.wrapperClasses != 'undefined'){ 
							websover.currentWrap.setAttribute('className', options.wrapperClasses) || websover.currentWrap.setAttribute('class', options.wrapperClasses);
						}
            document.body.appendChild(websover.currentWrap);
        }else{
					if(typeof options.wrapperClasses != 'undefined'){
						websover.currentWrap.setAttribute('className', options.wrapperClasses) || websover.currentWrap.setAttribute('class', options.wrapperClasses);
					}else{
						websover.currentWrap.setAttribute('className', '') || websover.currentWrap.setAttribute('class', '');
					}
				}

        if(websover.currentBorder === null) {
            websover.currentBorder = document.createElement('div');
            websover.currentBorder.setAttribute("id", "websover_border");
            websover.currentWrap.appendChild(websover.currentBorder);
        }

        if(websover.currentPopover === null) {
            websover.currentPopover = document.createElement('div');
            websover.currentPopover.setAttribute("id", "inner_websover");
            websover.currentBorder.appendChild(websover.currentPopover);
        }


        if(this.url instanceof Array || (typeof this.url === 'object' && options.type === "IMG")) {
			/*---------------------------------------| Lightbox |---------------------------------------*/
			
            var arrayImages = this.url;
			
            if(arrayImages instanceof Array){
	            /* fixes the starting index of array */
				if(typeof options.startIndex === "number" && options.startIndex < arrayImages.length)
					arrayImages = arrayImages.splice(options.startIndex,arrayImages.length).concat(arrayImages);
				
				var loop = typeof options.loop === "boolean" && options.loop ? true : false;
				
	            /* I can only assume that if you pass in an array, they must all be images. Sigh.. putting in fix for stupid people */
	  			if(options.type !== "IMG") {
            	    for (var i = 0; i<arrayImages.length; i++) {
	                    if(arrayImages[i].indexOf(".png") < 0 && arrayImages[i].indexOf(".jpg") < 0 && arrayImages[i].indexOf(".jpeg") < 0 && arrayImages[i].indexOf(".gif") < 0){
	                        arrayImages.splice(i,1);
	                    }
	                }
				}
            }

			/* filter out img tagNames if nodes are passed in*/
			if(!(this.url instanceof Array)){
				var tempNodeUrls = [];
				for (var i=0; i<arrayImages.length;i++){
					if(arrayImages[i].tagName === "IMG") {
						tempNodeUrls.push(arrayImages[i].src);
					}
				}
				arrayImages = tempNodeUrls;
			}

			/*------ Setting up the DOM elements ------
				<div id="websover_lightbox">
		          <div id="websover_lightbox_container">
		              <img id="websover_lightbox_image">
		              <div id="websover_lightbox_nav">
		                  <a href="#" id="websover_lightbox_prev" title="Previous Image">Previous Image</a>
		                  <a href="#" id="websover_lightbox_next" title="Next Image">Next Image</a>
		              </div>
		          </div>
		      </div>*/
			var lightbox = document.createElement("div"),
				imageContainer = document.createElement("div"),
				imageDisplay = document.createElement("img"),
				nav = document.createElement("div"),
				prevLink = document.createElement("a"),
				nextLink = document.createElement("a");
			
			lightbox.setAttribute("id","websover_lightbox");	
			imageContainer.setAttribute("id","websover_lightbox_container");
			imageDisplay.setAttribute("id","websover_lightbox_image");
			nav.setAttribute("id","websover_lightbox_nav");
			prevLink.setAttribute("id","websover_lightbox_prev");
			prevLink.setAttribute("title", glossary.previous_image);
			prevLink.setAttribute("href","#");
			prevLink.setAttribute("onclick","return false");
			prevLink.innerHTML = "<span>"+glossary.previous_image+"</span>";
			nextLink.setAttribute("id","websover_lightbox_next");
			nextLink.setAttribute("title", glossary.next_image);
			nextLink.setAttribute("href","#");
			nextLink.setAttribute("onclick","return false");
			nextLink.innerHTML = "<span>"+glossary.next_image+"</span>";
			
			nav.appendChild(prevLink);
			nav.appendChild(nextLink);
			imageContainer.appendChild(imageDisplay);
			imageContainer.appendChild(nav);
			lightbox.appendChild(imageContainer);
			websover.currentContent = lightbox;
			
			
			// Attach events and loading
			var currImage = 0;
			var loadImage = function(which){
				if(loop) {
					if(which === -1) which = arrayImages.length-1;
					if(which === arrayImages.length) which = 0;
					currImage = which;
				} else {
					if(currImage === 0) { prevLink.style.display = "none"; }
					if(currImage === 1) { prevLink.style.display = "block"; }
					if(currImage === arrayImages.length-2) { nextLink.style.display = "block"; }
					if(currImage === arrayImages.length-1) { nextLink.style.display = "none"; }
				}
				websover.loadSrcTo = imageDisplay;
				websover.initWatchImgLoad(arrayImages[which]);
				return false;
			};
			var previousClick = function(e) { return loadImage(--currImage);};
			var nextClick = function(e) { return loadImage(++currImage);};

			// fork click events for Dom Level2+ vs below
	        if(typeof addEventListener === "undefined") {
				prevLink.attachEvent('onclick',previousClick);
				nextLink.attachEvent('onclick',nextClick);
			} else {
				prevLink.addEventListener('click', previousClick,false);
				nextLink.addEventListener('click', nextClick,false);
			}
			loadImage(currImage);
			
        } else if((typeof this.url.indexOf === "function" && (this.url.indexOf(".png") > 0 || this.url.indexOf(".jpg") > 0 || this.url.indexOf(".jpeg") > 0 || 
            this.url.indexOf(".gif") > 0)) || (typeof options.type !== "undefined" && options.type === "IMG")) {
			websover.initWatchImgLoad(this.url)
			websover.currentContent = websover.imageToLoad;
        } else if(typeof this.url == "string") {
			/*---------------------------------------| Iframe |---------------------------------------*/
            websover.currentContent = document.createElement("iframe");
            websover.currentContent.setAttribute("id", "websover_iframe");
            websover.currentContent.setAttribute("rel", this.url);
            websover.currentContent.setAttribute("name", "popoverIframe");
            websover.currentContent.setAttribute("frameborder", "0");
            
            // IE won't allow frameborder to be set with setAttribute
            try { websover.currentContent.frameBorder = 0; } catch(e) {}
            
            websover.currentContent.setAttribute("scrolling", scrollOption);
            websover.currentContent.src = this.url;
            
            // Set the onload event for browsers that aren't horrible -- We do a setTimeout below for browsers that don't support this (no time for a proper fix)
            websover.currentContent.onload = function() { websover.currentContent.style.visibility = "visible"; };

            websover.currentContent.style.cssText = 'visibility: hidden; ' + (scrollOption === "no" ? 'overflow: hidden;' : 'overflow: auto;');
        } else {
			/*---------------------------------------| DOM Object |---------------------------------------*/
			this.url.style.display = "block";
            websover.currentContent = this.url;
            websover.currentContent.className = 'websover_content';
        }

		/*---------------------------------------| create and place popover elements onto the page |---------------------------------------*/
        websover.currentPopover.innerHTML = '<div id="websover_header">' + 
            '<span id="websover_title">' + options.heading + '</span>' + 
            (options.closeButton ? '<a href="#" title="'+glossary.Close+'" id="websover_close" onclick="websover.hide(); return false;">'+glossary.Close+'</a>' : '') + '</div>' +
            '<div id="websover_iframe_container"></div>';
        websover.currentWrap.style.display = "block";
        websover.currentPopover.style.width = websover.width + "px";
        websover.currentBorder.style.width = websover.width + "px";
        websover.currentBorder.style.left = -parseInt((websover.width + websover.extraWidth)/2) + "px";
        websover.currentBorder.style.top = -parseInt((websover.height + websover.extraHeight)/2) + "px";
 		
		var iframeContainer = document.getElementById("websover_iframe_container");
		if(typeof this.url == "string") iframeContainer.style.cssText = 'height: ' + (websover.height - 26) + 'px';
        iframeContainer.appendChild(websover.currentContent);


		/*---------------------------------------| Show the popover accordingly |---------------------------------------*/
        if(websover.currentContent.tagName === "IFRAME") {
            // Set a generic timeout to catch everything else that sucks (I do not have time to do a proper fix here -- Ryan)
            window.setTimeout(function() { websover.currentContent.style.visibility = "visible"; }, 500);
        } else if(websover.currentContent.tagName === "IMG") {
	
        } else {
			websover.resize({ height: websover.currentContent.offsetHeight, width: websover.width});
			websover.currentBorder.style.height = "auto";
        }

        if(document.getElementById("websover_close")) document.getElementById("websover_close").onclick = this.hide;

		this.showing = true; // Required for popover to work with sitebuilder
		
		websover.reposition();
        return false;
    },    

    hide: function() {
        if(typeof this.options != "undefined" && this.options.onClose) this.options.onClose();
		websover.hide();
		
		this.showing = false;
		return false; 
	}
}