function componentClicked(componentTypeId, componentTypeDescription, componentId)
{
    var selectedComponentPrice;
    var selectedComponentType;
    
    var placeHolderPrefix = "ctl00_MainContentPlaceHolder_";
    
    // componentId == -1 denotes that this is a "None" button
    if (componentId == -1)
    {
        selectedComponentPrice  = 0;
        selectedComponentType   = componentTypeDescription;
    }
    else
    {
        selectedComponentPrice  = Items[componentId].Price;
        selectedComponentType   = Items[componentId].ComponentType;
    }
    
    
    var defaultPriceElementId = placeHolderPrefix + componentTypeId + "_" + selectedComponentType + "_default";
    var defaultPrice = document.getElementById(defaultPriceElementId).value;
    
    var totalPriceElementId = placeHolderPrefix + "totalPriceField";
    var totalPrice = eval(document.getElementById(totalPriceElementId).value);
    totalPrice += (selectedComponentPrice - defaultPrice);
    document.getElementById(totalPriceElementId).value = totalPrice;
    document.getElementById(defaultPriceElementId).value = selectedComponentPrice;
    
    // update the Html text
    var priceTopElementId = "priceTop";
    var priceBoxElementId = "priceBoxText";
    document.getElementById(priceTopElementId).innerHTML = FormatCurrency(totalPrice);
    document.getElementById(priceBoxElementId).innerHTML = FormatCurrency(totalPrice);
    
    // go through each radio button for this componentType
    var i = 0;
    while( true )
    {
        var radioElementId = placeHolderPrefix + componentTypeId + "_" + selectedComponentType + "_" + i;
        var radioElement = document.getElementById(radioElementId);

        if (radioElement == null)
        {
            // we have exhausted all the radio buttons for this componentType
            break;
        }
        
        var currentComponentId = radioElement.value;
        var spanElementId = componentTypeId + "_" + currentComponentId + "_span";
        var spanElement = document.getElementById(spanElementId);
        if (spanElement == null)
        {
            // should NOT come here
            break;
        }
        
        // update the price text for this radio button
        if (radioElement.checked == 1)
        {
            var imageElementId = placeHolderPrefix + componentTypeId + "_" + selectedComponentType + "_Image";
            var imageElement = document.getElementById(imageElementId);
            if (imageElement == null)
            {
                // should NOT come here
                break;
            }
            
            // output nothing if this is a "None" button
            if (currentComponentId == -1)
            {
                spanElement.innerHTML = "";
                imageElement.src = "images/blank.gif";
            }
            else
            {
                spanElement.innerHTML = " [included in price]";
                imageElement.src = "images/items/" + Items[currentComponentId].ImageUrl;
            }
        }
        else
        {
            var priceDiff;
            if (currentComponentId == -1)
            {
                priceDiff = 0 - selectedComponentPrice;
            }
            else
            {
                priceDiff = Items[currentComponentId].Price - selectedComponentPrice;
            }
            
            var strPrice = FormatCurrency(priceDiff);
            if (priceDiff < 0)
            {
                spanElement.innerHTML = " [subtract " + strPrice + "]";
            }
            else
            {
                spanElement.innerHTML = " [add " + strPrice + "]";
            }
        }
        i++;   
    }
    
    //ComponentBehavior();
    // now handle component behavior
    if (Items[componentId].ComponentBehaviorArray != null)
    {
        //alert("Item count = " + Items[componentId].ComponentBehaviorArray.length);
        for ( var i = 0; i < Items[componentId].ComponentBehaviorArray.length; i++ )
        {
            var currentBehaviorItem = Items[componentId].ComponentBehaviorArray[i];
            //alert(currentBehaviorItem.AffectedComponentId + ", " + currentBehaviorItem.AffectedComponentType + ", " + currentBehaviorItem.AffectedComponentTypeId);
            
            // first we need to figure out which radio button this behavior applies to
            // we need to iterate through each items in the affected component type
            var j = 0;
            var selectNextAvailableItem = false;
            var looped = false;
            while (true)
            {
                var affectedElementId = placeHolderPrefix + currentBehaviorItem.AffectedComponentTypeId + "_" + currentBehaviorItem.AffectedComponentType + "_" + j;
                var affectedElement = document.getElementById(affectedElementId);
                
                if (affectedElement == null)
                {
                    // we have exhausted the list
                    if (selectNextAvailableItem == true && looped == false)
                    {
                        // we need to select a next available item
                        // but we did not find any
                        // loop back to first element
                        
                        // ANTI-INFINITE-LOOP PREVENTION
                        // we are setting looped to be true 
                        // so that we will not be stuck in infinite loop
                        looped = true;
                        j = 0;
                        continue;
                    }
                    else
                    // somehow we missed the affected item
                    // SHOULD NOT HAPPEN
                    break;
                }
                else if (selectNextAvailableItem == true)
                {
                    // we are currently in a loop to find next available item
                    if (affectedElement.disabled == false)
                    {
                        // ok we found one, select this
                        affectedElement.checked = true;
                        //alert("found next available item" + affectedElement.value);
                        // now we need to handle componentClieked event for this item
                        var affectedItem = Items[affectedElement.value];
                        //alert(affectedItem.ComponentTypeId + ", " + affectedItem.ComponentType + ", " + affectedItem.ComponentId);
                        componentClicked(affectedItem.ComponentTypeId, affectedItem.ComponentType, affectedItem.ComponentId);
                        break;
                    }
                }
                else
                {
                    // we are currently trying to locate the target item
                    if (affectedElement.value == currentBehaviorItem.AffectedComponentId)
                    {
                        // we have found the target item
                        //alert("found the item");
                        
                        switch (currentBehaviorItem.Behavior)
                        {
                        // this means to disable this item
                        case 0: affectedElement.disabled = true; selectNextAvailableItem = affectedElement.checked ? true : false; break;
                        // this means to enable this item
                        case 1: affectedElement.disabled = false; break;
                        }
                        
                        if (selectNextAvailableItem == true)
                        {
                            // if an item was disabled, we need to select a different one
                            // first deselect the current one, and continue the loop to select another one
                            affectedElement.checked = false;
                            // starts at 0 so that we will select the cheapest item
                            j = 0;
                            continue;
                            //alert( "we need to select the next available item");
                        }
                        else
                        {
                            // ok we are done with the while loop
                            // move on to next behavior item
                            break;
                        }
                    }
                 }
                 j++;
            }
        }
    }
    
}

function Item(componentTypeId, componentType, componentId, price, imageUrl)
{
    this.ComponentTypeId = componentTypeId;
    this.ComponentType = componentType;
    this.ComponentId = componentId;
    this.Price = price;
    this.ImageUrl = imageUrl;
    this.ComponentBehaviorArray = null;
}

function ComponentBehavior(behavior, affectedComponentId, affectedComponentType, affectedComponentTypeId)
{
    this.Behavior = behavior;
    this.AffectedComponentId = affectedComponentId;
    this.AffectedComponentType = affectedComponentType;
    this.AffectedComponentTypeId = affectedComponentTypeId;
}

function FormatCurrency(price)
{
    if (price < 0)
    {
        price = price * -1;
    }
    price = price / 100;
    var strPrice = "$" + price;
    
    if (strPrice.indexOf(".") == -1)
    {
        strPrice = strPrice + ".00";
    }
    
    return strPrice;
}

function ShowGroup(groupId)
{
    if (groupId == 1)
    {
        document.getElementById("backButton").style.display = 'none';
        document.getElementById("addToCartButton").style.display = 'none';
        document.getElementById("nextButton").style.display = '';
        
        document.getElementById("components").style.display = '';
        document.getElementById("peripherals").style.display = 'none';
                
        document.getElementById("BaseComponentTitle").className = "currentStep";
        document.getElementById("PeripheralTitle").className = "notCurrentStep";
    }
    else if (groupId == 2)
    {
        document.getElementById("backButton").style.display = '';
        document.getElementById("addToCartButton").style.display = '';
        document.getElementById("nextButton").style.display = 'none';
        
        document.getElementById("components").style.display = 'none';
        document.getElementById("peripherals").style.display = '';
        
        document.getElementById("BaseComponentTitle").className = "notCurrentStep";
        document.getElementById("PeripheralTitle").className = "currentStep";
    }
}

function Popup(link, windowname, width, height, resizable, scrollbars, status )
{
    if (! window.focus)return true;
    var href = link.href;
    var options = 'width=' + width + ',height=' + height + ',resizable=' + resizable + ',scrollbars=' + scrollbars + ',status=' + status;
    window.open(href, windowname, options);
    return false;
}