/****************************************
* Member Object                         *
****************************************/
function Product() {
    this.itemNumber = '';
    this.imageURL = '';
    this.description = '';
    this.price= '';
}

//Creates a new Member object from XML
Product.fromXML = function(xml) {
    var val = new Product();
    val.itemNumber = getProperty(xml, "I");
    val.imageURL = getProperty(xml, "Img");
    val.description = getProperty(xml, "D");
    val.price = getProperty(xml, "P");
    return val;
}

function searchProducts(txtSearch) {
    var req = new HTTPRequest("/js/webfunctions/searchProducts.aspx?search=" + $get(txtSearch).value, displayProducts);
    req.request.requestID = Math.floor(Math.random() * 1000000);
    ProductsDropDown.requestID = req.request.requestID;
    req.send();
}

/**************************************************************************************************
* Class:       DropwDown                                                                          *
* Description: 
**************************************************************************************************/
function DropDown(textElement, dropDownElement, renderItem, onItemSelected) {
    //*** Private Variables ***
    var _txt = textElement;    //The element that serves as the control to accept user input through the keyboard.
    var _dd = dropDownElement; //The element that serves as the DropDown.
    var _ul = _dd.getElementsByTagName("ul")[0]; //The ul that will contain the data in the drop down list.
    var _itemSelected = onItemSelected;         //The function that fires when an item is clicked or selected
    var _items = [];
    var _id = -1;

    //*** Properties ***
    this.ul = _ul;
    this.items = _items;

    //*** Register the drop down with the document so we can have a global reference to handle some of the events ***
    if (document.dropDowns == undefined)
        document.dropDowns = [];

    document.dropDowns[document.dropDowns.length] = this;
    _id = document.dropDowns.length - 1;

    this.clear = function() {
        _items.length = 0;
        _ul.innerHTML = '';
    }

    this.clearText = function() { _txt.value = ''; }

    this.allowHide = function allowHide(h) { _dd.allowhide = h; }

    this.hide = function(forceHide) {
        if (_dd.allowhide == undefined || _dd.allowhide || forceHide)
            _dd.style.display = 'none';
    }

    this.itemClicked = function(index) {
        this.hide(true);
        _itemSelected(index);
    }

    this.show = function() {
        if (_ul.hasChildNodes())
            _dd.style.display = 'block';
        else
            _dd.style.display = 'none';
    }

    this.addItem = function(item) {
        var i = renderItem(this, item);
        _items[_items.length] = item;
        i.onclick = function() { document.dropDowns[_id].itemClicked(_items.length - 1) };
    }

    this.addItems = function(items) {
        if (items instanceof Array) {
            var i;

            this.clear();

            for (var i = 0; i < items.length; i++)
                this.addItem(items[i]);

            this.show();
        } else
            throw 'items must be an array.';
    }

    //Init
    _dd.onmouseout = function() { document.dropDowns[_id].allowHide(true); }
    _dd.onmouseover = function() { document.dropDowns[_id].allowHide(false); };
    _txt.onfocus = function() { document.dropDowns[_id].show(); };
    _txt.onblur = function() { document.dropDowns[_id].hide(false); };
}


ProductsDropDown = {
    displayImage: function(url) {
        var img = $get('imgProductsDropDownImage');
        img.src = url;
    },
    renderItem: function(sender, product) {
        var html = '';
        product.li = document.createElement('li');
        product.li.id = 'rSearchProducts_item_' + sender.items.length;

        html += '<div class="buyLink"><a href="javascript:AddToCart(\'' + product.itemNumber + '\', 1, \'' + product.li.id.substring(1) + '\',0,0);">Buy</a></div><div class="desc">' + product.description + '</div><div class="price">' + product.price + '</div>';

        product.li.innerHTML = html;

        product.li.onmouseover = function() { ProductsDropDown.displayImage(product.imageURL); }
        sender.ul.appendChild(product.li);

        return product.li;
    },
    selectProduct: function(index) {
        var product = document.ddSearchProducts.items[index];


        document.ddSearchProducts.clearText();
        document.ddSearchProducts.clear();
    }
}

function displayProducts(req) {
    if (req.requestID == ProductsDropDown.requestID) {
        var users = req.responseXML.getElementsByTagName("Product");
        var products = [];

        for (var i = 0; i < users.length; i++)
            products[products.length] = Product.fromXML(users[i]);

        document.ddSearchProducts.addItems(products);
    }

}