function changeTrans() {
    obj = getControlObject("oSelect");
    selectedValue = obj.options[obj.selectedIndex].value;
    if (selectedValue != "empty") {
        if (selectedValue.indexOf('Barn')!=-1) {
            oControlsSpan.innerHTML = oBarnControls.innerHTML;
            barnTransChange();
        }
        else if (selectedValue.indexOf('Blinds')!=-1) {
            oControlsSpan.innerHTML = oBlindsControls.innerHTML;
            blindsTransChange();
        }
        else if (selectedValue.indexOf('Checkerboard')!=-1) {
            oControlsSpan.innerHTML = oCheckerboardControls.innerHTML;
            checkerboardTransChange();
        }
        else if (selectedValue.indexOf('Fade')!=-1) {
            oControlsSpan.innerHTML = oFadeControls.innerHTML;
            fadeTransChange();
        }
        else if (selectedValue.indexOf('Iris')!=-1) {
            oControlsSpan.innerHTML = oIrisControls.innerHTML;
            irisTransChange();
        }
        else if (selectedValue.indexOf('Pixelate')!=-1) {
            oControlsSpan.innerHTML = oPixelateTransControls.innerHTML;
            pixelateTransChange();
        }
        else if (selectedValue.indexOf('RadialWipe')!=-1) {
            oControlsSpan.innerHTML = oRadialWipeControls.innerHTML;
            radialWipeTransChange();
        }
        else if (selectedValue.indexOf('RandomBars')!=-1) {
            oControlsSpan.innerHTML = oRandomBarsControls.innerHTML;
            randomBarsTransChange();
        }
        else if (selectedValue.indexOf('Slide')!=-1) {
            oControlsSpan.innerHTML = oSlideControls.innerHTML;
            slideTransChange();
        }
        else if (selectedValue.indexOf('Spiral')!=-1) {
            oControlsSpan.innerHTML = oSpiralControls.innerHTML;
            spiralTransChange();
        }
        else if (selectedValue.indexOf('Stretch')!=-1) {
            oControlsSpan.innerHTML = oStretchControls.innerHTML;
            stretchTransChange();
        }
        else if (selectedValue.indexOf('Strips')!=-1) {
            oControlsSpan.innerHTML = oStripsControls.innerHTML;
            stripsTransChange();
        }
        else if (selectedValue.indexOf('Wheel')!=-1) {
            oControlsSpan.innerHTML = oWheelControls.innerHTML;
            wheelTransChange();
        }
        else if (selectedValue.indexOf('.Wipe')!=-1) {
            oControlsSpan.innerHTML = oWipeControls.innerHTML;
            wipeTransChange();
        }
        else if (selectedValue.indexOf('Zigzag')!=-1) {
            oControlsSpan.innerHTML = oZigzagControls.innerHTML;
            zigzagTransChange();
        }
        else {
            oImg.style.filter=selectedValue;
            oControlsSpan.innerHTML = featuresHeader + 'This transition does not support any additional features.';
        }
    }
    else {
            oImg.style.filter='';
            oControlsSpan.innerHTML =  featuresHeader + 'No transition is currently selected.';
    }
    updateTransCode();
}

function updateTransCode() {
    obj = getControlObject("oSelect");
    selectedValue=obj.options[obj.selectedIndex].value;
    imgContents = imgObj.innerHTML;
    if (selectedValue != "empty") {
        oCodePre.innerText=completeTransCode(imgContents);
    }
    else {
        oCodePre.innerText=imgContents;
    }
    highlightText(imgContents);
}

function completeTransCode(imgText) {
    scriptBlock = '';
    scriptBlock = scriptBlock + 'var startImage ="' + startImage + '";\n';
    scriptBlock = scriptBlock + 'var endImage="' + endImage + '";\n';
    scriptBlock = scriptBlock + 'function doTrans() {\n';
    scriptBlock = scriptBlock + '        oImg.filters[0].apply();\n';
    scriptBlock = scriptBlock + '        if (oImg.src.indexOf(startImage)!=-1) {\n';
    scriptBlock = scriptBlock + '            oImg.src = endImage;\n';
    scriptBlock = scriptBlock + '        }\n';
    scriptBlock = scriptBlock + '        else {\n';
    scriptBlock = scriptBlock + '            oImg.src = startImage;\n';
    scriptBlock = scriptBlock + '        }\n';
    scriptBlock = scriptBlock + '        oImg.filters[0].play();\n';
    scriptBlock = scriptBlock + '}\n'
    buttonBlock = '\<BR\>\<BR\>\n<BUTTON onclick="doTrans()">Play Transition</BUTTON>\n'
    fullBlock = '\<HEAD\>\n\<SCRIPT\>\n' + scriptBlock + '\<\/SCRIPT\>\n\<\/HEAD\>\n\<BODY\>\n' + imgText + buttonBlock + '\<\/BODY\>';
    return(fullBlock);  
}

function barnTransChange(){
    controlObject = getControlObject("openingSwitch");
    opening = controlObject.checked;
    controlObject = getControlObject("barnVerticalSwitch");
    vertical = controlObject.checked;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrBarn(opening="+ opening+",vertical="+ vertical+")'";
    eval(cmd);
    updateTransCode();
}

function blindsTransChange(){
    controlObject = getControlObject("blindsBandsList");
    bands = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("blindsDirectionList");
    direction = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrBlinds(Bands="+ bands+",direction="+ direction+")'";
    eval(cmd);
    updateTransCode();
}

function checkerboardTransChange(){
    controlObject = getControlObject("checkerboardDirectionList");
    direction = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("squaresXList");
    squaresX = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("squaresYList");
    squaresY = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.Checkerboard(Direction="+ direction+",SquaresX="+ squaresX+",SquaresY="+ squaresY+")'";
    eval(cmd);
    updateTransCode();
}

function fadeTransChange(){
    controlObject = getControlObject("centerSwitch");
    controlObject.checked==true ? center = 1 : center = 0;
    controlObject = getControlObject("fadeOverlapList");
    overlap = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.Fade(Overlap=" + overlap + ",Center="+ center+")'";
    eval(cmd);
    updateTransCode();
}

function irisTransChange(){
    controlObject = getControlObject("irisStyleList");
    irisStyle = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("irisReverseSwitch");
    reverse = controlObject.checked;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrIris(irisStyle="+ irisStyle+",reverse=" + reverse +")'";
    eval(cmd);
    updateTransCode();
}

function pixelateTransChange(){
    controlObject = getControlObject("maxSquareTransList");
    maxSquare = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.Pixelate(MaxSquare="+ maxSquare+")'";
    eval(cmd);
    updateTransCode();
}

function randomBarsTransChange(){
    controlObject = getControlObject("randomBarsVerticalSwitch");
    vertical = controlObject.checked;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.RandomBars(vertical="+ vertical+")'";
    eval(cmd);
    updateTransCode();
}

function radialWipeTransChange(){
    controlObject = getControlObject("radialWipeStyleList");
    wipeStyle = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrRadialWipe(wipeStyle="+ wipeStyle+")'";
    eval(cmd);
    updateTransCode();
}

function slideTransChange(){
    controlObject = getControlObject("slideStyleList");
    slideStyle = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("slideBandsList");
    bands = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrSlide(slideStyle="+ slideStyle+",Bands=" + bands +")'";
    eval(cmd);
    updateTransCode();
}

function spiralTransChange(){
    controlObject = getControlObject("spiralGridSizeXList");
    gridSizeX = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("spiralGridSizeYList");
    gridSizeY = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrSpiral(GridSizeX="+ gridSizeX+",GridSizeY=" + gridSizeY +")'";
    eval(cmd);
    updateTransCode();
}

function stretchTransChange(){
    controlObject = getControlObject("stretchStyleList");
    stretchStyle = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrStretch(stretchStyle="+ stretchStyle+")'";
    eval(cmd);
    updateTransCode();
}

function stripsTransChange(){
    controlObject = getControlObject("movementList");
    movement = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("stripsYList");
    stripsY = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.Strips(Movement="+ movement+",StripsY="+ stripsY+")'";
    eval(cmd);
    updateTransCode();
}

function wheelTransChange(){
    controlObject = getControlObject("spokesList");
    spokes = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrWheel(spokes="+ spokes+")'";
    eval(cmd);
    updateTransCode();
}

function wipeTransChange(){
    controlObject = getControlObject("wipeReverseSwitch");
    reverse = controlObject.checked;
    if (!reverse) {
        getControlObject("wipeStyleList").options("ltrrtlText").innerText="0 (Left-to-right)";
        getControlObject("wipeStyleList").options("ttbbttText").innerText="1 (Top-to-bottom)";
    }
    else
    {
        getControlObject("wipeStyleList").options("ltrrtlText").innerText="0 (Right-to-left)";
        getControlObject("wipeStyleList").options("ttbbttText").innerText="1 (Bottom-to-top)";
    }
    controlObject = getControlObject("gradientSizeList");
    gradientSize = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("wipeStyleList");
    wipeStyle = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.Wipe(GradientSize="+ gradientSize+",wipeStyle=" + wipeStyle +",reverse=" + reverse +")'";
    eval(cmd);
    updateTransCode();
}

function zigzagTransChange(){
    controlObject = getControlObject("zigzagGridSizeXList");
    gridSizeX = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getControlObject("zigzagGridSizeYList");
    gridSizeY = controlObject.options[controlObject.selectedIndex].value;
    cmd = "oImg.style.filter='progid:DXImageTransform.Microsoft.CrZigzag(GridSizeX="+ gridSizeX+",GridSizeY=" + gridSizeY +")'";
    eval(cmd);
    updateTransCode();
}
</SCRIPT>

<LINK REL="stylesheet" TYPE="text/css" HREF="IASample.css">
</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->

<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BGCOLOR="#FFFFFF" onload="switchContent(filterSection)">

<!-- DOCUMENT CONTENT START -->
<SPAN ID="oLiveSpan" style="BACKGROUND: #BBBBBB; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 210px; LEFT: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 300px; z-index: 2"
ALIGN="LEFT">
<!-- START Live Content -->
<TABLE ALIGN="CENTER">
<TR><TD>
<P><SPAN ID="imgObj"><IMG ID="oImg"></SPAN></P>
</TD></TR>
</TABLE>
<!-- END Live Content -->
</SPAN>

<SPAN
style="BACKGROUND: #000000; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 165; LEFT: 300; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 500px; z-index: 3; background-image:  url(descbg.gif); background-repeat: no-repeat; overflow: hidden">
<br>
<br>
<P class="desctext">Modify the code using the controls in the left portion of this window. </P>
<P class="desctext">First, select the type of effect to demonstrate: Filters or Transitions.
<BR>
Next, select a filter or transition from the list of effects. If the selected effect supports specific features, the lower left portion of the window contains controls you can use to further modify the effect.
<BR>
<BR>
The code used to generate the effect is shown in the area below.</P>
</SPAN>

<SPAN id=oCodeSpan
style="BACKGROUND: #eeeeee; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-FAMILY: arial; font-size: 9pt; HEIGHT: 254px; LEFT: 300px; POSITION: absolute; TOP: 165px; WIDTH: 500px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; overflow: scroll; z-index: 4">
<SPAN ID="oCodePre" style="BACKGROUND: #eeeeee; HEIGHT: 100%; WIDTH: 50%">
</SPAN>
</SPAN>

<SPAN ID="oControlPanel" style="BACKGROUND: #dddddd; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 245; LEFT: 0px; POSITION: absolute; TOP: 210; WIDTH: 300; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 15px; z-index: 5; background-image:  url(controlbg.gif); background-repeat: no-repeat">
<BR>
<P>Effect Type: <INPUT TYPE=radio NAME="DemoChoice" VALUE="Filters" onclick="switchContent(filterSection)" CHECKED> Filters 
<INPUT TYPE=radio NAME="DemoChoice" VALUE="Transitions" onclick="switchContent(transitionSection)"> Transitions
</P>
<SPAN ID="oContentHolder">
</SPAN>
<SPAN ID="oControlsSpan">
</SPAN>
</SPAN>