/* E-Card functionality */

function updateFrameColor(event, rb) {
    if (event) {
        var rb = Event.element(event);
    }
    var frameColor = rb.next('label').getStyle("background-color");
    
    if (frameColor == "transparent") {
        frameColor = "#FFFFFF";
    }
    $$("div.border")[0].setStyle({
        backgroundColor: frameColor
    });
}

function updateMessage(event, msgText) {
    if (event) {
        var msgText = Event.element(event).next('label').innerHTML;
    }
    if(msgText == "None") {
        msgText = "";
    }
    $$("div.border h4")[0].update(msgText);
}

document.observe("dom:loaded", function() {

    /* Step 1 */
    if ($$("form.step1").length > 0) {
        $$("form.step1 fieldset")[0].addClassName("js_enabled");
        var eCardLIs = $$("form.step1 fieldset li");
        var lastLiClicked = null;
        for(var i=0; i<eCardLIs.length; i++) {
            eCardLIs[i].observe('mouseover', function(event) {
                var li = Event.findElement(event, 'li');
                li.addClassName("hover");
            });
            eCardLIs[i].observe('mouseout', function(event) {
                var li  = Event.findElement(event, 'li');
                li.removeClassName("hover");
            });
            eCardLIs[i].observe('click', function(event) {
                var li  = Event.findElement(event, 'li');
                var radBtn = li.down("input");
                if(lastLiClicked) {
                    lastLiClicked.removeClassName("selected");
                }
                li.addClassName("selected");
                radBtn.click();
                lastLiClicked = li;
            });
        }
        
    /* Step 2*/
    } else if ($$("form.step2").length > 0) {
        var colorRadioBtns = $$("div#frame_color input");
        var msgRadioBtns = $$("div#message input");
        
        for (var i=0; i<colorRadioBtns.length; i++) {
            if(colorRadioBtns[i].readAttribute("checked") == "checked") {
                updateFrameColor(null, colorRadioBtns[i]);
            }
            colorRadioBtns[i].observe('focus', updateFrameColor);
        }
        
        for (var i=0; i<msgRadioBtns.length; i++) {
            var msgText = msgRadioBtns[i].next("label").innerHTML;
            if(msgRadioBtns[i].readAttribute("checked") == "checked") {
                updateMessage(null, msgText);
            }
            msgRadioBtns[i].observe('focus', updateMessage);
        }
    }
});