// tribe.js
// Justin Evans
// TribeAgency, LLC
// Requires /functions/prototype.js
// Requires /functions/scriptaculous.js
// Requires /functions/dragdrop.js
// Requires /functions/lightWindow.js
// Requires /functions/browser.js

window.onresize = function () { setMainHeight() };

var BAlimit = 12;
var Glimit = 22; // Change based on number of before/after entries
var BAdepth = 3; // index, pair, pair before & after
var Gdepth = 4; // id, thumb-nail, full-size image, caption
var arrBeforeAfter = new Array(2);

// Detect browser
var browser = new BrowserDetect();

// Functions

function initialize()
{

    // Call DOM Functions
    setMainHeight();
    stretchColumn();
    setMenuClass();
    //initBeforeAfter();

    if($('gallery'))
    {
        //initBeforeAfter();
        populateBeforeAfter();
        getBeforeAfter(0);
    }
    //alert("Initialize");
    if($('ctl00_MasterContent_map'))
    {
        activateFlash("ctl00_MasterContent_map", "/Locator/map_v2.swf", "Class Locator", "465", "385", "6");
        //alert("Hello");
    }
    
    if($('flashContent'))
    {
        activateFlash("flashContent", "/flash/index.swf", "Young Rembrandts", "753", "209", "6");
    }
    return(null);
}

function stretchColumn()
{
    var contentHeight = 0;
    var quoteHeight = 0;
    var spifHeight = 0;
    var signupHeight = 0;
    var footerHeight = 0;
    var minHeight = 0;
    var marginHeight = 30; // margin offset

    if($('content') && $('spif') && $('signup') && $('footer'))
    {
        contentHeight = $('content').offsetHeight;
       
        if($('quote'))
        {
            quoteHeight = $('quote').offsetHeight;
        }
        
        spifHeight = $('spif').offsetHeight;
        signupHeight = $('signup').offsetHeight;
        footerHeight = $('footer').offsetHeight;
        minHeight = spifHeight + signupHeight;
        
        if($('quote'))
        {
            minHeight += quoteHeight;
        }

        if((contentHeight - footerHeight - marginHeight) > minHeight)
        {
            signupHeight = contentHeight - spifHeight - footerHeight;
            if($('quote'))
            {
                signupHeight -= quoteHeight;
            }
           // $('signup').style.height = signupHeight + "px";

        }
    }
    
    return(null);
}
function openInfoDialog() 
{  
    if(Page_ClientValidate(""))
    {
        Dialog.info("Please wait while your transaction is being processed...", {width:250, height:100, showProgress: true});
    }
} 
function setMainHeight()
{
    var mainHeight = 0;
    var windowHeight = window.innerHeight;
    
    if($('main'))
    {
        mainHeight = $('main').offsetHeight;
        if(windowHeight > mainHeight)
        {
            $('main').style.height = windowHeight + "px";
        } else {
            $('main').style.height = '';
        }
    }
    
    return(null);
}

function rollOver(elementId, newClass)
{
    var currentClass = "";

    if($(elementId) && newClass != "")
    {
        currentClass = $(elementId).className;
        
        if(currentClass != newClass)
        {
            $(elementId).className = newClass;
            $(elementId + 'Sub').onmouseout = function() {
                    $(elementId).className = currentClass;
                };
        }
    }
    
    return(null);
}

function setMenuClass()
{
    var strLocation = "" + window.location + "";
    var arrUrlSegments = strLocation.split("/");
    
    switch(arrUrlSegments[3])
    {
        case "About":
            if($('navAbout'))
            {
                $('navAbout').className = "navAboutOn";
            }
            break;
        case "Programs":
            if($('navPrograms'))
            {
                $('navPrograms').className = "navProgramsOn";
            }
            break;
        case "Locator":
            if($('navLocator'))
            {
                $('navLocator').className = "navLocatorOn";
            }
            break;
        case "Testimonials":
            if($('navTestimonials'))
            {
                $('navTestimonials').className = "navTestimonialsOn";
            }
            break;
        case "Showcase":
            if($('navShowcase'))
            {
                $('navShowcase').className = "navShowcaseOn";
            }
            break;
        case "Resources":
            if($('navResources'))
            {
                $('navResources').className = "navResourcesOn";
            }
            break;
        default:
            break;
    }
    
    return(null);
}

function closeWindow(objCSSWindow)
{
    if(objCSSWindow)
    {
        objCSSWindow.style.display='';
        objCSSWindow.style.display='none';
        if($('imageFullSize'))
        {
            // Clean up / clear div image on close to prepare for next popup
            $('imageFullSize').src='';
        }
    }
}

function changeCursor()
{
    document.body.style.cursor="move";
    return(null);
}

function revertCursor()
{
    document.body.style.cursor="default";
    return(null);
}

function getDetail(imageDetail, detailDirectory)
{
    var offsetPosition = 0;
    var imageHeight = 0;
    var imageWidth = 0;
    var arrURLSegments;
    var newImageURL = "";
    var newImage = "";
    var winLoc = "" + window.location + "";
    var arrLocationSegments = winLoc.split("/");
    var imageDomain = "http://" + arrLocationSegments[2] + detailDirectory;
    var imageDetailSource = imageDomain + imageDetail;
    var x,y;
    
    if (self.pageYOffset) // all except Explorer
    {
	    x = self.pageXOffset;
	    y = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop)
	    // Explorer 6 Strict
    {
	    x = document.documentElement.scrollLeft;
	    y = document.documentElement.scrollTop;
    }
    else if (document.body) // all other Explorers
    {
	    x = document.body.scrollLeft;
	    y = document.body.scrollTop;
    }

    if($('imgDetail') && $('imageFullSize') && imageDetail)
    {

        if($('imgDetail').style.display != 'block')
        {
            $('imgDetail').style.display = 'block'; // Show detail image div
            new Draggable('imgDetail',{revert:false});
            
            //new Effect.Fade('imageFullSize', { duration: 0.3 });
            
            // Get domain to create full image src path
            $('imageFullSize').src = imageDetailSource;
            
            Element.hide('imageFullSize');
            new Effect.Appear('imageFullSize', { duration: 0.6 });
            if(browser.isIE6x)
            {
                $('imgDetail').style.position = "absolute";
            }
            else
            {
                    $('imgDetail').style.position = "fixed";
            }
            $('imgDetail').style.top = '0px;'; // reset top offset
            $('imgDetail').style.left = Math.round(x) + 'px;'; // reset left offset
        
        } else {
                newImageURL = $('imageFullSize').src;
                
                new Draggable('imgDetail',{revert:false});
                
                if(newImageURL != imageDetailSource)
                {
                                    
                    $('imageFullSize').src = imageDetailSource;
                    
                    $('imageFullSize').src=imageDetailSource;
                    Element.hide('imageFullSize');
                    new Effect.Appear('imageFullSize', { duration: 0.3 });

            }
        }
    }
}


function swapNavPosition(navId)
{
    if($(navId))
    {
        var arrNavIds = new Array(3);
        arrNavIds[0] = "link2";
        arrNavIds[1] = "link4";
        arrNavIds[2] = "link6";
        
        $(navId).style.position = "relative";
        if(browser.isIE6x)
        {
            for(var i = 0; i<arrNavIds.length;i++)
            {
                if(navId != arrNavIds[i])
                {
                    $(arrNavIds[i]).style.position = "absolute";
                }
            }
        }
    
    }

}

function getBeforeAfter(index)
{
    var nextLink = "";
    var imgBefore = "";
    var descriptionBefore = "";
    
    var previousLink = "";
    var imgAfter = "";
    var descriptionAfter = "";
    
    var category = "";
    
    if(index >= 0 && index < BAlimit)
    {
        category = arrBeforeAfter[index][0][0];
        previousLink = getPreviousBeforeAfter(index);
        imgBefore = arrBeforeAfter[index][0][1];
        descriptionBefore = arrBeforeAfter[index][0][2];
        
        nextLink = getNextBeforeAfter(index);
        imgAfter = arrBeforeAfter[index][1][1];
        descriptionAfter = arrBeforeAfter[index][1][2];
        
        // Update elements on page
        
        // Before
        
        if($('galleryBefore'))
        {
            $('galleryBefore').onclick=function(){ getBeforeAfter(previousLink); }
        }
        if($('beforeImg'))
        {
            $('beforeImg').src = imgBefore;
        }
        if($('contentBefore'))
        {
            $('contentBefore').innerHTML = '';
            $('contentBefore').innerHTML = descriptionBefore;
        }
        
        // After
        if($('galleryAfter'))
        {
            $('galleryAfter').onclick=function(){ getBeforeAfter(nextLink); };
        }
        if($('afterImg'))
        {
            $('afterImg').src = imgAfter;
        }
        if($('contentAfter'))
        {
            $('contentAfter').innerHTML = descriptionAfter;
        }
        
        // Clear and then reassign classes to defaut, then assign selected class to current category
        
        resetGalleryCategoryClasses();

        $(category).className='galleryLinkSelected';
    }
        
}

function resetGalleryCategoryClasses()
{
    // Add any Safari state management tricks here
    
    var defaultClass = "galleryLink";
    
    $('galleryFaces').className='';
    $('galleryFaces').className=defaultClass;
    $('galleryHouses').className='';
    $('galleryHouses').className=defaultClass;
    $('galleryPortraits').className='';
    $('galleryPortraits').className=defaultClass;
    $('galleryHouses2Story').className='';
    $('galleryHouses2Story').className=defaultClass;
    $('galleryColoring').className='';
    $('galleryColoring').className=defaultClass;
}

function getNextBeforeAfter(index)
{
    category = arrBeforeAfter[index][0][0];
    index++;
    if(index >= 0 && index < BAlimit)
    {
        return(index);
    } else {
        return(0);
    }
}

function getPreviousBeforeAfter(index)
{
    category = arrBeforeAfter[index][0][0];
    index--;
    if(index >= 0 && index < BAlimit)
    {
        return(index);
    } else {
        return(BAlimit - 1);
    }
}

function initializeBeforeAfter(objXml)
{
    var category = "";
    var imageBefore = "";
    var captionBefore = "";
    var imageAfter = "";
    var captionAfter = "";

    var gallery = objXml.getElementsByTagName("gallery");
    var categories = gallery[0].childnodes;
    // Data-Structure initilazation
    // Gallery size definitions

    BAlimit = gallery[0].childNodes.length; // Set dynamically by XML file
    if($('maxItems'))
    {
        $('maxItems').value = BAlimit;
    }
    var Glimit = 16; // 16 for now, 8 pairs
    var BAdepth = 3; // index, pair, pair before & after
    var Gdepth = 4; // id, thumb-nail, full-size image, caption
    
    var arrGallery = new Array(Glimit);

    for(var i=0; i<(BAlimit); i++)
    {
        // Create pair, then assign parameters to both items in pair for Before & After

        arrBeforeAfter[i] = new Array(2);    
	    arrBeforeAfter[i][0] = new Array(BAdepth);
	    arrBeforeAfter[i][1] = new Array(BAdepth);
    }

    for(var i=0; i<Glimit; i++)
    {
	    arrGallery[i] = new Array(Gdepth); // Array(4) stores id, thumb-nail, full-size image, caption
    }
	for (var j=0;j<gallery[0].childNodes.length;j++) // loop through pairs
	{
		category = categories[j].attributes[0].value;
		imageBefore = categories[j].firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
		captionBefore = categories[j].firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
		imageAfter = categories[j].firstChild.childNodes[1].childNodes[0].firstChild.nodeValue;
		captionAfter = categories[j].firstChild.childNodes[1].childNodes[1].firstChild.nodeValue;
		
		arrBeforeAfter[j][0][0] = category;
		arrBeforeAfter[j][0][1] = imageBefore;
		arrBeforeAfter[j][0][2] = captionBefore;
		
		arrBeforeAfter[j][1][0] = category;
		arrBeforeAfter[j][1][1] = imageAfter;
		arrBeforeAfter[j][1][2] = captionAfter;

		//alert(j + " " + category + " " + imageBefore + " " + captionBefore + " " + imageAfter + " " + captionAfter);
	}
	getBeforeAfter(0);
}


function initBeforeAfter()
{
    //var url = "/Showcase/data.xml";
    var url = "/Ajax/Lookup.aspx";
    var xml = new JKL.ParseXML( url );
    var data = xml.parse();
    
    document.write( data[0] );
   
    var category = "";
    var imageBefore = "";
    var captionBefore = "";
    var imageAfter = "";
    var captionAfter = "";

    var gallery = objXml.getElementsByTagName("gallery");
    var categories = gallery[0].childnodes;
    // Data-Structure initilazation
    // Gallery size definitions

    BAlimit = gallery[0].childNodes.length; // Set dynamically by XML file
    if($('maxItems'))
    {
        $('maxItems').value = BAlimit;
    }
    var Glimit = 16; // 16 for now, 8 pairs
    var BAdepth = 3; // index, pair, pair before & after
    var Gdepth = 4; // id, thumb-nail, full-size image, caption
    
    var arrGallery = new Array(Glimit);

    for(var i=0; i<(BAlimit); i++)
    {
        // Create pair, then assign parameters to both items in pair for Before & After

        arrBeforeAfter[i] = new Array(2);    
	    arrBeforeAfter[i][0] = new Array(BAdepth);
	    arrBeforeAfter[i][1] = new Array(BAdepth);
    }

    for(var i=0; i<Glimit; i++)
    {
	    arrGallery[i] = new Array(Gdepth); // Array(4) stores id, thumb-nail, full-size image, caption
    }
	for (j=0;j<gallery[0].childNodes.length;j++) // loop through pairs
	{
		category = categories[j].attributes[0].value;
		imageBefore = categories[j].firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
		captionBefore = categories[j].firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
		imageAfter = categories[j].firstChild.childNodes[1].childNodes[0].firstChild.nodeValue;
		captionAfter = categories[j].firstChild.childNodes[1].childNodes[1].firstChild.nodeValue;
		
		arrBeforeAfter[j][0][0] = category;
		arrBeforeAfter[j][0][1] = imageBefore;
		arrBeforeAfter[j][0][2] = captionBefore;
		
		arrBeforeAfter[j][1][0] = category;
		arrBeforeAfter[j][1][1] = imageAfter;
		arrBeforeAfter[j][1][2] = captionAfter;

		//alert(j + " " + category + " " + imageBefore + " " + captionBefore + " " + imageAfter + " " + captionAfter);
	}
	getBeforeAfter(0);
}

function populateBeforeAfter()
{
    // index = array index
    // arrBeforeAfter[index][0] -> Before
    // arrBeforeAfter[index][1] -> After

    // arrBeforeAfter[index][0][0] = category;
    // arrBeforeAfter[index][0][1] = thumbnail;
    // arrBeforeAfter[index][0][2] = description;
    
    if($('gallery'))
    {
        // Override BALimit with length of data
        
        var arrGallery = new Array(Glimit);

        for(var i=0; i<(BAlimit); i++)
        {
            // Create pair, then assign parameters to both items in pair for Before & After

            arrBeforeAfter[i] = new Array(2);    
	        arrBeforeAfter[i][0] = new Array(BAdepth);
	        arrBeforeAfter[i][1] = new Array(BAdepth);
        }

        // This will be populated either from database or XML file
        // If this array is populated properly on startup regardless
        // of datasource, calling getBeforeAfter(arrayIndex) will always work
        // Note: (XML) BAlimit variable will always need to be set to sum of
        // all nodes under <pair></pair> for gallery to initialize
        // and all "galleryXXXX" section links will need to be set to the first
        // node under "pair" for each category.

        // Pair 1
        // Before
        arrBeforeAfter[0][0][0] = "galleryFaces";
        arrBeforeAfter[0][0][1] = "/images/showcase/before_after/faces_s1_b.gif";
        arrBeforeAfter[0][0][2] = "This child understands the basic elements of a face. Notice the size of the face and features.";
        
        // After
        arrBeforeAfter[0][1][0] = "galleryFaces";
        arrBeforeAfter[0][1][1] = "/images/showcase/before_after/faces_s1_a.gif";
        arrBeforeAfter[0][1][2] = "This drawing shows a dramatic improvement. The child has filled the page with the face by increasing its size and volume. The child also added more details to complete the drawing, including a neck, earrings and eye lashes. Notice the teeth have become small rectangles and the amount of detail has increased enormously in the eyes.";
        
        // Pair 2
        // Before
        arrBeforeAfter[1][0][0] = "galleryFaces";
        arrBeforeAfter[1][0][1] = "/images/showcase/before_after/faces_s2_b.gif";
        arrBeforeAfter[1][0][2] = "This drawing shows the child understands and can draw the basic elements of a face.";
        
        // After
        arrBeforeAfter[1][1][0] = "galleryFaces";
        arrBeforeAfter[1][1][1] = "/images/showcase/before_after/faces_s2_a.gif";
        arrBeforeAfter[1][1][2] = "With observation and instruction, this child easily adds more detail (teeth, eyelashes, pupils, a neck etc.). Notice the size and volume of the face has increased to better fill the page. The addition of a neck &quot;grounds&quot; the picture and keeps the head from &quot;floating&quot; in space.";
        
        // Pair 3
        // Before
        arrBeforeAfter[2][0][0] = "galleryFaces";
        arrBeforeAfter[2][0][1] = "/images/showcase/before_after/faces_s3_b.gif";
        arrBeforeAfter[2][0][2] = "This child understands basic facial features, but their placement is unorganized.";
        
        // After
        arrBeforeAfter[2][1][0] = "galleryFaces";
        arrBeforeAfter[2][1][1] = "/images/showcase/before_after/faces_s3_a.gif";
        arrBeforeAfter[2][1][2] = "This drawing is more organized with the facial features in appropriate places, as well as more form and detail in each feature. We also see the face is secured with a neck. Notice the different line treatments in the hair and how the bangs differ from the hair on the scalp. Also, the placement of the ears is more realistic and the teeth have become small rectangles.";
        
        // Pair 4
        // Before
        arrBeforeAfter[3][0][0] = "galleryFaces";
        arrBeforeAfter[3][0][1] = "/images/showcase/before_after/faces_s4_b.gif";
        arrBeforeAfter[3][0][2] = "This child shows levels of advancement.  She understands the placement of facial features, in addition to the size of the elements as a whole. This child has a good sense of proportion and spatial awareness.";
        
        // After
        arrBeforeAfter[3][1][0] = "galleryFaces";
        arrBeforeAfter[3][1][1] = "/images/showcase/before_after/faces_s4_a.gif";
        arrBeforeAfter[3][1][2] = "Here we see a further development of the child's abilities.  The features are larger, more detailed and representational, including a neck. The ears are positioned correctly, the mouth is open to reveal upper and lower teeth, and the eyes are more realistically shaped, including lashes and brows.  In addition, the hair follows growth lines.";
        
        // Paging LINK
        $('galleryFaces').href='javascript:getBeforeAfter(0);';
        
        // Pair 5
        // Before
        arrBeforeAfter[4][0][0] = "galleryHouses";
        arrBeforeAfter[4][0][1] = "/images/showcase/before_after/houses_s1_b.gif";
        arrBeforeAfter[4][0][2] = "This child has drawn a house with basic elements.";
        
        // After
        arrBeforeAfter[4][1][0] = "galleryHouses";
        arrBeforeAfter[4][1][1] = "/images/showcase/before_after/houses_s1_a.gif";
        arrBeforeAfter[4][1][2] = "After observation and instruction we see greater detail, including a ground line to secure the house, a sidewalk, sun, rain and a rainbow. As the Instructor suggested the students draw something in the sky, this child began with a sun, and then added the cloud, rain and a rainbow. These steps occurred while talking quietly through the cycle of sun, water and rainbows. The exercise of drawing gave this child a vehicle for other thought processes and increased communication.";
        
        // Pair 6
        // Before
        
        arrBeforeAfter[5][0][0] = "galleryHouses";
        arrBeforeAfter[5][0][1] = "/images/showcase/before_after/houses_s2_b.gif";
        arrBeforeAfter[5][0][2] = "This child is aware of the basic shapes of a house, but they are unordered and out of place.  He has not yet learned how to put them together representationally.";
        
        // After
        arrBeforeAfter[5][1][0] = "galleryHouses";
        arrBeforeAfter[5][1][1] = "/images/showcase/before_after/houses_s2_a.gif";
        arrBeforeAfter[5][1][2] = "The same child has drawn a house again with all elements in ordered placement. The ground line and sidewalk secure the house. Therefore, the child can add many additional elements to the scene. Having this order and foundation provides the child opportunity to move further in his drawing and communication abilities, while thinking through his world and experiences.";
        
        // Paging LINK
        $('galleryHouses').href='javascript:getBeforeAfter(4);';
        
        // Pair 7
        // Before
        arrBeforeAfter[6][0][0] = "galleryPortraits";
        arrBeforeAfter[6][0][1] = "/images/showcase/before_after/portraits_s1_b.gif";
        arrBeforeAfter[6][0][2] = "This child's first drawing has basic detail, but is not realistic while it is floating on the page.";
        
        // After
        arrBeforeAfter[6][1][0] = "galleryPortraits";
        arrBeforeAfter[6][1][1] = "/images/showcase/before_after/portraits_s1_a.gif";
        arrBeforeAfter[6][1][2] = "After the guided observation and instruction, this drawing presents more realistic features, including a neck and shoulders. The eyes contain more details. The hair and mouth follow more realistic form and the ears have been added.";
        
        // Pair 8
        // Before
        arrBeforeAfter[7][0][0] = "galleryPortraits";
        arrBeforeAfter[7][0][1] = "/images/showcase/before_after/portraits_s2_b.gif";
        arrBeforeAfter[7][0][2] = "This child's first drawing lacks realism but still includes many details. The size of the face is small and it is also floating on the page.";
        
        // After
        arrBeforeAfter[7][1][0] = "galleryPortraits";
        arrBeforeAfter[7][1][1] = "/images/showcase/before_after/portraits_s2_a.gif";
        arrBeforeAfter[7][1][2] = "With guided observation and instruction, this drawing is a more realistic, mature representation of a face. It includes accurate placement of facial features, as well as a neck and shoulders. The features have realistic form, as does the hair and figure overall.";
        
        // Paging LINK
        $('galleryPortraits').href='javascript:getBeforeAfter(6);';
       
        // Pair 9
        // Before
        arrBeforeAfter[8][0][0] = "galleryHouses2Story";
        arrBeforeAfter[8][0][1] = "/images/showcase/before_after/2st_house_s1_b.gif";
        arrBeforeAfter[8][0][2] = "This elementary student has drawn a house with the basic elements.";
        
        // After
        arrBeforeAfter[8][1][0] = "galleryHouses2Story";
        arrBeforeAfter[8][1][1] = "/images/showcase/before_after/2st_house_s1_a.gif";
        arrBeforeAfter[8][1][2] = "After the discussion of drawing a two-story house, this drawing has greater detail.  Notice the proportion between the stories of the house, detail in the columns, porch railings and front steps. The drawing also includes background scenery, a sidewalk and a ground line to anchor the house. The student added many details to &quot;personalize&quot; their drawing.";
        
        // Pair 10
        // Before
        arrBeforeAfter[9][0][0] = "galleryHouses2Story";
        arrBeforeAfter[9][0][1] = "/images/showcase/before_after/2st_house_s2_b.gif";
        arrBeforeAfter[9][0][2] = "This elementary child's first house drawing is detailed and includes some perspective to show depth.";
        
        // After
        arrBeforeAfter[9][1][0] = "galleryHouses2Story";
        arrBeforeAfter[9][1][1] = "/images/showcase/before_after/2st_house_s2_a.gif";
        arrBeforeAfter[9][1][2] = "After discussion about drawing a two-story house, the same child has drawn a frontal view of a house with more detail. Notice the proportion between the elements of the house. Wonderful amounts of detail flow through the drawing especially in the roof, shutters, columns, railing, steps and doors.  A mailbox and garden arch are creative additions.";
        
        // Paging LINK
        $('galleryHouses2Story').href='javascript:getBeforeAfter(8);';
        
        // Pair 11
        // Before
        arrBeforeAfter[10][0][0] = "galleryColoring";
        arrBeforeAfter[10][0][1] = "/images/showcase/before_after/color_s1_b.gif";
        arrBeforeAfter[10][0][2] = "This elementary student has colored the house with a narrow collection of color choices.";
        
        // After
        arrBeforeAfter[10][1][0] = "galleryColoring";
        arrBeforeAfter[10][1][1] = "/images/showcase/before_after/color_s1_a.gif";
        arrBeforeAfter[10][1][2] = "After being introduced to coloring techniques, this elementary student has expanded their color palette and introduced more color choices in their drawing, while also focusing on more details of the house.";
        
        // Pair 12
        // Before
        arrBeforeAfter[11][0][0] = "galleryColoring";
        arrBeforeAfter[11][0][1] = "/images/showcase/before_after/color_s2_b.gif";
        arrBeforeAfter[11][0][2] = "This student has colored their house with limited colors, covering the small details of the house.";
        
        // After
        arrBeforeAfter[11][1][0] = "galleryColoring";
        arrBeforeAfter[11][1][1] = "/images/showcase/before_after/color_s2_a.gif";
        arrBeforeAfter[11][1][2] = "This student's second colored house shows more color choices. The borders, shades and windows have a variety of colors to pull the details forward. The coloring is richer and has more impact.";

        // Paging LINK
        $('galleryColoring').href='javascript:getBeforeAfter(10);';
        
    }
}

//Configurable popup window
function popWindow(url,title,h,w,offx,offy)
{
		window.open(url,title,'height='+h+',width='+w+',screenX='+offx+', screenY='+offy+',screenLeft='+offx+', screenTop='+offy);
}



// SWF Object

function activateFlash(strDivName, strSwf, strTitle, strWidth, strHeight, strVersion)
{
    if($(strDivName)){
	    var fo = new SWFObject(strSwf, strTitle, strWidth, strHeight, strVersion, "#ffffff");
	    fo.addParam("wmode", "opaque");
	    fo.write($(strDivName));
	}
}

function setRangeValues()
{
    if($('selRangeTypes') && $('selFrom') && $('selTo'))
    {
        if($('selRangeTypes').value == 1)
        {
            // clear drop-downs
            $('selFrom').options.length = 0;
            $('selTo').options.length = 0;
            var value;
            var text;
            
            for(var i = 0; i<12; i++)
            {
                
                value = i + 3;

                if(value == 3)
                {
                    text = "3 1/2"
                }
                else
                {
                    text = value;
                }
                $('selTo').options[i] = new Option(text, value);
                $('selFrom').options[i] = new Option(text, value);
            }
        }
        else
        {
            // clear drop-downs
            $('selFrom').options.length = 0;
            $('selTo').options.length = 0;
            
            for(var x = -1; x<9; x++)
            {
                if(x == -1)
                {
                    $('selTo').options[x+1] = new Option("Pre K", -1);
                    $('selFrom').options[x+1] = new Option("Pre K", -1);
                }
                else if(x == 0)
                {
                      $('selTo').options[x+1] = new Option("K", x);
                      $('selFrom').options[x+1] = new Option("K", x);
                }
                else
                {
                    $('selTo').options[x+1] = new Option("" + x + "", x);
                    $('selFrom').options[x+1] = new Option("" + x + "", x);
                }
            }
        }
    }
}

function toggleCalendar(calId, buttonId)
{
    var slideDuration = 0.5;
    if($(calId) && $(buttonId))
    {
        if($(calId).style.display=="none")
        {
            var x = new Effect.SlideDown(calId, {duration:slideDuration});
            $(buttonId).innerHTML = "Hide Calendar";
        }
        else
        {
            var y = new Effect.SlideUp(calId, {duration:slideDuration});
            $(buttonId).innerHTML = "Show Calendar";
        }
    }
}


function confirmSignup()
{
    var elemVal1 = $('ctl00_RightColumnModule_Signup_txtEmailVaidator');
    var elemVal2 = $('ctl00_RightColumnModule_Signup_txtEmailRegexValidator');
    var elemSignup = $('ctl00_RightColumnModule_Signup_txtEmail');
    
    // If on the home page the element IDs will differ
    if(elemVal1 == null && elemVal2 == null && elemSignup == null)
    {
        elemVal1 = $('RightColumnModule_Signup_txtEmailVaidator');
        elemVal2 = $('RightColumnModule_Signup_txtEmailRegexValidator');
        elemSignup = $('RightColumnModule_Signup_txtEmail');  
    }

    if(elemVal1.style.display == "none" && elemVal2.style.display == "none" && elemSignup.value != "")
    {
        alert("Thank you for signing up for the newsletter. A confirmation email will be sent to the address you specified.");        
    }

    
    return false;
}

function Check_Accept(sender, args)
{
    if($('ctl00_MasterContent_chkAccept').checked)
    {
        args.IsValid=true;
    }
    else
    {
        args.IsValid=false;
    }
}

function PopUp( )
{
    var win = new Window(
    {
        className: "alert", 
        id: "popup_window",
        url: "/Franchise/Contact.aspx",
        destroyOnClose: true,
        width:350, height:400, 
        zIndex: 1200, 
        minimizable: false,
        maximizable: false,
        closable: false,
        resizable: false, 
        showEffect:Effect.BlindDown, 
        hideEffect: Effect.SwitchOff, 
        draggable: false, 
        wiredDrag: false
    });
    win.showCenter(); 
    CreateCloseButton( );
}
function CreateCloseButton( )
{
    var a = document.createElement("a");
    a.id = "CloseButton";
    a.onclick = ClosePopUp;
    
    var img = document.createElement("img");
    img.src = "/images/closelabel.gif";
    img.alt = "Close";
    
    a.appendChild(img);
    document.getElementById("popup_window").appendChild(a);
    
    var div = document.createElement("div");
    div.className = "overlay_alert";
    div.id = "popup_overlay";
    document.body.appendChild(div);
}
function ClosePopUp( )
{
    var div = document.getElementById("popup_overlay");
    div.parentNode.removeChild(div);
    Windows.closeAll( );
}