/* 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";
    }

    if ($$("div.border") != "") {
        $$("div.border")[0].setStyle({
            backgroundColor: frameColor
        });
    
    } else {

        $$("div.border_vertical")[0].setStyle({
            backgroundColor: frameColor
        });
    }    
}

function updateMessage(event, msgText) {
    if (event) {
        var msgText = Event.element(event).next('label').innerHTML;
    }
    if(msgText == "None") {
        msgText = "";
    }

    if ($$("div.border h4") != "") {
        $$("div.border h4")[0].update(msgText);
    } else {    
        $$("div.border_vertical 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");
        
        // update frame with first radio 
        updateFrameColor(null, colorRadioBtns[0]);
        
        colorRadioBtns.each(function(radioel)
         {		
			// watch click on color input and update frame
			radioel.observe("click", function(radioel) {
				var clickedInput = Event.findElement(radioel, 'input');
				if (clickedInput.checked) {
				 updateFrameColor(null, clickedInput);
				}
				clickedInput.observe('focus', updateFrameColor);
			});
        });
        
        
        // update frame with first message        
        var msgText = msgRadioBtns[0].next("label").innerHTML;
        updateMessage(null, msgText);
        
        msgRadioBtns.each(function(messagel) {
			var msgText = messagel.next("label").innerHTML;
			
			// watch click on message input and update frame
			messagel.observe("click", function(messagel) {
				var clickedInput = Event.findElement(messagel, 'input');
				if (clickedInput.checked) {
				 updateMessage(null, msgText);
				}
				clickedInput.observe('focus', updateMessage);
			});
        });

    }
});