Sys.Application.add_load(PageLoad);

var cpe1_Collapsed = true;
var cpe2_Collapsed = true;
var cpe3_Collapsed = true;

var linkUpCss = 'CollapseExpandPanelLink';
var linkDownCss = 'CollapseExpandPanelLinkDown';
var imgUpPath = 'http://assets.seamlessdev.com/sdiweb/accordion-button-up.jpg';
var imgDownPath = 'http://assets.seamlessdev.com/sdiweb/accordion-button-down.jpg';

function PageLoad() {
    var cpeCP1 = $find("cpe1");
    var cpeCP2 = $find("cpe2");
    var cpeCP3 = $find("cpe3");
    
    cpeCP1.add_expandComplete(ExpandCPE1);
    cpeCP1.add_collapseComplete(CollapseCPE1);

    cpeCP2.add_expandComplete(ExpandCPE2);
    cpeCP2.add_collapseComplete(CollapseCPE2);

    cpeCP3.add_expandComplete(ExpandCPE3);
    cpeCP3.add_collapseComplete(CollapseCPE3);
}

function ExpandCPE1(sender, args) {
    document.getElementById('img1').src = imgDownPath;
    document.getElementById('lb1').className = linkDownCss;
    cpe1_Collapsed = false;
}

function CollapseCPE1(sender, args) {
    document.getElementById('img1').src = imgUpPath;
    document.getElementById('lb1').className = linkUpCss;
    cpe1_Collapsed = true;
}

function MouseHoverCPE1() {
    document.getElementById('img1').src = imgDownPath;
    document.getElementById('lb1').className = linkDownCss;
}

function MouseOutCPE1() {
    // Only reset if we are collapsed.
    if (cpe1_Collapsed == true) {
        document.getElementById('img1').src = imgUpPath;
        document.getElementById('lb1').className = linkUpCss;
    }
}

function ExpandCPE2(sender, args) {
    document.getElementById('img2').src = imgDownPath;
    document.getElementById('lb2').className = linkDownCss;
    cpe2_Collapsed = false;
}

function CollapseCPE2(sender, args) {
    document.getElementById('img2').src = imgUpPath;
    document.getElementById('lb2').className = linkUpCss;
    cpe2_Collapsed = true;
}

function MouseHoverCPE2() {
    document.getElementById('img2').src = imgDownPath;
    document.getElementById('lb2').className = linkDownCss;
}

function MouseOutCPE2() {
    // Only reset if we are collapsed.
    if (cpe2_Collapsed == true) {
        document.getElementById('img2').src = imgUpPath;
        document.getElementById('lb2').className = linkUpCss;
    }
}

function ExpandCPE3(sender, args) {
    document.getElementById('img3').src = imgDownPath;
    document.getElementById('lb3').className = linkDownCss;
    cpe3_Collapsed = false;
}

function CollapseCPE3(sender, args) {
    document.getElementById('img3').src = imgUpPath;
    document.getElementById('lb3').className = linkUpCss;
    cpe3_Collapsed = true;
}

function MouseHoverCPE3() {
    document.getElementById('img3').src = imgDownPath;
    document.getElementById('lb3').className = linkDownCss;
}

function MouseOutCPE3() {
    // Only reset if we are collapsed.
    if (cpe3_Collapsed == true) {
        document.getElementById('img3').src = imgUpPath;
        document.getElementById('lb3').className = linkUpCss;
    }
}