function Configurator()
{
    this.Container = document.getElementById('configuratorContainer'); //container for html
    this.Categories = null; //this is inside the Container and is where the first level of dropdowns go
    this.Attributes = null; //again inside the Container, holds the attribute dropdowns
    this.Results = null; //holds results table, actually only 1 row
    this.NumCombinations = null; //shows how many products/combinations are possible from the selections
    
    this.Temp1 = null;
    this.Temp2 = null;
    this.Temp3 = null;
    this.Temp4 = null;
    this.Temp5 = null;
}

Configurator.prototype.Init = function()
{
    //first of all we should load the outline html
    var structure = Eledis.ProductConfigurator.Business.Configurator.GetStructure().value; //should this be a callback?
    
    //inject html and find main containers    method=\"POST\"
    this.Container.innerHTML = "<form action=\"http://www.eledis.co.uk/jkcm/default.aspx\" ><input type=\"hidden\" name=\"pg\" id=\"pg\" value=\"2389\"/>"+structure+"</form>";    
    this.Categories = document.getElementById('epc_categories');
    this.Attributes = document.getElementById('epc_attributes');
    this.Results = document.getElementById('epc_results');
    this.NumCombinations = document.getElementById('epc_numCombinations');
    this.NotesBlock = document.getElementById('Notes');
    
    //hide the combinations 
    this.NumCombinations.style.display = 'none';
    
    //add the first category to get us started
    this.AddCategory('Style', true, '', '');
    
    window.status = 'Product Configurator initialised ok';
}

Configurator.prototype.AddCategory = function(category, withLoading, param1, param2)
{
    //first lets stick a loading notification into the end of the categories container
    if (withLoading)
        this.Categories.appendChild(this.BuildLoadingDropdown('loading_' + category));
    
    //create a new block for our drop down list
    this.Temp4 = document.createElement('div');
    this.Temp4.setAttribute('id', 'div_category_' + category);
    this.Temp4.style.display = 'none';
    
    //insert some elements generated by the server (more efficient than using the DOM to build elements on the fly)
    //myCategory.innerHTML = Eledis.ProductConfigurator.Business.Configurator.GetCategoryLabel(category).value;
    this.Temp1 = category;
    this.Temp2 = withLoading;
    this.Temp3 = param1;
    this.Temp5 = param2;
    
    Eledis.ProductConfigurator.Business.Configurator.GetCategoryLabel(category, this.AddCategory2.bind(this));
}

Configurator.prototype.AddCategory2 = function(res)
{
    //used as a callback for an AJAX request in AddCategory
    this.Temp4.innerHTML = res.value;
    Eledis.ProductConfigurator.Business.Configurator.GetCategory(this.Temp1, this.Temp3, this.Temp5, this.AddCategory3.bind(this));
}

Configurator.prototype.AddCategory3 = function(res)
{
    //used as a callback for an AJAX request in AddCategory
    //alert(res.value);
    this.Temp4.innerHTML += res.value;
    
    //append block to the main categories container
    this.Categories.appendChild(this.Temp4);
    
    //remove the loading notification if necessary
    if (this.Temp2)
        this.Categories.removeChild(document.getElementById('loading_' + this.Temp1));
        
    //make category visible
    this.Temp4.style.display = 'block';
    
    var styleList = document.getElementById('category_Style');
    var typeList = document.getElementById('category_Type');
    
    switch (this.Temp1)
    {
        case 'Style':
            this.FinishStyleList();
        break;
        case 'Type':
            Eledis.ProductConfigurator.Business.Configurator.GetDescription(styleList.options[styleList.selectedIndex].value, this.ShowNotes_callback.bind(this));
            this.FinishTypeList();
        break;
        case 'Series':
            // If this list contains only one option the description disappears (blinks). Solution required
            /* The solution is to pass the Type ID rather than the description to the GetResults function because it uses the 
             * jkcm_product table.*/
            Eledis.ProductConfigurator.Business.Configurator.GetProdDescription(typeList.options[typeList.selectedIndex].value, '', this.ShowNotes_callback.bind(this));
            Eledis.ProductConfigurator.Business.Configurator.GetResults(typeList.options[typeList.selectedIndex].value, '', this.ShowResults_callback.bind(this));
            this.FinishSeriesList();
        break;
    }
}

Configurator.prototype.FinishStyleList = function()
{
    var styleList = document.getElementById('category_Style');
    
    //add some code for the onchange event for the style list
    styleList.onchange = function()
    {
        //reset the whole damn thing first
        myConfigurator.Reset(1);
        
        if (!(this[this.selectedIndex].innerText == 'Please Select'))
        {
            myConfigurator.AddCategory('Type', true, this[this.selectedIndex].value, '');
        }
    }
}

Configurator.prototype.FinishTypeList = function()
{
    var typeList = document.getElementById('category_Type');
            
    //add some code for the onchange event for the type list
    typeList.onchange = function()
    {
        //reset to level 2
        myConfigurator.Reset(2);
        
        if (!(this[this.selectedIndex].innerText == 'Please Select'))
        {
            var categoryList = document.getElementById('category_Style');
            myConfigurator.AddCategory('Series', true, this[this.selectedIndex].innerHTML, categoryList[categoryList.selectedIndex].value);
        }
    }
}

Configurator.prototype.FinishSeriesList = function()
{
    var seriesList = document.getElementById('category_Series');
    
      // Check if it contains only one option the auto select and load attributes
    if(seriesList.options.length==1)
    {
        myConfigurator.LoadAttributes(seriesList.options[0].value, '');
    }    
        
    //add some code for the onchange event for the series list
    seriesList.onchange = function()
    {
        //reset to level 2
        myConfigurator.Reset(3);
        
        if (!(this[this.selectedIndex].innerText == 'Please Select'))
        {
            myConfigurator.LoadAttributes(this[this.selectedIndex].value, '');
        }
    }
}

Configurator.prototype.BuildLoadingDropdown = function(targetId)
{
    var loading = document.createElement('span');    
    
    loading.setAttribute('id', targetId);
    loading.setAttribute('class', 'epc_loadingDropdown');
    
    var loadingText = document.createTextNode('LOADING');
    
    loading.appendChild(loadingText);
    
    return loading;
}

Configurator.prototype.Reset = function(level)
{
    var seriesList;
    switch (level)
    {
        case 1:
            //reset everything apart from the first (style) list
            //this.Results.innerHTML = '';
            this.Attributes.innerHTML = '';
            this.NumCombinations.style.display = 'none';
            
            var typeList = document.getElementById('div_category_Type');
            seriesList = document.getElementById('div_category_Series');
            
            if (typeList)
                this.Categories.removeChild(typeList);
            if (seriesList)
                this.Categories.removeChild(seriesList);
        break;
        case 2:
            //reset everything apart from first 2 lists
            //this.Results.innerHTML = '';
            this.Attributes.innerHTML = '';
            this.NumCombinations.style.display = 'none';
            
            seriesList = document.getElementById('div_category_Series');
            
            if (seriesList)
                this.Categories.removeChild(seriesList);
        break;
        case 3:
            //reset everything apart from first 3 lists
            //this.Results.innerHTML = '';
            this.Attributes.innerHTML = '';
            this.NumCombinations.style.display = 'none';
        break;
    }
}

Configurator.prototype.LoadAttributes = function(productId, selections)
{
    this.Attributes.innerHTML = '<span class="epc_loadingAttributes">LOADING</span>';
    Eledis.ProductConfigurator.Business.Configurator.GetAttributes(productId, selections, this.LoadAttributes_callback.bind(this));
    
    this.LoadCombinationsValue(productId, selections);
    this.ShowResults(productId, selections);
}

Configurator.prototype.LoadAttributes_callback = function(res)
{
    //todo - add actions to each drop down so we can recalculate number of possible products and update result panel
    this.Attributes.innerHTML = res.value;
    
    var listPtr, listMax, lists = this.Attributes.getElementsByTagName('select')
    listMax = lists.length;
    
    for (listPtr = 0; listPtr < listMax; listPtr++)
    {
        //alert(lists[listPtr].id);
        lists[listPtr].onchange = function()
        {
            myConfigurator.ReloadAttributes();
        }
    }
}

Configurator.prototype.ReloadAttributes = function()
{
    //need to grab the productId from the last category list
    var selections, listPtr, listMax, lists = this.Attributes.getElementsByTagName('select')
    listMax = lists.length;
    
    selections = '';
    
    for (listPtr = 0; listPtr < listMax; listPtr++)
    {
        //alert(lists[listPtr].id + '¬' + lists[listPtr][lists[listPtr].selectedIndex].innerText);
        selections += lists[listPtr].id + '=' + lists[listPtr][lists[listPtr].selectedIndex].innerText + '=' + 
                        lists[listPtr][lists[listPtr].selectedIndex].value + '\n';
    }
    
    //alert(selections);
    var seriesList = document.getElementById('category_Series'); //for productId
    
    this.LoadAttributes(seriesList[seriesList.selectedIndex].value, selections);
}

Configurator.prototype.LoadCombinationsValue = function(productId, selections)
{
    Eledis.ProductConfigurator.Business.Configurator.GetProductCombinations(productId, selections, this.LoadCombinationsValue_callback.bind(this));
}

Configurator.prototype.LoadCombinationsValue_callback = function(res)
{
    document.getElementById('epc_numCombinations_value').innerHTML = res.value;
    //this.NumCombinations.style.display = 'block';
}

Configurator.prototype.ShowResults = function(productId, selections)
{
    Eledis.ProductConfigurator.Business.Configurator.GetResults(productId, selections, this.ShowResults_callback.bind(this));
}

Configurator.prototype.ShowResults_callback = function(res)
{
    // If no content keep the previous
    if (res.value)
    {
        this.Results.innerHTML = res.value;
        //add the description in, built from the 3 category lists
        var description = document.getElementById('epc_resultsDescription');
        if(description) // Added by Eihab because this could be null when displaying descriptions and not attributes
        {
            var styleList = document.getElementById('category_Style'); //for category 1
            var typeList = document.getElementById('category_Type'); //for category 2
            var seriesList = document.getElementById('category_Series'); //for category 3
            
            //description.innerHTML = styleList[seriesList.selectedIndex].innerHTML;
            //description.innerHTML += '&nbsp;' + typeList[seriesList.selectedIndex].innerHTML;
            //description.innerHTML += '&nbsp;' + seriesList[seriesList.selectedIndex].innerHTML;
            
            // Above changed by Kevin 30 Nov 2007 - it was showing the incorrect text
            description.innerHTML = styleList[styleList.selectedIndex].innerHTML;
            description.innerHTML += '&nbsp;' + typeList[typeList.selectedIndex].innerHTML;
            description.innerHTML += '&nbsp;' + seriesList[seriesList.selectedIndex].innerHTML;
        }
    }
}

Configurator.prototype.ShowNotes_callback = function(res)
{
    // If no content keep the previous
    if (res.value)
    {
        this.NotesBlock.innerHTML = res.value;
    }
}