window.addEvent('load', function() {
    var footer = $('footerwrap'); //ID of the footer element you want to position
    var maincontent = $('inner'); //ID of the main floated container div that the footer must clear

    var scrollheight = window.getScrollHeight(); //height of the window plus scrolling
    var windowheight = window.getHeight(); //height of the browser window space
    var maincontentheight = maincontent.getHeight(); //height of main content
    var footerheight = footer.getHeight(); //height of footer element
    //alert(scrollheight);
    //alert(windowheight);
    //alert(maincontentheight);
    //alert(footerheight);

    //now we check if container height plus footer height is less than window height - if it is, no need to do anything else!
    if ((maincontentheight + footerheight) >= windowheight) {
    }
    else { //our window is bigger than these two elements, so nice positioning needed!

        var heighttopositionfooter = windowheight - footerheight //height of the window, minus the footer height (otherwise it'd drop off the bottom!)

        footer.setStyles({
            position: 'absolute', //position it absolutely
            top: heighttopositionfooter, //set it X pixels from the top
            left: 0 //set it 0 pixels from the left
        });

    }

    window.onresize = resizefunction; //we need to call a function whenever the window is resized to ensure our footer stays stuck to the bottom

    function resizefunction() {
        //alert('you resized me!');
        var scrollheight = window.getScrollHeight(); //recalculate height of the window plus scrolling
        var windowheight = window.getHeight(); //recalculate height of the browser window space
        var maincontentheight = maincontent.getHeight(); //recalculate height of main content

        if ((maincontentheight + footerheight) >= windowheight) { //we need to ensure it's shifted directly below
            var heighttopositionfooter = windowheight - footerheight //height of the window, minus the footer height (otherwise it'd drop off the bottom!)  
            footer.setStyles({
                position: 'relative', //position it relatively
                top: 0 //leave it exactly where it is
            });

        }
        else { //our window is bigger than these two elements, so nice positioning needed!
            var heighttopositionfooter = windowheight - footerheight //height of the window, minus the footer height (otherwise it'd drop off the bottom!)
            footer.setStyles({
                position: 'absolute', //position it absolutely
                top: heighttopositionfooter, //set it X pixels from the top
                left: 0 //set it 0 pixels from the left
            });
        }
    }

});

function createAccordion(selectedItem) {
    //create our Accordion instance
    var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
        opacity: false,
        show: selectedItem,
        display: 0,
        alwaysHide: true,
        initialDisplayFx: false,
        onActive: function(toggler, element) {
            toggler.setStyle('color', '#4d4d4f');
        },
        onBackground: function(toggler, element) {
            toggler.setStyle('color', '#4d4d4f');
        },
        onComplete: function() {
        var footer = $('footerwrap'); //ID of the footer element you want to position
        var maincontent = $('inner'); //ID of the main floated container div that the footer must clear

        var scrollheight = window.getScrollHeight(); //height of the window plus scrolling
        var windowheight = window.getHeight(); //height of the browser window space
        var maincontentheight = maincontent.getHeight(); //height of main content
        var footerheight = footer.getHeight(); //height of footer element

            //alert('you resized me!');
            var scrollheight = window.getScrollHeight(); //recalculate height of the window plus scrolling
            var windowheight = window.getHeight(); //recalculate height of the browser window space
            var maincontentheight = maincontent.getHeight(); //recalculate height of main content
            if ((maincontentheight + footerheight) >= windowheight) { //we need to ensure it's shifted directly below
                var heighttopositionfooter = windowheight - footerheight //height of the window, minus the footer height (otherwise it'd drop off the bottom!)  
                footer.setStyles({
                    position: 'relative', //position it relatively
                    top: 0 //leave it exactly where it is
                });

            }
            else { //our window is bigger than these two elements, so nice positioning needed!
                var heighttopositionfooter = windowheight - footerheight //height of the window, minus the footer height (otherwise it'd drop off the bottom!)
                footer.setStyles({
                    position: 'absolute', //position it absolutely
                    top: heighttopositionfooter, //set it X pixels from the top
                    left: 0 //set it 0 pixels from the left
                });
            }

            }
    });


        var footer = $('footerwrap'); //ID of the footer element you want to position
        var maincontent = $('inner'); //ID of the main floated container div that the footer must clear

        var scrollheight = window.getScrollHeight(); //height of the window plus scrolling
        var windowheight = window.getHeight(); //height of the browser window space
        var maincontentheight = maincontent.getHeight(); //height of main content
        var footerheight = footer.getHeight(); //height of footer element

            //alert('you resized me!');
            var scrollheight = window.getScrollHeight(); //recalculate height of the window plus scrolling
            var windowheight = window.getHeight(); //recalculate height of the browser window space
            var maincontentheight = maincontent.getHeight(); //recalculate height of main content
            if ((maincontentheight + footerheight) >= windowheight) { //we need to ensure it's shifted directly below
                var heighttopositionfooter = windowheight - footerheight //height of the window, minus the footer height (otherwise it'd drop off the bottom!)  
                footer.setStyles({
                    position: 'relative', //position it relatively
                    top: 0 //leave it exactly where it is
                });

            }
            else { //our window is bigger than these two elements, so nice positioning needed!
                var heighttopositionfooter = windowheight - footerheight //height of the window, minus the footer height (otherwise it'd drop off the bottom!)
                footer.setStyles({
                    position: 'absolute', //position it absolutely
                    top: heighttopositionfooter, //set it X pixels from the top
                    left: 0 //set it 0 pixels from the left
                });
            }



}