LiveSearch = function(element)
{
    LiveSearch.initializeBase(this, [element]);
    
    this._textBox = null;
    this._boxWidth = null;
    this._boxHeight = null;
    this._titleBackgroundUrl = null;
    
    this._clickHandler = null;
    
    this._searchDiv = null;
    
    this._boxShown = false;
}

LiveSearch.prototype =
{
    initialize : function()
    {
        LiveSearch.callBaseMethod(this, 'initialize');
        
        // Bind onclick to search button
        this._clickHandler = Function.createDelegate(this, this._onClick);
        $addHandler(this.get_element(), 'click', this._clickHandler);

        // Should handle any layout changes so we can correct position of box
        this._layoutChangeHandler = Function.createDelegate(this, this._onLayout);
        $addHandler(window, 'resize', this._layoutChangeHandler);

        // Build search box
        this._createDiv();
    },

    dispose : function()
    {
        LiveSearch.callBaseMethod(this, 'dispose');
    },
    
    _onLayout : function()
    {
        if (this._searchDiv == null)
            return;
            
        // Get bounds of textbox control
        var bounds = Sys.UI.DomElement.getBounds(this._textBox);
        
        // Set properties
        this._searchDiv.style.top = bounds.y + (bounds.height) + "px";
        this._searchDiv.style.left = bounds.x - (this._boxWidth - bounds.width) + "px";
    },
    
    _createDiv : function()
    {
        var e = this.get_element();
        
        this._searchDiv = document.createElement("div");
        
        this._searchDiv.id = this.get_id() + "_searchDiv";
        this._searchDiv.style.width = this._boxWidth + "px";
        this._searchDiv.style.height = this._boxHeight + "px";
        this._searchDiv.style.position = "absolute";
        this._searchDiv.style.display = "none";
        this._searchDiv.style.border = "solid black 1px";
        this._searchDiv.style.backgroundColor = "#FFFFFF";
        
        // Title Bar
        var titleBar = document.createElement("div");

        titleBar.id = this.get_id() + "_searchDiv_titleBar";
        titleBar.style.width = "100%";
        titleBar.style.height = "25px";
        titleBar.style.backgroundImage = "url(" + this._titleBackgroundUrl + ")";
        titleBar.style.backgroundRepeat = "repeat-x";
        titleBar.style.verticalAlign = "middle";
        
        // Title
        var title = document.createElement("div");
        title.id = this.get_id() + "_searchDiv_titleBar_title";
        title.style.styleFloat = "left";
        title.style.cssFloat = "left";
        title.style.width = this._boxWidth - 100 + "px";
        title.style.paddingLeft = "5px";
        title.style.paddingTop = "4px";
        title.style.color = "#FFFFFF";
        title.innerHTML = "<table style=\"border-collapse:collapse\"><tr><td><img src=\"/images/miicon16.png\" /></td><td style=\"vertical-allign:middle\"> Search Results</td></tr></table>";
        
        // Close Icon
        var closeIcon = document.createElement("div");
        closeIcon.id = this.get_id() + "_searchDiv_titleBar_close";

        closeIcon.style.styleFloat = "right";
        closeIcon.style.cssFloat = "right";
        closeIcon.style.textAlign = "right";
        closeIcon.style.paddingTop = "3px";
        closeIcon.style.paddingRight = "2px";
        
        var closeImg = document.createElement("img");
        closeImg.alt = "Close search dialog.";
        closeImg.src = "/images/close.gif";
        closeImg.style.cursor = "pointer";
        
        var closeClick = Function.createDelegate(this, function() { this._controlSearchDiv(false); });
        $addHandler(closeImg, 'click', closeClick);
        
        closeIcon.appendChild(closeImg);
        
        
        titleBar.appendChild(title);
        titleBar.appendChild(closeIcon);
        
        // Result count
        var resultCount = document.createElement("div");
        resultCount.id = this.get_id() + "_searchDiv_resultCount";
        resultCount.style.height = "20px";
        resultCount.style.paddingTop = "3px";
        resultCount.style.paddingLeft = "7px";
        
        
        // Result Box
        var resultBox = document.createElement("div");
        resultBox.id = this.get_id() + "_searchDiv_resultBox";
        resultBox.style.height = this._boxHeight - 80 + "px";
        resultBox.style.overflow = "auto";
        resultBox.style.paddingTop = "5px";
        resultBox.style.paddingLeft = "2px";
        
        // Page Box
        var pageBox = document.createElement("div");
        pageBox.id = this.get_id() + "_searchDiv_pageBox";
        pageBox.style.height = "30px";
        
        // MI Logo
        var miLogo = document.createElement("div");
        miLogo.id = this.get_id() + "_searchDiv_titleBar_pageBox_miLogo";
        miLogo.style.styleFloat = "left";
        miLogo.style.cssFloat = "left";
        miLogo.style.width = "80%";
        miLogo.style.paddingTop = "2px";
        miLogo.style.paddingLeft = "4px";
        
        var nextDiv = document.createElement("div");
        nextDiv.id = this.get_id() + "_searchDiv_titleBar_pageBox_nextDiv";
        nextDiv.style.styleFloat = "right";
        nextDiv.style.cssFloat = "right";
        nextDiv.style.textAlign = "right";
        
        pageBox.appendChild(miLogo);
        pageBox.appendChild(nextDiv);
        
        this._searchDiv.appendChild(titleBar);
        this._searchDiv.appendChild(resultCount);
        this._searchDiv.appendChild(resultBox);
        this._searchDiv.appendChild(pageBox);
        e.parentNode.appendChild(this._searchDiv);
    },
    
    _onClick : function(e)
    {
        e.preventDefault();
        
        // Display the search dialog
        this._controlSearchDiv(true);
        
        // Perform search
        this._performSearch(0);
    },
    
    _performSearch : function(offset)
    {
        var results = $get(this.get_id() + "_searchDiv_resultBox");
        results.innerHTML = "<div style=\"margin-left:"+(this._boxWidth - 8)/2+"; margin-top:"+(this._boxHeight-33)/2+";\"><img src=\"/images/processing_small.gif\" /></div>";
        
        // Query web service
        var searchComplete = Function.createDelegate(this, this._onSearchComplete);
        LiveSearchService.PerformSearch(this._textBox.value, offset, searchComplete);
    },
    
    _onSearchComplete : function(result)
    {
        var resultBox = $get(this.get_id() + "_searchDiv_resultBox");
        var resultCount = $get(this.get_id() + "_searchDiv_resultCount");
        var pageBox = $get(this.get_id() + "_searchDiv_pageBox");
        
        resultCount.style.borderBottom = "solid black 1px";
        pageBox.style.borderTop = "solid black 1px";
        
        resultCount.innerHTML = result[0];
        resultBox.innerHTML = result[1];
        
        if (result[2] == "0")
            return;
            
        // Create image
        var nextImg = document.createElement("img");
        nextImg.alt = "Next Page";
        nextImg.src = "/images/search_next.jpg";
        nextImg.style.cursor = "pointer";
        nextImg.style.paddingTop = "2px";
        nextImg.style.paddingRight = "4px";
               
        // Bind search method to handler
        var nextClick = Function.createDelegate(this, function() { this._performSearch(result[2]); });
        $addHandler(nextImg, 'click', nextClick);
        
        var nextDiv = $get(this.get_id() + "_searchDiv_titleBar_pageBox_nextDiv");
        
        // Remove all child nodes first
        if (nextDiv.hasChildNodes())
        {
            while (nextDiv.childNodes.length >= 1)
            {
                nextDiv.removeChild(nextDiv.firstChild);       
            } 
        }
        
        nextDiv.appendChild(nextImg);
    },
    
    _controlSearchDiv : function(status)
    {
        if (status)
            this._showDiv();
        else
            this._hideDiv();
    },
    
    _showDiv : function()
    {
        if (this._boxShown == true && this._searchDiv != null)
            return;
        if (this._searchDiv == null)
            this._createDiv();
            
        // Get bounds of textbox control
        var bounds = Sys.UI.DomElement.getBounds(this._textBox);
        
        // Set properties
        this._searchDiv.style.top = bounds.y + (bounds.height) + "px";
        this._searchDiv.style.left = bounds.x - (this._boxWidth - bounds.width) + "px";
        
        this._searchDiv.style.display = "block";
        
        this._boxShown = true;
    },
    
    _hideDiv : function()
    {
        if (this._searchDiv == null || this._boxShown == false)
            return;
        
        this._boxShown = false;
        this._searchDiv.style.display = "none";
    },
    
    _parseResults : function (results)
    {
    },

    get_textBox : function()
    {
        return this._textBox;
    },

    set_textBox : function(value)
    {
        this._textBox = value;
        this.raisePropertyChanged('textBox');
    },
    
    get_boxWidth : function()
    {
        return this._boxWidth;
    },

    set_boxWidth : function(value)
    {
        this._boxWidth = value;
        this.raisePropertyChanged('boxWidth');
    },
    
    get_boxHeight : function()
    {
        return this._boxHeight;
    },

    set_boxHeight : function(value)
    {
        this._boxHeight = value;
        this.raisePropertyChanged('boxHeight');
    },
    
    get_titleBackgroundUrl : function()
    {
        return this._titleBackgroundUrl;
    },

    set_titleBackgroundUrl : function(value)
    {
        this._titleBackgroundUrl = value;
        this.raisePropertyChanged('titleBackgroundUrl');
    }
}

LiveSearch.registerClass('LiveSearch', Sys.UI.Behavior);