// define toolbar button images for each state
// (normal, highlight, click)
var toolbarData = new Array();
toolbarData[1] = new Array('http://www.trilastin.com/images/tabs/product_overview_n.gif', 'http://www.trilastin.com/images/tabs/product_overview_h.gif', 'http://www.trilastin.com/images/tabs/product_overview_c.gif');
toolbarData[2] = new Array('http://www.trilastin.com/images/tabs/clinical_photos_n.gif', 'http://www.trilastin.com/images/tabs/clinical_photos_h.gif', 'http://www.trilastin.com/images/tabs/clinical_photos_c.gif');
toolbarData[3] = new Array('http://www.trilastin.com/images/tabs/how_it_works_n.gif', 'http://www.trilastin.com/images/tabs/how_it_works_h.gif', 'http://www.trilastin.com/images/tabs/how_it_works_c.gif');
toolbarData[4] = new Array('http://www.trilastin.com/images/tabs/testimonials_n.gif', 'http://www.trilastin.com/images/tabs/testimonials_h.gif', 'http://www.trilastin.com/images/tabs/testimonials_c.gif');
toolbarData[5] = new Array('http://www.trilastin.com/images/tabs/faqs_n.gif', 'http://www.trilastin.com/images/tabs/faqs_h.gif', 'http://www.trilastin.com/images/tabs/faqs_c.gif');
toolbarData[6] = new Array('http://www.trilastin.com/images/tabs/order_n.gif', 'http://www.trilastin.com/images/tabs/order_h.gif', 'http://www.trilastin.com/images/tabs/order_c.gif');

// store the ID of the currently clicked button
var currentSelection = -1;  // -1 = initial dummy value

// function to change button state on hover
function highlightItem(obj, state) {
    // get button ID
    i = obj.getAttribute('id');
    
    // check if it is currently clicked
    // if not, change state (normal=0, highlight=1)
    if (i != currentSelection) {
        if (state == 1) {
            obj.setAttribute('src', toolbarData[i][1]);
        } else {
            obj.setAttribute('src', toolbarData[i][0]);
        }                    
    }
}

// function to change button state on click
function selectItem(obj) {
    
//	if (typeof ClickTaleExec == "function") {
//        var elId = obj.id;
//        if(elId) {
//            ClickTaleExec("selectItem(document.getElementById('" + elId + "');
//    }

	// get button ID
    i = obj.getAttribute('id');

    // reset all toolbar buttons to normal
    tbar = document.getElementById('toolbar');
    items = tbar.getElementsByTagName('img');
    for (x = 0; x < items.length; x++) {
        items[x].setAttribute('src', toolbarData[(x+1)][0]);
    }
    
    // set selected button to click state
    obj.setAttribute('src', toolbarData[i][2]);
    
    // publish ID of clicked button
    currentSelection = i;
}

function initselection() {
    // get button ID
    i = 0;

    // reset all toolbar buttons to normal
    tbar = document.getElementById('toolbar');
    items = tbar.getElementsByTagName('img');
    for (x = 0; x < items.length; x++) {
        items[x].setAttribute('src', toolbarData[(x+1)][0]);
    }
    
    // set selected button to click state
    items[i].setAttribute('src', toolbarData[i+1][2]);
    
    // publish ID of clicked button
    currentSelection = i+1;
    
}

function highlightbutton(i) {

    // reset all toolbar buttons to normal
    tbar = document.getElementById('toolbar');
    items = tbar.getElementsByTagName('img');
    for (x = 0; x < items.length; x++) {
        items[x].setAttribute('src', toolbarData[(x+1)][0]);
    }
    
    // set selected button to click state
    items[i].setAttribute('src', toolbarData[i+1][2]);
    
    // publish ID of clicked button
    currentSelection = i+1;
    
    }