var textState;
// TOOLBAR
// "New [Casting]" and "Info" in main titlebar.
// "Done [with Info]" in top bar of info panel.
// "Show/Hide [Popup]" in bar with popup text.
function clickToolbar( aBtn )
{
var theId = aBtn.id.split("-")[1];
switch ( theId )
{
case "new":
setStateForElement( true, aBtn );
prepNewCast();
break;
case "info":
case "done": toggleInfo(); break;
case "read":
case "hide": toggleText(); break;
}
}
//
// New Hexagram Casting
//
function prepNewCast()
{
// Stop spinners from spinning
clearTimeout( appParams.spinTimeoutID );
domGlobals.helpbox.style.display = "block"; // "Click center ..."
// Hide all on-screen elements.
// NOTE: We're fading out the uniGrams, which will need to be moved
// off-screen and re-opaquified, since they never fade back in.
startMultiAnim
(
"actor",
10,
"cube",
new Array
(
new multiAnimTarget( domGlobals.helpbox, "opacity", "current", 1.0, "" ),
new multiAnimTarget( domGlobals.popbox, "bottom", "current", -1*domGlobals.popbox.offsetHeight, "px" ),
new multiAnimTarget( document.getElementById("uniGramBox"), "opacity", "current", 1.0, "" ),
new multiAnimTarget( document.getElementById("duoGramBox"), "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.uniGrams[0].div, "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.uniGrams[1].div, "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.uniGrams[2].div, "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.uniGrams[3].div, "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.uniGrams[4].div, "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.uniGrams[5].div, "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.hintBar.div, "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.hintBar.div, "top", "current", -24, "px" )
),
"postPrepNewCast()"
);
}
function postPrepNewCast()
{
appParams.tapOnSpinner = "fade-0";
domGlobals.spinbox.style.display = "block";
domGlobals.readbox.style.display = "none";
domGlobals.popbox.style.bottom = (-1*domGlobals.popbox.offsetHeight)+"px";
rPrepUniGramAtIndex( 0 );
setStateForElement( false, document.getElementById("btn-new") );
}
function rPrepUniGramAtIndex( aIdx )
{
if ( aIdx < 6 )
{
domGlobals.uniGrams[aIdx].div.style.left = "-100%";
domGlobals.uniGrams[aIdx].div.style.opacity = 1.0;
domGlobals.uniGrams[aIdx].span.innerHTML = "";
domGlobals.uniGrams[aIdx].isYin = "unknown";
domGlobals.uniGrams[aIdx].isFixed = "unknown";
rPrepUniGramAtIndex( 1 + aIdx );
}
}
//
// Casting a Hexagram
//
function clickSpinner( aSpinner )
// "spinner" can be "help-box" (hexagram overlay)
// that triggers new cast or toggles dual hexagram
{
var theIdx = 1*aSpinner.id.split("-")[1];
var theAction = appParams.tapOnSpinner.split("-")[0];
var theTarget = appParams.tapOnSpinner.split("-")[1];
switch ( theAction )
{
case "fade":
case "cast":
beginCastUniGram( 1*theTarget );
break;
case "stop":
stopSpinner( theIdx ); // in script.js
break;
case "toggleDuoGrams":
toggleDuoGrams( 1*theTarget );
break;
}
}
function beginCastUniGram( aIdx )
{
setupSpinners(); // in script.js
appParams.spinTimeoutID = setTimeout( "stepSpinners()", 0 );
preShowSpinnersForUniGram( aIdx ); // in script.js
}
function endCastUniGram()
{
clearTimeout( appParams.spinTimeoutID );
var theGramIdx = 0;
while (( theGramIdx < 6 ) && ( domGlobals.uniGrams[theGramIdx].isYin != "unknown" ))
theGramIdx += 1;
var theGramType = uniGramTypeFromSpins(
domGlobals.spinners[0].value,
domGlobals.spinners[1].value,
domGlobals.spinners[2].value,
domGlobals.spinners[3].value );
domGlobals.uniGrams[theGramIdx].div.style.backgroundImage = "url(images/line-" + theGramType + ".png)";
domGlobals.uniGrams[theGramIdx].isYin = ( 1*theGramType < 10 );
domGlobals.uniGrams[theGramIdx].isFixed = ( 1*theGramType % 10 == 0 );
domGlobals.uniGrams[theGramIdx].span.innerHTML =
( domGlobals.uniGrams[theGramIdx].isFixed ? 'Young ("Fixed") ' : 'Old ("Changing") ' ) +
( domGlobals.uniGrams[theGramIdx].isYin ? 'Yin' : 'Yang' );
domGlobals.uniGrams[theGramIdx].span.style.opacity = 1.0;
document.getElementById("duoGram-"+theGramIdx).style.backgroundImage = "url(images/line-" + duoGramTypeFromGramType( theGramType ) + ".png)";
showUniGram( theGramIdx );
}
function showUniGram( aIdx )
{
// Effect consists of two phases.
// 1. Labeled unigram moves on-screen
// (spinners and "tap spinners" instruction move off-screen)
// 2. Label fades
// ("tap center ..." instruction moves on-screen, for aIdx < 6)
var theDir = ( 1*domGlobals.uniGrams[aIdx].isYin ? 1 : -1 );
// Hide help-box ( == central tap area)
domGlobals.helpbox.style.display = "none";
// Prep instruction bar ( top of screen )
domGlobals.hintBar.div.style.left = "0%";
domGlobals.hintBar.div.style.right = "0%";
// Prepare unigram div by setting it off-screen to the left
domGlobals.uniGrams[aIdx].div.style.left = "-200%";
startMultiAnim
(
"actor",
20,
"cube",
new Array
(
new multiAnimTarget( domGlobals.popbox, "bottom", "current", -1*domGlobals.popbox.offsetHeight, "px" ),
new multiAnimTarget( domGlobals.hintBar.div, "opacity", "current", 0, "" ),
new multiAnimTarget( domGlobals.hintBar.div, "top", "current", -24, "px" ),
new multiAnimTarget( domGlobals.uniGrams[aIdx].div, "left", ( theDir == 1 ? "100" : "-100" ), 0, "%" )
),
"midShowUniGram("+aIdx+")"
);
}
function midShowUniGram( aIdx )
{
domGlobals.hintBar.div.style.display = ( aIdx < 5 ? "block" : "none" );
domGlobals.hintBar.div.innerHTML = "Tap the center of the screen to continue.";
// In case popbox size changed during animation
domGlobals.popbox.style.bottom = (-1*domGlobals.popbox.offsetHeight)+"px";
startMultiAnim
(
"actor",
40,
"cube",
new Array
(
new multiAnimTarget( domGlobals.hintBar.div, "top", -24, 0, "px" ),
new multiAnimTarget( domGlobals.hintBar.div, "opacity", 0.0, 1.0, "" ),
new multiAnimTarget( domGlobals.uniGrams[0].span, "opacity", "current", 0, "" ),
new multiAnimTarget( domGlobals.uniGrams[1].span, "opacity", "current", 0, "" ),
new multiAnimTarget( domGlobals.uniGrams[2].span, "opacity", "current", 0, "" ),
new multiAnimTarget( domGlobals.uniGrams[3].span, "opacity", "current", 0, "" ),
new multiAnimTarget( domGlobals.uniGrams[4].span, "opacity", "current", 0, "" ),
new multiAnimTarget( domGlobals.uniGrams[5].span, "opacity", "current", 0, "" )
),
"postShowUniGram()"
);
}
function postShowUniGram()
{
var theIdx = 0;
while (( theIdx < 6 ) && ( domGlobals.uniGrams[theIdx].isYin != "unknown" ))
theIdx += 1;
domGlobals.hintBar.div.style.left = "0%";
domGlobals.hintBar.div.style.right = "0%";
if ( theIdx < 6 )
{
domGlobals.helpbox.style.display = "block";
appParams.tapOnSpinner = "cast-" + theIdx;
}
else
completeCastHexagram();
}
function completeCastHexagram()
{
installDataForBinaryValueOfHexagram( binaryValueOfHexagram() );
domGlobals.spinbox.style.display = "none";
domGlobals.readbox.style.display = "block";
textState = false;
document.getElementById("pop-text-scrollbox").style.height = 0.0;
document.getElementById("tbbtn-read").style.opacity = 1.0;
document.getElementById("tbbtn-hide").style.opacity = 0.0;
if ( binaryValueOfHexagram() == binaryValueOfDuoHexagram() )
{
setHintBarHTML( "This hexagram has no changed form." );
appParams.tapOnSpinner = "nothing";
}
else
{
setHintBarHTML( "Tap the hexagram to see its CHANGED form." );
appParams.tapOnSpinner = "toggleDuoGrams-1";
}
domGlobals.hintBar.div.style.display = "block";
domGlobals.hintBar.div.style.top = "-24px";
startMultiAnim
(
"actor",
30,
"cube",
new Array
(
new multiAnimTarget( domGlobals.popbox, "bottom", -1*domGlobals.popbox.offsetHeight, 0, "px" ),
new multiAnimTarget( domGlobals.hintBar.div, "opacity", "current", 1.0, "" ),
new multiAnimTarget( domGlobals.hintBar.div, "top", -24, 0, "px" )
),
"postCompleteCastHexagram()"
);
}
function postCompleteCastHexagram()
{
domGlobals.helpbox.style.display = "block";
}
//
//
//
function toggleDuoGrams( aDir )
{
if ( !document.getElementById("uniGramBox").style.opacity )
document.getElementById("uniGramBox").style.opacity = 1.0;
if ( !document.getElementById("duoGramBox").style.opacity )
document.getElementById("duoGramBox").style.opacity = 0.0;
startMultiAnim(
"actor",
5,
"line",
new Array(
new multiAnimTarget( document.getElementById("uniGramBox"), "opacity", "current", 0.5, "" ),
new multiAnimTarget( document.getElementById("duoGramBox"), "opacity", "current", 0.5, "" ),
new multiAnimTarget( domGlobals.hintBar.div, "opacity", "current", 0.0, "" ),
new multiAnimTarget( domGlobals.hintBar.div, "top", "current", -24, "px" ),
new multiAnimTarget( document.getElementById( "pop-title"), "opacity", 1.0, 0.0, "" )
),
"midToggleDuoGrams("+aDir+")" );
}
function midToggleDuoGrams(aDir)
{
installDataForBinaryValueOfHexagram( ( aDir == 1 ? binaryValueOfDuoHexagram() : binaryValueOfHexagram() ) );
setHintBarHTML( "Tap the hexagram to see its " + ( aDir == 1 ? "ORIGINAL" : "CHANGED" ) + " form." );
startMultiAnim(
"actor",
5,
"line",
new Array(
new multiAnimTarget( document.getElementById("uniGramBox"), "opacity", "current", ( aDir == 1 ? 0.0 : 1.0 ), "" ),
new multiAnimTarget( document.getElementById("duoGramBox"), "opacity", "current", ( aDir == 1 ? 1.0 : 0.0 ), "" ),
new multiAnimTarget( domGlobals.hintBar.div, "opacity", "current", 1.0, "" ),
new multiAnimTarget( domGlobals.hintBar.div, "top", "current", 0, "px" ),
new multiAnimTarget( document.getElementById( "pop-title"), "opacity", 0.0, 1.0, "" )
),
"postToggleDuoGrams()" );
}
function postToggleDuoGrams( aDir )
{
appParams.tapOnSpinner = "toggleDuoGrams-" +
( 1*document.getElementById("uniGramBox").style.opacity == 1.0 ? "1" : "0" );
}
//
//
//
function installDataForBinaryValueOfHexagram( aBinVal )
{
var theData = appParams.hexArray[aBinVal];
document.getElementById("pop-title").innerHTML =
theData.pictogram + " "
+ theData.name + "
"
+ theData.readings["title"].split(":::")[0];
var theReadHTML = "";
var theReadText, theReadAuthor;
for ( var aReadName in theData.readings )
{
if ( aReadName != "title" )
{
theReadText = theData.readings[aReadName].split(":::");
if ( theReadText.length > 1 )
theReadAuthor = theReadText[1];
theReadText = theReadText[0];
theReadHTML += "" + capitalizeString( aReadName ) + ""+theReadAuthor+"
";
theReadHTML += "" + theReadText + "
";
}
}
document.getElementById("pop-text").innerHTML = theReadHTML;
}