// Function to run on page load and DOM ready
Event.observe(window, 'load', function() {
widgetLocation = null; // Global variable to store the user's choice of MySpace or Personal Site/Blog
widgetChoice = null; // Global variable to store which widget the user wants
MM_preloadImages(
'../images/quiz/preview-optionA.gif',
'../images/quiz/preview-optionB.gif',
'../images/quiz/preview-optionC.gif',
'../images/quiz/preview-optionD.gif',
'../images/quiz/bg-grab-code.gif'
);
// Set initial button event handlers when page is ready
myspaceButton = $('btnMyspace');
myspaceButton.onclick = function() {
widgetLocation='myspace'; SwitchPanels('widgetIntroPanel', 'widgetCustomizePanel'); return false;
}
blogButton = $('btnBlog');
blogButton.onclick = function() {
widgetLocation='personal'; SwitchPanels('widgetIntroPanel', 'widgetCustomizePanel'); return false;
}
});
// This function contains all of the logic to switch between two panels
function SwitchPanels(panelOff, panelOn) {
// Sets local object variables for each panel
var oPanelOff = $(panelOff);
var oPanelOn = $(panelOn);
// If the user tries to switch to the preview panel but hasn't made a widget selection yet, prompt them and cancel the function
if ((panelOn == 'widgetPreviewPanel') && (widgetChoice == null)) {
ShowAlert();
return false;
}
// Cross Fade one panel into the other
new Effect.Parallel(
[
Effect.Fade(oPanelOff, { sync: true }),
Effect.Appear(oPanelOn, { sync: true })
],
{ duration: .5 }
);
}
// This function inserts an alert box into the DOM prompting the user to select a widget
function ShowAlert() {
// Create a variable for our alert box and check to see if it already exists
var alertDiv = $('widgetCustomizeAlert');
// If it exists already, no need to display it again, just do nothing
if (alertDiv) return false;
// Otherwise, create a document fragment for our alert div, set it's id, and insert a text node
alertDiv = document.createElement('div');
alertDiv.setAttribute('id', 'widgetCustomizeAlert');
var txt = document.createTextNode('Please choose one of the options above');
alertDiv.appendChild(txt);
// Insert the new div in the DOM before the continue button
var btnContinue = $('widgetCustomizeContinue');
btnContinue.parentNode.insertBefore(alertDiv, btnContinue);
}
// This function selects which widget the user wants
function SelectWidget(selectedWidget) {
// If the user clicks the same one they've already selected, do nothing
if (widgetChoice == selectedWidget) return false;
// Otherwise, check to see if this is the first time they've made a selection, or if they're changing their selection
if (widgetChoice == null) {
// This is the first selection they've made so let's update the global variable
widgetChoice = selectedWidget;
// Fade all 3 other choices to 50% opacity to show them as de-selected
// Create an array of all the widgets
var widgets = ['optionA','optionB','optionC','optionD'];
// Loop through the array and remove the selected widget
var i = 0; // array position
while (i < widgets.length) {
if (widgets[i] == selectedWidget) widgets.splice(i, 1);
i++;
}
// Now that we have an array of just the 3 non-chosen widgets, let's fade them all at once
new Effect.Parallel(
[
Effect.Fade($(widgets[0]), { from: 1.0, to: 0.5, sync: true }),
Effect.Fade($(widgets[1]), { from: 1.0, to: 0.5, sync: true }),
Effect.Fade($(widgets[2]), { from: 1.0, to: 0.5, sync: true })
],
{ duration: .5 }
);
} else {
// They've already made a previous selection so let's fade that one out and fade the new selection in
new Effect.Parallel(
[
Effect.Fade($(widgetChoice), { from: 1.0, to: 0.5, sync: true }),
Effect.Appear($(selectedWidget), { from: 0.5, to: 1.0, sync: true })
],
{ duration: .5 }
);
// Update the global variable
widgetChoice = selectedWidget;
}
// Check to see if the alert box was display and if so, hide it
var alertDiv = $('widgetCustomizeAlert');
if (alertDiv) alertDiv.parentNode.removeChild(alertDiv);
// Update the preview and get the code panels with the right info
var previewImage = $('widgetPreviewImage');
previewImage.setAttribute('src', '../images/quiz/preview-'+selectedWidget+'.gif');
/* Determine the value to pass into the swf file */
var userSelection;
switch(selectedWidget) {
case 'optionA':
userSelection = '0';
break;
case 'optionB':
userSelection = '1';
break;
case 'optionC':
userSelection = '2';
break;
case 'optionD':
userSelection = '3';
break;
}
var codeBlock;
var codeText1 = $('widgetCodeTextType1');
var codeText2 = $('widgetCodeTextType2');
var code = $('widgetCode');
/* Modify code block and insert it into textbox based on user's initial location selection */
switch (widgetLocation) {
case 'myspace':
codeText1.firstChild.nodeValue = 'MySpace page';
codeText2.firstChild.nodeValue = 'Paste it into the "About Me" section of your MySpace page';
codeBlock = '
'
+ '
'
code.value = codeBlock;
break;
case 'personal':
codeText1.firstChild.nodeValue = 'personal website or blog';
codeText2.firstChild.nodeValue = 'Paste it into the code for your personal website or blog';
codeBlock = '';
code.value = codeBlock;
break;
}
}
