// This uses global variables now.  Should change it to be a closure and take input parameters.
// container is the containing element (usually a div).  It must have width and height identical to the contractedWidth and contractedHeight.
// it must also have an element ID.
var windowBarHeight = 20;
var windowBarColor = "#cfe3f4";
var windowBorderColor = "#CCCCCC";
var windowBorderWidth = 1;
var allowMultipleOpen = false;
var currentActiveSDObject = null;

SilverDragonObject = function(container, xamlFile, contractedWidth, contractedHeight, expandedWidth, expandedHeight, pinByDefault, mouseOverEl, hideWhenContracted, seadragonImageName, minimizeDelay, expandDelay, title, href, noExpand)
{
    var self = this;
    this.contractedWidth = contractedWidth;
    this.contractedHeight = contractedHeight;
    this.minimizeDelay = minimizeDelay;
    this.expandDelay = expandDelay;
    this.noExpand = noExpand;
    this.wpfeControl = null;
	this.root = null;
    this.open = false;
    this.pinned = false;
    this.maximized = false;
    this.hideWhenContracted = hideWhenContracted;
    this.seadragonImageName = seadragonImageName;
    this.inWhileClosed = false;
    this.closeTimer = null;
    this.openTimer = null;
    this.title = title;
    this.href = href;

    this.container = container;
    this.containerId = container.id;
    this.originalContainerZIndex = getElementStyle(container, "zIndex");
    
    this.overlayEl = document.createElement("div");
    this.overlayId = self.containerId + "SilverDragonOverlay";
    self.overlayEl.id = self.overlayId;
    var pinnedIconId = self.containerId + "pinnedIcon";
    var unpinnedIconId = self.containerId + "unpinnedIcon";
    var closeBtnId = self.containerId + "carAdCloseBtn";
    var maximizeBtnId = self.containerId + "carAdMaxBtn";
    var titleId = self.containerId + "title";
    self.overlayEl.style.backgroundColor = windowBarColor;
    self.overlayEl.style.position = "absolute";
    self.overlayEl.style.top = "0px";
    self.overlayEl.style.left = "0px";
    self.overlayEl.style.width = contractedWidth + "px";
    self.overlayEl.style.height = contractedHeight + "px";
    self.overlayEl.style.margin = "0px";
    self.overlayEl.style.padding = "0px";
    var titleSection = "<span id=\"" + titleId + "\" style=\"float: left; margin-top: 2px; margin-left: 100px; display: none;\">" + self.title + "</span>";
    
    if (self.href)
        titleSection = "<a href=\"" + self.href + "\" style=\"cursor: pointer;\">" + titleSection + "</a>";
        
    container.appendChild(self.overlayEl);
    self.overlayEl.innerHTML = "<img id=\"" + pinnedIconId + "\" src=\"PinnedIcon.gif\" alt=\"un-pin\" style=\"float: left; margin-top: 2px; margin-left: 4px; cursor: pointer; display: none;\" /><img id=\"" + unpinnedIconId + "\" src=\"UnpinnedIcon.gif\" alt=\"pin\" style=\"float: left; margin-top: 2px; margin-left: 4px; cursor: pointer; display: none;\" />" + titleSection + "<img id=\"" + closeBtnId + "\" src=\"closeIcon.gif\" alt=\"close\" style=\"float: right; margin-top: 4px; margin-right: 4px; cursor: pointer; display: none;\" /><img id=\"" + maximizeBtnId + "\" src=\"zoomIcon.gif\" alt=\"maximize\" style=\"float: right; margin-top: 2px; margin-right: 4px; cursor: pointer; display: none;\" />";
    this.pinnedIcon = document.getElementById(pinnedIconId);
    this.unpinnedIcon = document.getElementById(unpinnedIconId);
    this.closeBtn = document.getElementById(closeBtnId);
    this.maximizeBtn = document.getElementById(maximizeBtnId);
    this.title = document.getElementById(titleId);
    
    this.contentEl = document.createElement("div");
    this.contentContainerId = self.containerId + "SilverDragonContent";
    self.contentEl.id = self.contentContainerId;
    self.contentEl.stylebackgroundColor = "#ffffff";
    self.contentEl.style.position = "absolute";
    self.contentEl.style.top = "0px";
    self.contentEl.style.left = "0px";
    self.contentEl.style.width = contractedWidth + "px";
    self.contentEl.style.height = contractedHeight + "px";
    self.contentEl.style.margin = "0px";
    self.contentEl.style.padding = "0px";
    self.contentEl.style.cursor = "pointer";
    self.overlayEl.appendChild(self.contentEl);
    
    this.mouseOverEl = mouseOverEl;
    
    if (!self.mouseOverEl)
        self.mouseOverEl = self.overlayEl;

    this.dispose = function()
    {
        self.contentEl = null;
        self.overlayEl = null;
        self.pinnedIcon = null;
        self.unpinnedIcon = null;
        self.closeBtn = null;
        self.maximizeBtn = null;
        self.container = null;
        self.title = null;
        self.disableCloseTimer();
        self.disableOpenTimer();
    }
    
    this.expand = function (tween)
    {
        self.disableCloseTimer();
        
        if (currentActiveSDObject && (currentActiveSDObject != self))
        {
            if (allowMultipleOpen)
                currentActiveSDObject.unFocus();
            else
                currentActiveSDObject.contract(true);
        }
        if ((!self.inWhileClosed && !self.open) || self.maximized)
        {
            self.disableOpenTimer();
            
            if (!self.noExpand)
            {
                self.dragging = false;
                var expandedWidthDiff = expandedWidth - this.contractedWidth;
                            
                self.overlayEl.style.position = "absolute";
                self.overlayEl.style.display = "inline";
                
                self.contentEl.style.position = "absolute";

                self.setWidthHeight("0","-" + expandedWidthDiff,windowBarHeight,"0",expandedWidth, expandedHeight, windowBarHeight,tween);
				
                self.closeBtn.style.display = "inline";
                self.maximizeBtn.style.display = "inline";
                self.title.style.display = "inline";
                self.home();
                
                if (pinByDefault)
                    self.pin();
                else
                    self.unPin();
            }
            self.open = true;
            self.inWhileClosed = false;
            self.maximized = false;
        }
        
        self.focus();
        currentActiveSDObject = self;
    }

    this.contract = function (tween)
    {
        self.disableCloseTimer();
        self.dragging = false;
        
        if (!self.noExpand || self.maximized)
        {
            self.closeBtn.style.display = "none";
            self.maximizeBtn.style.display = "none";
            self.unpinnedIcon.style.display = "none";
            self.pinnedIcon.style.display = "none";
            self.title.style.display = "none";
			
            self.overlayEl.style.position = "absolute";
            self.unFocus();
            
            self.setWidthHeight("0","0","0","0",contractedWidth, contractedHeight, 0,tween);
            self.home();
            
            if (self.hideWhenContracted)
                self.overlayEl.style.display = "none";
        }
        self.open = false;
        self.maximized = false;
    }
    
    this.initiateCloseTimer = function()
    {
        if (!self.closeTimer)
        {
            self.closeTimer = setTimeout(function() { self.contract(true); }, self.minimizeDelay);
            window.status = "init close";
        }
    }
    
    this.disableCloseTimer = function()
    {
        if (self.closeTimer)
        {
            clearTimeout(self.closeTimer);
            self.closeTimer = null;
        }
            
        window.status = "disable close";
    }
    
    this.initiateOpenTimer = function()
    {
        if (!self.open && !self.openTimer)
        {
            self.openTimer = setTimeout(function() { self.expand(true); }, self.expandDelay);
            window.status = "init open";
        }
    }
    
    this.disableOpenTimer = function()
    {
        if (self.openTimer)
        {
            clearTimeout(self.openTimer);
            self.openTimer = null;
        }
        
        window.status = "disable open";
    }
    
    this.maximize = function()
    {
        var windowWidth = 0;
        var windowHeight = 0;
        
        if( typeof( window.innerWidth ) == "number" ) 
        {
            //Non-IE
            windowWidth = window.innerWidth;
            windowHeight = window.innerHeight;
        } 
        else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
        {
            //IE 6+ in 'standards compliant mode'
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } 
        else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
        {
            //IE 4 compatible
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }    
        
        self.contract(false);       
        var pos = GetPosition(self.mouseOverEl);
        self.expand(false);
        
        self.overlayEl.style.position = "absolute";
        self.setWidthHeight("-" + pos.y,"-" + pos.x ,null,null, windowWidth, (windowHeight - windowBarHeight), windowBarHeight,false);
        self.maximizeBtn.style.display = "none";
        self.unpinnedIcon.style.display = "none";
        self.pinnedIcon.style.display = "none";
        self.maximized = true;
    }
    
    this.unFocus = function()
    {
        self.container.style.zIndex = self.originalContainerZIndex;
    }

    this.focus = function()
    {
        self.container.style.zIndex = self.originalContainerZIndex + 1;
    }
    
    this.onCloseBtnClick = function (eventEl)
    {
       if (!eventEl)
          eventEl = window.event;

        self.inWhileClosed = true;
        self.contract(true);
        if(eventEl.stopPropagation)
            eventEl.stopPropagation();
        else   
            eventEl.cancelBubble = true;
    }
    
    this.mouseOverAd = function (eventEl)
    {
        if (!eventEl)
          eventEl = window.event;
          
	    var tg = eventEl.target;
	    
	    if (tg == self.mouseOverEl)
        {
            var pos = GetPosition(self.mouseOverEl); 

	        if ((eventEl.clientX >= pos.x) && (eventEl.clientY >= pos.y) && (eventEl.clientX <= (pos.x + self.mouseOverEl.clientWidth)) && (eventEl.clientY <= (pos.y + self.mouseOverEl.clientHeight)))
	        { 
                self.initiateOpenTimer();
            }
        }
    }
    
    this.leave = function (eventEl)
    {
                
       if (!eventEl)
          eventEl = window.event;

        var pos = GetPosition(self.mouseOverEl);
	    
	    if (((eventEl.clientX < pos.x) || (eventEl.clientY < pos.y) || (eventEl.clientX > (pos.x + self.mouseOverEl.clientWidth)) || (eventEl.clientY > (pos.y + self.mouseOverEl.clientHeight))) && !self.maximized)
	    {   
	        self.disableOpenTimer();
            window.status = "left";
            self.lastX = null;
            self.lastY = null;
            self.dragging = false;
            self.lastClickTime = null;
            
            if (!self.pinned)
                self.initiateCloseTimer();
            
            self.inWhileClosed = false;

            if(eventEl.stopPropagation)
                eventEl.stopPropagation();
             else
                eventEl.cancelBubble = true;
        }
    }

    this.setWidthHeight = function (overlayTop,overlayLeft,contentTop,contentLeft,width, height, topGap,tween)
    {
		if(tween){
			$(self.contentEl).animate({ 
				width: width + "px",
				height: height + "px",
				top: contentTop+ "px",
				left: contentLeft+ "px"
			}, 500 );	
			$(self.overlayEl).animate({ 
				width: width + "px",
				height: height + topGap + "px",
				top: overlayTop+ "px",
				left: overlayLeft+ "px"
			}, 500 );
		}else{
			self.contentEl.style.width = width + "px";
			self.contentEl.style.height = height + "px";
			self.overlayEl.style.width = width + "px";
			self.overlayEl.style.height = height + topGap + "px";
			self.overlayEl.style.top = overlayTop + "px";
			self.overlayEl.style.left = overlayLeft + "px";
		}
		
		self.wpfeControl.width = width + "px";
		self.wpfeControl.height = height + "px";
		var seadragonElement = self.wpfeControl.content.FindName(seadragonImageName);
		seadragonElement.width = width;
		seadragonElement.height = height;
    }

    this.onMouseWheel = function (eventEl)
    {
        var delta = 0;
       if (!eventEl)
          eventEl = window.event;

        var x, y; 
 
        if (self.wpfeControl.getBoundingClientRect) 
        { 
            var rect = self.wpfeControl.getBoundingClientRect(); 
            x = eventEl.clientX - rect.left;
            y = eventEl.clientY - rect.top;
        } 
        else if (document.getBoxObjectFor)
        { 
            var bo = document.getBoxObjectFor(self.wpfeControl); 
            x = (eventEl.clientX / 15);
            y = (eventEl.clientY / 15);
        }

        if (eventEl.wheelDelta) // IE / Opera
        {
            delta = eventEl.wheelDelta / 120;

            if (window.opera)
                    delta = -delta;        
        }
        else if (eventEl.detail)  // Mozilla
        {
            delta = -eventEl.detail / 3;
        }
		var seadragonElement = self.wpfeControl.content.FindName(seadragonImageName);
        var zoomFactor = 1.0;        
		if(0 < delta)
            zoomFactor = 1.14;
        else if(0 > delta)
            zoomFactor = 1/1.14;

		var _x = seadragonElement.ElementToLogicalX(x,y);
        var _y = seadragonElement.ElementToLogicalY(x,y);

        seadragonElement.ZoomAboutLogicalPoint(zoomFactor, _x, _y);
        if (eventEl.preventDefault)    
            eventEl.preventDefault();
        else
            eventEl.cancelBubble = true;
        return false;
    }
       
    this.pin = function ()
    {
       self.unpinnedIcon.style.display = "none";
       self.pinnedIcon.style.display = "inline";
       self.pinned = true;
    }

    this.unPin = function ()
    {
       self.pinnedIcon.style.display = "none";
       self.unpinnedIcon.style.display = "inline";
       self.pinned = false;
    }

    this.pan = function (x, styleValue) 
    {
		var sdImg = self.wpfeControl.FindName(self.seadragonImageName);
		sdImg.PanX = x;
		sdImg.PanY = styleValue;
		sdImg.Pan();
		return;
    }

    this.home = function ()
    {
       var seadragonElement = self.wpfeControl.content.FindName(seadragonImageName);
       seadragonElement.ViewportOrigin = "0,0";
       seadragonElement.ViewportWidth = 1.0;
	   seadragonElement = null;
    }
       
    //////////////////////////////////////////////////////// Pan ///////////////////////////////////////////////////////////////////
    this._x0 = null;
    this._y0 = null;
    this._x1 = null;
    this._y1 = null;
    this._dx = 0;
    this._dy = 0;
    this.lastX = null;
    this.lastY = null;
    this.dragging = false;
    this.lastClickTime = null;

    this.mouseDown = function (eventEl, eventArgs)
    {
		var seadragonElement = self.wpfeControl.content.FindName(seadragonImageName);
		if(self.maximized){
            window.status = "mouseDown";
            self.dragging = true;
	        self._x0 = seadragonElement.ElementToLogicalX(0,0);
			self._y0 = seadragonElement.ElementToLogicalY(0,0);
			var width = 0;
			var height = 0;
			width = parseInt(self.wpfeControl.width);
			height = parseInt(self.wpfeControl.height);
		    self._x1 = seadragonElement.ElementToLogicalX(width,height);
	        self._y1 = seadragonElement.ElementToLogicalY(width,height);
	        self._dx = 0;
	        self._dy = 0;
		}
        else if (!self.open)
        {
            self.expand(true);
        }
        else
        {    
            window.status = "mouseDown";
            self.dragging = true;
	        self._x0 = seadragonElement.ElementToLogicalX(0,0);
			self._y0 = seadragonElement.ElementToLogicalY(0,0);
	        self._x1 = seadragonElement.ElementToLogicalX(expandedWidth,expandedHeight);
	        self._y1 = seadragonElement.ElementToLogicalY(expandedWidth,expandedHeight);
	        self._dx = 0;
	        self._dy = 0;
        }
    }

    this.mouseUp = function (eventEl, eventArgs)
    {

        self.dragging = false;
        self.lastX = null;
        self.lastY = null;
        var now = new Date();
        // Determine if this is a double-click, because Jolt doesn't offer that event.
        var isDblClick = (self.lastClickTime && ((now - self.lastClickTime) < 400));
        if (isDblClick)
        {
            self.lastClickTime = null;
			
			self._x0 = null;
			self._y0 = null;
			self._x1 = null;
			self._y1 = null;

			self._dx = 0;
			self._dy = 0;
            
            if (self.maximized)
            {
                if (self.noExpand)
                    self.contract(true);
                else
                    self.expand(true);
            }
            else
                self.maximize();
        }
        else
            self.lastClickTime = now;

    }

    this.mouseMove = function (eventEl, eventArgs)
    {
		var seadragonElement = self.wpfeControl.content.FindName(seadragonImageName);
        self.initiateOpenTimer();
        self.disableCloseTimer();
        if (self.dragging)
        {
			var x = eventArgs.getPosition(null).x;//eventEl.clientX;
			var y = eventArgs.getPosition(null).y;//eventEl.y;//eventEl.clientY;

			var xLogical = seadragonElement.ElementToLogicalX(x,y);
			var yLogical = seadragonElement.ElementToLogicalY(x,y);

			if(null != self.lastX && null != self.lastY)
			{
				self._dx += 1.5*(xLogical - self.lastX);
				self._dy += 1.5*(yLogical - self.lastY);
				
				var width = self._x1 - self._x0;
				var height = self._y1 - self._y0;

				seadragonElement.ViewportOrigin = "" + (self._x0 - self._dx) + "," + (self._y0 - self._dy) ;
				seadragonElement.ViewportWidth = width;
			}
            
            self.lastX = xLogical;
            self.lastY = yLogical;
        }
		seadragonElement = null;
    }

    this.wpfControlName = self.containerId + "WpfControl";
	
    this.on_loaded = function ()
    {	
	    self.wpfeControl = document.getElementById(self.wpfControlName);
		self.root = self.wpfeControl.content.FindName("rootCanvas");
		self.setWidthHeight("0","0","0","0",contractedWidth, contractedHeight, 0,false);
		self.home();
        if (self.hideWhenContracted)
            self.overlayEl.style.display = "none";
        
        self.overlayEl.style.border = "solid " + windowBorderWidth + "px " + windowBorderColor;
        
        if (self.mouseOverEl.addEventListener){
            self.mouseOverEl.addEventListener('mouseover', self.mouseOverAd, false);
            self.mouseOverEl.addEventListener('mouseout', self.leave, false);
        }else{
            self.mouseOverEl.onmouseover = self.mouseOverAd;
            self.mouseOverEl.onmouseout = self.leave;
        }

		self.root.addEventListener("MouseLeftButtonDown",self.mouseDown);
        self.root.addEventListener("MouseLeftButtonUp",self.mouseUp);
		self.root.addEventListener("MouseMove",self.mouseMove);
		
		self.closeBtn.onclick = self.onCloseBtnClick;
		self.maximizeBtn.onclick = self.maximize;
		self.pinnedIcon.onclick = self.unPin;
		self.unpinnedIcon.onclick = self.pin;
	    
	    // Asp.Net Ajax Framework doesn't support mousewheel event, so register manually
        //$addHandler(self.contentEl, "mousewheel", self.onMouseWheel);
        if (self.contentEl.addEventListener)
            self.contentEl.addEventListener('DOMMouseScroll', self.onMouseWheel, false);
        else
            self.contentEl.onmousewheel = self.onMouseWheel;
    }

    // Create the wpfe ActiveX control.
    // Doing it this way avoids the user having to click on the 
    // ActiveX control before wpfe will receive input.
	
    new wpfeHost(
        self.contentContainerId, // hostElementID (HTML element to put wpfe 
                            // ActiveX control inside of -- usually a <div>)
        self.wpfControlName,     // ID of the wpfe ActiveX control we create
        self.contractedHeight,                // height
        self.contractedWidth,                // width
        "white",        // backgroundcolor
        null,               // SourceElement (name of script tag containing xaml)
        xamlFile,                  // IsWindowless
		false,
        "30",                // MaxFrameRate
        null,     // HACK: pseudo-loaded handler (method name -- no quotes)
        null                // OnError handler (method name -- no quotes)
    );
	

}


function getElementStyle(node, styleName) 
{
	var styleValue;
	if (node.currentStyle) 
	{
		styleValue = node.currentStyle[styleName];
	}
	else 
	{
	    // HACK
	    if (styleName == "zIndex")
	        styleName = "z-Index";
	        
		try 
		{
		    styleValue = document.defaultView.getComputedStyle(node, null).getPropertyValue(styleName);
	    } 
	    catch(e) { }
	}
	
	return styleValue;
}

function GetPosition(el)
{
    var pos = new Object();
    
    if (document.getBoxObjectFor)
    { 
        var bo = document.getBoxObjectFor(el); 
        pos.x = bo.x;
        pos.y = bo.y;
    } 
    else if (el.getBoundingClientRect) 
    { 
        var rect = el.getBoundingClientRect(); 
        pos.x = rect.left;
        pos.y = rect.top;
    }
    
    return pos;
}

var loaded = 0;
function OnLoaded(sender)
{
    loaded ++;
    if(loaded == SilverDragonObjects.length){
        for(var i=0; i<SilverDragonObjects.length; i++){
			SilverDragonObjects[i].on_loaded();
		}
    }
}

var SilverDragonObjects = new Array();
function loadSDImages()
{
    // This technique depends on the XML namespace prefix being "sd".
    // Would be better to us the equivilent of DomParser to evaulate an XPath query.
        
    var nodes = document.getElementsByTagName("sd:image");
    
    for (var i = 0; i < nodes.length; i++)
    {
        var node = nodes[i];
        var parent = node.parentNode;
        var title = (node.getAttribute("title") ? document.getElementById(node.getAttribute("title")) : null);
        
        var imageNodes = parent.getElementsByTagName("img");
        for (var j = 0; j < imageNodes.length; j++)
        {
            if (!title)
                title = imageNodes[j].getAttribute("alt");
                    
            imageNodes[j].style.display = "none";
        }

        imageNodes = null;
        var mouseOverRegion = (node.getAttribute("mouseoverregionid") ? document.getElementById(node.getAttribute("mouseoverregionid")) : null);
        var hideWhenContracted = ((node.getAttribute("hidewhencontracted") == "true") ? true : false);
        var noExpand = ((node.getAttribute("noexpand") == "true") ? true : false);
        var minimizeDelay = node.getAttribute("minimizedelay");
        var expandDelay = node.getAttribute("expanddelay");
        
        minimizeDelay = minimizeDelay ? parseInt(minimizeDelay) : 0;
        expandDelay = expandDelay ? parseInt(expandDelay) : 0;
        SilverDragonObjects[i] = new SilverDragonObject(parent, node.getAttribute("xaml"),  parseInt(node.getAttribute("contractedwidth")), parseInt(node.getAttribute("contractedheight")), parseInt(node.getAttribute("expandedwidth")), parseInt(node.getAttribute("expandedheight")), node.getAttribute("pin"), mouseOverRegion, hideWhenContracted, node.getAttribute("seadragonimagename"), minimizeDelay, expandDelay, title, node.getAttribute("href"), noExpand);

        node = null;
        parent = null;
    }

    nodes = null;
} 

// Only load SilverDragon if browser supports it.
if ((navigator.appVersion.indexOf('MSIE') != -1) ||
    (window.GeckoActiveXObject && navigator.userAgent.indexOf('Windows') != -1) ||
    (navigator.userAgent.indexOf("Macintosh") && (navigator.userAgent.indexOf("Firefox/1.5.0.8") != -1 || navigator.userAgent.indexOf("Safari") != -1 || navigator.userAgent.indexOf("WebKit") != -1)))
    loadSDImages();