slideShowURL = 'Screenshots/SlideShow_assets/SlideShow.html';       // paramater from openSlideShowWindow.js
slideShowNS4URL = 'Screenshots/SlideShow_assets/SlideShowNS4.html'; // parameter from openSlideShowWindow.js

slides = new Array();
slides[0] = new Slide('../Screenshots_files/server1.jpg', '737', '1219', 'Here is the Vision window server running in the window to the left.  In the lower right is the terminal window for the packet sniffer program that is running within the server right now.');
slides[1] = new Slide('../Screenshots_files/server2.jpg', '737', '1219', 'Now both the packet sniffer and rubik\'s cube programs are running and have connected to the server.');
slides[2] = new Slide('../Screenshots_files/visionchat1.jpg', '880', '1409', 'This is VisionChat a conferencing program.  Participants are organized in a ring and each have their own individual control bar at the bottom.  The participant with the gavel icon next to them is currently the moderator.');
slides[3] = new Slide('../Screenshots_files/visionchat2.jpg', '880', '1409', 'This is the agenda that outlines when the meeting starts, how the meeting should be run and what should be focused on now (indicated by the red bar).');
slides[4] = new Slide('../Screenshots_files/visionchat3.jpg', '880', '1409', 'Only the participants in the middle may have permission to talk and must be moved into the middle from the outer ring by the moderator.  This is to control not only conference flow but also to conserve bandwidth when a participant is not the focus by doing such things as cutting their audio stream, lowering their resolution and halving their framerate.');
slides[5] = new Slide('../Screenshots_files/visionchat4.jpg', '880', '1409', 'This is the moderator setting up a vote.  The options are listed above and the visibilities both during and after voting are picked from the dropdown menus.');
slides[6] = new Slide('../Screenshots_files/visionchat5.jpg', '880', '1409', 'Because the visibility during voting was chosen to be \"tally\" there are 3 white boxes next to the option that they voted for representing the 3 out of 5 votes currently cast.');
slides[7] = new Slide('../Screenshots_files/visionchat6.jpg', '880', '1409', 'Because the visibility after voting was chosen to be \"attributed tally\" it shows exactly who voted for which option after all the votes have been cast.');
slides[8] = new Slide('../Screenshots_files/visionchat7.jpg', '880', '1409', 'Report mode allows the moderator to create a queue of people and give them all a specified amount of time in order with which to give a report on something or voice their opinion on an issue.');
slides[9] = new Slide('../Screenshots_files/visionchat8.jpg', '880', '1409', 'Now that the queue has been constructed the first person gets their time in the middle and when their time is up the next person in the queue gets their turn.');
slides[10] = new Slide('../Screenshots_files/editor2.jpg', '936', '1491', 'This is VisionEditor, a program that visually modifies Construct trees.  Here we see a horizontal tree representation of Construct tree which we can inspect and change around to our liking.');
slides[11] = new Slide('../Screenshots_files/editor1.jpg', '936', '1491', 'In the Construct inspector we can change around values in an object and watch the changes in realtime.  Here we are changing the color of the upper right corner of a Panel object which you can seen in the middle of the screen.');
slides[12] = new Slide('../Screenshots_files/editor3.jpg', '936', '1491', 'Here we see a fairly complex object in the upper middle of the screen and the Construct tree that represents it below.  Again the color of it is being changed by the inspector in realtime.');
slides[13] = new Slide('../Screenshots_files/tunnel1.jpg', '702', '698', 'This is a packet tunneling program in which sniffed packets are representedby little squares, interfaces are represented by redish rectangles and remote computers are represented by blueish rectangles.  The red line between the ethernet interface and remote computer represents a connection.  We can see the packets streaming from the green nub on en0 to the red nub on 192.168.1.53.  Packets from 192.168.1.53 that have no where to go are just spit out radially and disappear.');
slides[14] = new Slide('../Screenshots_files/tunnel2.jpg', '702', '698', 'Very complex network configurations can easily be created by simply dragging connections from the different nubs to each other.  These configurations would typically take a long time to configure on the traditional command line interface.');
slides[15] = new Slide('../Screenshots_files/mesh1.jpg', '452', '496', 'This is a simple program that was whipped up in less than 30 minutes to visualize the output of a mesh reconnection program.');
slides[16] = new Slide('../Screenshots_files/mesh2.jpg', '452', '496', 'As the frames out the output are stepped through we can roate and zoom the output to whatever perspective we want.  Instead of writing a lot of 3D interaction code from scratch Vision\s frameworks were leveraged to get this visualization up and running very quickly.');
slides[17] = new Slide('../Screenshots_files/file1.jpg', '698', '697', 'This is an experimental file browsing program.  On the left side is the directory navigation on the right side is the file browser.  Depending on the contex of the directory the perspective will alter and scale.  Also of note is that two mice are required for this program, one for directory control and the other for file browsing.');
slides[18] = new Slide('../Screenshots_files/file2.jpg', '698', '697', 'The file browser on the right plays around with smooth curved motion and focused scaling.');
slides[19] = new Slide('../Screenshots_files/packet1.jpg', '699', '699', 'This is a packet sniffer that visualizes packets leaving the computer as going out from the center and those coming in as heading towards the center.  Green packets are TCP, red are UDP.  The computers they are going to/coming from are represented on the rings and they light up to hot white when a packet comes through and cool down if no more activity has happened.');
slides[20] = new Slide('../Screenshots_files/packet2.jpg', '699', '699', 'Network events such as a music stream can be distinctly visualized an isolated by  bringing the computer\s ip into inner orbitals.');
slides[21] = new Slide('../Screenshots_files/editorold1.jpg', '699', '696', 'This is an older version of VisionEditor in which the organization of tool palettes and panels is sphereical instead of flat.  You can also see a different kind of representation of the Construct trees here.');
slides[22] = new Slide('../Screenshots_files/editorold2.jpg', '699', '696', 'In this example we are creating the green menu shown in the center.');
slides[23] = new Slide('../Screenshots_files/editorold3.jpg', '699', '696', 'The user is centered in a sphere and interacts with the panels by dragging them around the sphere, pushing them out from/into the viewpoint as needed.');
isPureISOLatin1 = true;
contentEncodingConstant = 4;
feedbackURL = "TODO";
showFeedbackButton = false;
feedbackEnabled = true;

var MINIMUM_FONT = "10";
var UNITS = "";

function elementFontSize(element)
{
    var fontSize = MINIMUM_FONT; 

    if (document.defaultView)
    {
        fontSize = document.defaultView.getComputedStyle(element, null).getPropertyValue("font-size");
    }
    else if (element.currentStyle)
    {
        fontSize = element.currentStyle.fontSize;
    }

    if ((UNITS.length == 0) && (fontSize != MINIMUM_FONT))
    {
        UNITS = fontSize.substring(fontSize.length - 2, fontSize.length)
    }

    return parseFloat(fontSize);
}

function adjustFontSizeIfTooBig(idOfElement)
{
    var oTextBoxOuterDiv;
    var oTextBoxMiddleDiv;
    var oTextBoxInnerDiv;
    var oTextBoxOuterDiv = document.getElementById(idOfElement);
    
    if (oTextBoxOuterDiv)
    {
        oTextBoxMiddleDiv = getChildOfType(oTextBoxOuterDiv, "DIV", 0);
        if (oTextBoxMiddleDiv)
        {
            oTextBoxInnerDiv = getChildOfType(oTextBoxMiddleDiv, "DIV", 0);
            if (oTextBoxInnerDiv)
            {
                var oCachedHeight;
                if (windowsInternetExplorer)
                {
                    oCachedHeight = oTextBoxInnerDiv.style.height;
                    oTextBoxInnerDiv.style.height = "100px";
                }
                
                var clientHeight = oTextBoxInnerDiv.clientHeight;
                var specifiedHeight = clientHeight;
                if (oTextBoxMiddleDiv.style.height != "")
                {
                    specifiedHeight = parseFloat(oTextBoxMiddleDiv.style.height);
                }
                else if (oTextBoxOuterDiv.style.height != "")
                {
                    specifiedHeight = parseFloat(oTextBoxOuterDiv.style.height);
                }
                if ((windowsInternetExplorer) && (clientHeight == 100))
                {
                    clientHeight = specifiedHeight;
                }
                if (clientHeight > specifiedHeight)
                {
                    // compute smallest font in text box for scale purposes.
                    var smallestFontSize = 200;
                    
                    var aParaChildren = getParaDescendants(oTextBoxInnerDiv);
                    var oneLine = false;
                    for (i = 0; i < aParaChildren.length; i++)
                    {
                        var oParagraphDiv = aParaChildren[i];
                        var lineHeight = elementLineHeight(oParagraphDiv);
                        oneLine = oneLine || (lineHeight * 1.5 >= specifiedHeight);
                        if (oParagraphDiv.nodeName == "DIV")
                        {
                            var fontSize = elementFontSize(oParagraphDiv);
                            smallestFontSize = Math.min( smallestFontSize, fontSize );
                            for (j = 0; j < oParagraphDiv.childNodes.length; j++)
                            {
                                var oSpan = oParagraphDiv.childNodes[j];
                                if (oSpan.nodeName == "SPAN")
                                {
                                    fontSize = elementFontSize(oSpan);
                                    smallestFontSize = Math.min( smallestFontSize, fontSize );
                                }
                            }
                        }
                    }
                    var minimum = parseFloat(MINIMUM_FONT);
                    
                    var count = 0
                    while ((smallestFontSize > minimum) && (clientHeight > specifiedHeight) && (count < 10))
                    {
                        ++ count;
                        if (oneLine)
                        {
                            var oldWidth = parseInt(oTextBoxOuterDiv.style.width);
                            oTextBoxInnerDiv.style.width =
                                "" + oldWidth * Math.pow(1.05, count) + "px";
                        }
                        else
                        {
                            var scale = Math.max(0.95, minimum / smallestFontSize);
                            
                            // Scale all the fonts in the text box.
                            for (i = 0; i < aParaChildren.length; i++)
                            {
                                var oParagraphDiv = aParaChildren[i];
                                if (oParagraphDiv.nodeName == "DIV")
                                {
                                    var fontSize = elementFontSize(oParagraphDiv) * scale;
                                    oParagraphDiv.style.fontSize = fontSize + UNITS;
                                    oParagraphDiv.style.lineHeight = fontSize + UNITS;
                                    smallestFontSize = Math.min( smallestFontSize, fontSize );
                                    for (j = 0; j < oParagraphDiv.childNodes.length; j++)
                                    {
                                        var oSpan = oParagraphDiv.childNodes[j];
                                        if (oSpan.nodeName == "SPAN")
                                        {
                                            fontSize = elementFontSize(oSpan) * scale;
                                            oSpan.style.fontSize = fontSize + UNITS;
                                            oSpan.style.lineHeight = fontSize + UNITS;
                                            smallestFontSize = Math.min( smallestFontSize, fontSize );
                                        }
                                    }
                                }
                            }
                        }
                        
                        clientHeight = oTextBoxInnerDiv.clientHeight;
                    }
                }
                if (windowsInternetExplorer)
                {
                    oTextBoxInnerDiv.style.height = oCachedHeight;
                }
            }
        }
    }
}


function elementLineHeight(element)
{
    var lineHeight = MINIMUM_FONT; 
    
    if (document.defaultView)
    {
        lineHeight = document.defaultView.getComputedStyle(element, null).getPropertyValue("line-height");
    }
    else if (element.currentStyle)
    {
        lineHeight = element.currentStyle.lineHeight;
    }
    
    if ((UNITS.length == 0) && (lineHeight != MINIMUM_FONT))
    {
        UNITS = lineHeight.substring(lineHeight.length - 2, lineHeight.length)
    }
    
    return parseFloat(lineHeight);
}

function adjustLineHeightIfTooBig(idOfElement)
{
    var oTextBoxOuterDiv;
    var oTextBoxMiddleDiv;
    var oTextBoxInnerDiv;
    var oTextBoxOuterDiv = document.getElementById(idOfElement);
    
    if (oTextBoxOuterDiv)
    {
        oTextBoxMiddleDiv = getChildOfType(oTextBoxOuterDiv, "DIV", 0);
        if (oTextBoxMiddleDiv)
        {
            oTextBoxInnerDiv = getChildOfType(oTextBoxMiddleDiv, "DIV", 0);
            if (oTextBoxInnerDiv)
            {
                var oCachedHeight;
                if (windowsInternetExplorer)
                {
                    oCachedHeight = oTextBoxInnerDiv.style.height;
                    oTextBoxInnerDiv.style.height = "100px";
                }
                
                var clientHeight = oTextBoxInnerDiv.clientHeight;
                var specifiedHeight = clientHeight;
                if (oTextBoxMiddleDiv.style.height != "")
                {
                    specifiedHeight = parseFloat(oTextBoxMiddleDiv.style.height);
                }
                else if (oTextBoxOuterDiv.style.height != "")
                {
                    specifiedHeight = parseFloat(oTextBoxOuterDiv.style.height);
                }
                if ((windowsInternetExplorer) && (clientHeight == 100))
                {
                    clientHeight = specifiedHeight;
                }
                if (clientHeight > specifiedHeight)
                {
                    var adjusted = true;
                    var count = 0;
                    while ((adjusted) && (clientHeight > specifiedHeight) && (count < 10))
                    {
                        adjusted = false;
                        ++ count;
                        
                        // Scale all the line heights in the text box.
                        var aParaChildren = getParaDescendants(oTextBoxInnerDiv);
                        for (i = 0; i < aParaChildren.length; i++)
                        {
                            var oParagraphDiv = aParaChildren[i];
                            if (oParagraphDiv.nodeName == "DIV")
                            {
                                var fontSize = elementFontSize(oParagraphDiv);
                                var lineHeight = elementLineHeight(oParagraphDiv) * 0.95;
                                if (lineHeight >= (fontSize * 1.1))
                                {
                                    oParagraphDiv.style.lineHeight = lineHeight + UNITS;
                                    adjusted = true;
                                }
                                
                                
                                
                                for (j = 0; j < oParagraphDiv.childNodes.length; j++)
                                {
                                    var oSpan = oParagraphDiv.childNodes[j];
                                    if (oSpan.nodeName == "SPAN")
                                    {
                                        var fontSize = elementFontSize(oSpan);
                                        var lineHeight = elementLineHeight(oSpan) * 0.95;
                                        if (lineHeight >= (fontSize * 1.1))
                                        {
                                            oSpan.style.lineHeight = lineHeight + UNITS;
                                            var adjusted = true;
                                        }
                                    }
                                }
                            }
                        }
                        
                        clientHeight = oTextBoxInnerDiv.clientHeight;
                    }
                }
                if (windowsInternetExplorer)
                {
                    oTextBoxInnerDiv.style.height = oCachedHeight;
                }
            }
        }
    }
}

function adjustPositioningIfWrongSize(idOfElement, shrinkPadding, shrink)
{
    var oTextBoxOuterDiv;
    var oTextBoxMiddleDiv;
    var oTextBoxInnerDiv;
    var oTextBoxAlternateImage;
    var oImg;
    var adjustPositioning = false;
    var adjustmentPixels = 0;
    var oTextBoxOuterDiv = document.getElementById(idOfElement);
    if (oTextBoxOuterDiv)
    {
        oTextBoxMiddleDiv = getChildOfType(oTextBoxOuterDiv, "DIV", 0);
        if (oTextBoxMiddleDiv)
        {
            oTextBoxInnerDiv = getChildOfType(oTextBoxMiddleDiv, "DIV", 0);
            if (oTextBoxInnerDiv)
            {
                var oCachedHeight;
                if (windowsInternetExplorer)
                {
                    oCachedHeight = oTextBoxInnerDiv.style.height;
                    oTextBoxInnerDiv.style.height = "100px";
                }
                var clientHeight = oTextBoxInnerDiv.clientHeight;
                var specifiedHeight = clientHeight;
                if (oTextBoxMiddleDiv.style.height != "")
                {
                    specifiedHeight = parseFloat(oTextBoxMiddleDiv.style.height);
                }
                else if (oTextBoxOuterDiv.style.height != "")
                {
                    specifiedHeight = parseFloat(oTextBoxOuterDiv.style.height);
                }
                if ((windowsInternetExplorer) && (clientHeight == 100))
                {
                    clientHeight = specifiedHeight;
                }
                if (clientHeight > specifiedHeight || 
                    specifiedHeight > clientHeight + shrinkPadding )
                {
                    adjustPositioning = true;
                    adjustmentPixels = clientHeight - specifiedHeight;
                    if (specifiedHeight > clientHeight)
                    {
                      if (! shrink)
                      {
                          adjustPositioning = false;
                      }
                      else
                      {
                          adjustmentPixels += shrinkPadding;
                      }
                      
                    }
                }
                if (windowsInternetExplorer)
                {
                    oTextBoxInnerDiv.style.height = oCachedHeight;
                }
            }
        }
    }
    
    if (adjustPositioning)
    {
        var currentOuterHeight = parseInt(oTextBoxOuterDiv.style.height);
        var newOuterHeight = currentOuterHeight + adjustmentPixels;
        if( newOuterHeight <= 0 )        {            newOuterHeight = 1;        }        oTextBoxOuterDiv.style.height = "" + newOuterHeight + "px";

        oFooterLayer = document.getElementById("footer_layer");
        if (oFooterLayer)
        {
            var currentYPos = parseInt(oFooterLayer.style.top);
            var newYPos = currentYPos + adjustmentPixels;
            oFooterLayer.style.top = "" + newYPos + "px";
        }

        oBodyLayer = document.getElementById("body_layer");
        if (oBodyLayer)
        {
            var currentBodyLayerHeight = parseInt(oBodyLayer.style.height);
            var newBodyLayerHeight = currentBodyLayerHeight + adjustmentPixels;
            oBodyLayer.style.height = "" + newBodyLayerHeight + "px";
        }

        oBodyContentDiv = document.getElementById("bodyContent");
        if (oBodyContentDiv)
        {
            var currentBodyContentHeight = parseInt(oBodyContentDiv.style.height);
            var newBodyContentHeight = currentBodyContentHeight + adjustmentPixels;
            oBodyContentDiv.style.height = "" + newBodyContentHeight + "px";
        }

        oNavLayer = document.getElementById("nav_layer");
        if(oNavLayer)
        {
            var currentNavLayerHeight = parseInt(oNavLayer.style.height);
            var diff = currentNavLayerHeight - currentBodyContentHeight;
            if ((diff > -10) && (diff < 10))
            {
                var newNavLayerHeight = currentNavLayerHeight + adjustmentPixels;
                oNavLayer.style.height = "" + newNavLayerHeight + "px";

                oNavBG = getChildOfType(oNavLayer, "DIV", 0);
                if (oNavBG)
                {
                    var currentNavBGHeight = parseInt(oNavBG.style.height);
                    var newNavBGHeight = currentNavBGHeight + adjustmentPixels;
                    oNavBG.style.height = "" + newNavBGHeight + "px";
                }
            }
        }

    }
}
var smallTransparentGif = "";
function fixupIEPNG(strImageID, transparentGif) 
{
    smallTransparentGif = transparentGif;
    if (windowsInternetExplorer)
    {
        var img = document.getElementById(strImageID);
        if (img)
        {
            var src = img.src;
            img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
            img.src = transparentGif;
            img.attachEvent("onpropertychange", imgPropertyChanged);
        }
    }
}

function fixupIEPNGBG(strImageID) 
{
    if (windowsInternetExplorer)
    {
        var oBlock = document.getElementById(strImageID);
        if (oBlock)
        {
            var currentBGStyle = oBlock.style.background;
            var urlStart = currentBGStyle.indexOf("url(");
            var urlEnd = currentBGStyle.indexOf(")", urlStart);
            var imageURL = currentBGStyle.substring(urlStart + 4, urlEnd);
            var filterStyle =
                "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                imageURL +
                "', sizingMethod='crop');";

            oBlock.style.filter = filterStyle;
            oBlock.style.background = "";
        }
    }
}

function getChildOfType(oParent, sNodeName, requestedIndex)
{
    var index = 0;
    for (i = 0; i < oParent.childNodes.length; i++)
    {
        if (oParent.childNodes[i].nodeName == sNodeName)
        {
            if (index == requestedIndex)
            {
                return oParent.childNodes[i];
            }
            else
            {
                index++;
            }
        }
    }
    return null;
}

function getParaDescendantsRec(oAncestor, aResultArray, index)
{
    if (index == -1)
    {
        if ((oAncestor.nodeName == "DIV") &&
            (oAncestor.className.lastIndexOf("paragraph") != -1))
        {
            aResultArray[aResultArray.length] = oAncestor;
        }
        else if ((oAncestor.nodeName == "DIV") ||
                 (oAncestor.nodeName == "LI") ||
                 (oAncestor.nodeName == "OL") ||
                 (oAncestor.nodeName == "UL"))
        {
            getParaDescendantsRec(oAncestor, aResultArray, 0);
        }
    }
    else
    {
        getParaDescendantsRec(oAncestor.childNodes[index], aResultArray, -1);
        if (index < (oAncestor.childNodes.length - 1))
        {
            getParaDescendantsRec(oAncestor, aResultArray, index + 1);
        }
    }
}

function getParaDescendants(oAncestor)
{
    var aResultArray = new Array();
    getParaDescendantsRec(oAncestor, aResultArray, -1);

    return aResultArray;
}

var windowsInternetExplorer = false;
function detectBrowser()
{
    windowsInternetExplorer = false;
    var appVersion = navigator.appVersion;
    if ((appVersion.indexOf("MSIE") != -1) &&
        (appVersion.indexOf("Macintosh") == -1))
    {
        windowsInternetExplorer = true;
    }
}

var inImgPropertyChanged = false;
function imgPropertyChanged()
{
    if ((window.event.propertyName == "src") && (! inImgPropertyChanged))
    {
        inImgPropertyChanged = true;
        var el = window.event.srcElement;
        if (el.src != smallTransparentGif)
        {
            el.filters.item(0).src = el.src;
            el.src = smallTransparentGif;
        }
        inImgPropertyChanged = false;
    }
}

function onPageLoad()
{
    detectBrowser();
    fixupIEPNGBG("id1");
    adjustPositioningIfWrongSize("id2", 50, 1);
    adjustLineHeightIfTooBig("id3");
    adjustFontSizeIfTooBig("id3");
    fixupIEPNG("id4", "Screenshots_files/transparent.gif");
    fixupIEPNGBG("id5");
    fixupIEPNGBG("id6");
    fixupIEPNGBG("id7");
    fixupIEPNGBG("id8");
    fixupIEPNGBG("id9");
    fixupIEPNGBG("id10");
    fixupIEPNGBG("id11");
    fixupIEPNGBG("id12");
    fixupIEPNGBG("id13");
    fixupIEPNGBG("id14");
    fixupIEPNGBG("id15");
    fixupIEPNGBG("id16");
    fixupIEPNGBG("id17");
    fixupIEPNGBG("id18");
    fixupIEPNGBG("id19");
    fixupIEPNGBG("id20");
    fixupIEPNGBG("id21");
    fixupIEPNGBG("id22");
    fixupIEPNGBG("id23");
    fixupIEPNGBG("id24");
    fixupIEPNGBG("id25");
    fixupIEPNGBG("id26");
    fixupIEPNGBG("id27");
    fixupIEPNGBG("id28");
    fixupIEPNG("id29", "Screenshots_files/transparent.gif");
    fixupIEPNG("id30", "Screenshots_files/transparent.gif");
    return true;
}