function Colour ( id, description) {
   this.id = id;
   this.description = description;
}


function showData()
{
    document.getElementById('size').selectedIndex = 0;
    showColoursForSize();    
    
    hideWaiting();
}

function showDataBundle()
{
    document.getElementById('size1').selectedIndex = 0;
    showColoursForSizeBundle( 'size1' );

    document.getElementById('size2').selectedIndex = 0;
    showColoursForSizeBundle( 'size2' );

    hideWaiting();
}

function hideWaiting()
{
    var waitSection = document.getElementById('waitsection');
    var buySection = document.getElementById('buysection');
    
    if( buySection != null )
    {
        buySection.style.visibility = 'visible';
    }
    
    if( waitSection != null )
    {
        waitSection.style.visibility = 'hidden';
    }        
}

function showColoursForSize()
{
    var sizeDropDown = document.getElementById('size');
    var colourDropDown = document.getElementById('colour');
    var sizeDesc = document.getElementById('ADDITIONALINFO2');
    var colourDesc = document.getElementById('ADDITIONALINFO');

    showColoursForSizeImpl( sizeDropDown, colourDropDown, sizeDesc, colourDesc );
}

function showColoursForSizeBundle( sizeDropDownId )
{
    var sizeDropDown = document.getElementById(sizeDropDownId);

    showColoursForSizeImpl( sizeDropDown, colourDropDownForSize( sizeDropDown ),
        sizeDescForSize( sizeDropDown ), colourDescForSize( sizeDropDown ) );
}

function showColoursForSizeImpl( sizeDropDown, colourDropDown, sizeDesc, colourDesc )
{
    var colourOptions = colourDropDown.options;
    var colours = coloursForSize( sizeDropDown );

    var lastSelectedColour;
    
    // Save chosen size description into ADDITIONALINFO2 or wherever
    sizeDesc.value = sizeDropDown.options[sizeDropDown.selectedIndex].text;
    
    // Save customer's chosen colour
    if ( colourDropDown.selectedIndex >= 0 )
        lastSelectedColour = colourOptions[colourDropDown.selectedIndex].text;
    else
        lastSelectedColour = "";

    // Clear all colours
    colourOptions.length = 0;
    colourDropDown.selectedIndex = -1;
    
    // Set to first colour in list. If lastSelectedColour or Chestnut are available,
    // defaultColour will be set to their index. lastSelected takes priority over
    // Chestnut
    var defaultColour = 0; 
    
    if (colours != null)
    {
        for (var i=0;i<colours.length;i++)
        {
           try {
              var newOpt = new Option(colours[i].description, colours[i].id);
              colourOptions[i] = newOpt;
    
              if ( newOpt.text == lastSelectedColour )
                  defaultColour = i;
              
              if ( (newOpt.text == "Chestnut") && (defaultColour == 0) )
                  defaultColour = i;
           }
           catch(ex) {
           }
        }
   
        // Highlight user's last selected colour. If none, highlight Chestnut.
        // If Chestnut is not on the list, highlight first colour
        colourDropDown.selectedIndex = defaultColour;

        // And write the defaulted colour into ADDITIONALINFO straight away.
        // The user can select a different colour if they wish
        colourDesc.value =
            colourDropDown.options[colourDropDown.selectedIndex].text;
    }
}

function colourClick()
{
    colourClickBundle( 'colour', 'ADDITIONALINFO' );
}

function colourClickBundle( colourDropDownId, colourDescId )
{
    var colourDropDown = document.getElementById(colourDropDownId);
    
    if ( colourDropDown.selectedIndex >= 0 )
    {
        document.getElementById( colourDescId ).value =
        colourDropDown.options[colourDropDown.selectedIndex].text;
    }
}

function coloursForSize( sizeDropDown )
{
    var sizeID = sizeDropDown.options[sizeDropDown.selectedIndex].value;

    if ( sizeDropDown == document.getElementById('size') )
        return sizeToColours[ sizeID ];
    else if ( sizeDropDown == document.getElementById('size1') )
        return sizeToColours1[ sizeID ];
    else if ( sizeDropDown == document.getElementById('size2') )
        return sizeToColours2[ sizeID ];
    else
        return null;
}

// These three ...ForSize functions are only used on bundle pages
function colourDropDownForSize( sizeElem )
{
    if ( sizeElem == document.getElementById('size1') )
        return document.getElementById('colour1');
    else
        return document.getElementById('colour2');
}

function sizeDescForSize( sizeElem )
{
    if ( sizeElem == document.getElementById('size1') )
        return document.getElementById('ADDITIONALINFO2');
    else
        return document.getElementById('ADDITIONALINFO4');
}

function colourDescForSize( sizeElem )
{
    if ( sizeElem == document.getElementById('size1') )
        return document.getElementById('ADDITIONALINFO');
    else
        return document.getElementById('ADDITIONALINFO3');
}