var leftIMG = new Image( 550, 240 );
var randIMG = new Image( 250, 240 );

var flashOverlay;
var flashBanner;

var folioOpen = false;

function innit()
{	
	drawBanner();
	
	// banner images
	
	leftIMG.src = "images/banner-left.jpg";
	randIMG.src = "images/banner-girl1.jpg";
	
	// elements
	
	flashClicks = $$( 'a.flashClick' );
	flashOverlay = $E( 'div#flashOverlay' );
	flashBanner = $E( 'div#flashBanner' );
	
	// width height
	
	var overlayWidth = 800;
	var overlayHeight = 520;
	
	// flash click
	
	flashClicks.each( function( flashClick, i )
	{
		flashClick.onclick = function()
		{	
			if( typeof drawOverlay == "function" )
			{
				drawOverlay();
			};	
		}
	});
	
	
	
	flashOverlay.setStyles
	({
		width: overlayWidth + 'px',
		height: overlayHeight + 'px',
		marginLeft: '-' + ( overlayWidth/2 ) + 'px',
		display: 'none'
	});
	
	// togglesrs & stretchers
	
	var stretchers = $$( 'div.accordion' );
    var togglers = $$( 'h3.toggler' );
	
    for( i=0; i < togglers.length; i++ )
    {   
        stretchers[i].orginHeight = stretchers[i].getStyle( 'height' );
        stretchers[i].setStyles( { 'height' : '0', 'overflow' : 'hidden', 'color' : '#FFFFFF' } );
		togglers[i].style.background = "url( 'images/arrow.gif' ) no-repeat";
    };
            
    togglers.each( function( toggler, i )
    {
        toggler.paneStat = "closed";
    
        toggler.onclick = function()
        {
            var resizeEffects = new Fx.Styles( stretchers[i], { duration: 500 } );
        	        
            if( toggler.paneStat == 'closed' ) // if toggle is closed
            {
                resizeEffects.start({ 'height' : [ 0, stretchers[i].orginHeight ], 'color' : '#000000' });
				toggler.style.background = "url( 'images/arrow_down.gif' ) no-repeat";
				toggler.paneStat = 'open';
            }
                    
            else if( toggler.paneStat == 'open' )
            {
                resizeEffects.start({ 'height': [ stretchers[i].orginHeight, 0 ], 'color' : '#FFFFFF' });
				toggler.style.background = "url( 'images/arrow.gif' ) no-repeat";
				toggler.paneStat = 'closed';
            };
        };
    });
};

window.onscroll = function()
{
	if( folioOpen == true && flashOverlay )
	{
		flashOverlay.setStyles
		({
			top: window.getScrollTop() + ( window.getHeight() / 2 ) - ( 520 / 2 )
		})
	}
}

function closeOverlay()
{
	flashOverlay.style.display = 'none';
	folioOpen = false;
	
	if( typeof drawBanner == "function" )
	{
		drawBanner();
	}
}

function drawBanner()
{
		var flo = new SWFObject( "images/banner.swf", "banner", "800", "240", "8", "#FFFFFF" );
			
		flo.addVariable( "mainTextBlurb", mainBlurb );
		flo.addVariable( "subTextBlurb", subBlurb );
		
		flo.addVariable( "randomIndex", 2 );
   
		flo.write( "flashBanner" );
}

function drawOverlay( index ) // function to draw flash overlay ( portfolio )
{
	flashBanner.innerHTML = "<ul><li><img src='" + leftIMG.src + "' /></li><li><img src='" + randIMG.src + "' /></li></ul>";
	
	folioOpen = true; // set the open status to true, needed to auto center the div element
	
	flashOverlay.setStyles // set styles, ( position and display type )
	({
		display: 'block',
		top: window.getScrollTop() + ( window.getHeight() / 2 ) - ( 520 / 2 )
	})
	
	// create swfObject
	var folio = new SWFObject( "images/folio.swf", "folio", "800", "520", "8", "#FFFFFF" );
   	
	folio.addVariable( "myXML", "projects/projects.xml" );
	
	if( typeof index != "undefined" )
	{
		folio.addVariable( "projectIndex", index );	
	}
	
	folio.addParam( "quality", "BEST" );
   	folio.addParam( "wmode", "transparent" );
	folio.addParam( "salign", "TL" );
	folio.addParam( "scale", "noscale" );
 		  
	folio.write( "flashOverlay" ); // write the flash
};

window.addEvent( 'domready', innit );