/////////////////////////////////////////////////////////////////
//
//  src: 	wwww.washingtonci.com/default.aspx
//  author: jboz
//  date:	12-20-10
//  intent:	embed flash - or -
//		simple jquery slideshow 
//		rollovers for on-page buttons
//	
/////////////////////////////////////////////////////////////////

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//                          vars
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//content arrays 
var images	= new Array(				
    'home_Make_a_Difference.jpg',									
    'home_Dash_seating.jpg',
    'home_resFurn.jpg',
    'home_Greenguard.jpg'
    );

var captions_1	= new Array(				
    'CI Overview',	
    'Shop online now!',
    'Residential Living Furniture',
    'Greenguard Certification'
    );

var captions_2	= new Array(
    'Offender Re-Entry',
    'Dash Seating',
    'Higher Education',
    'CI Sustainability'
    );

// links for main image and caption 1
var links_1 	= new Array(				
    '../_content/about_ci/ci_overview.aspx',
    '../products_and_services/seating/products.aspx?nid=52&type=Task+Chairs',
    '../products_and_services/residential_living_furniture/',
    '../_content/highlights/announcements/greenguard_certified.aspx'
    );

// links for caption 2
var links_2 	= new Array(
    '../_content/about_ci/offender_re-entry.aspx',
    '../_content/highlights/new_and_notable/dash_chairs.aspx',
    '../_content/your_market/higher_education.aspx',
    '../_content/highlights/sustainability.aspx'
    );

var loadSpinnerUrl  = '../../images/_site2/home_page_img/slideshow/ajax-loader_opaque.gif';
var loadFailUrl     = '../../images/_site2/home_page_img/slideshow/loadFail.jpg';
var basePath        = '../../images/_site2/home_page_img/slideshow/img/';

// element references
var next, previous, caption_1, caption_2, image, imageConA, imageConB, controls, popUp, popUpCon;

// rollover refs
var ym_government, ym_pubSafety, ym_nonProfit, ym_k12 ,ym_higherEd;

//variables
var currentIndex    = -1;
var topIsA          = true;
var topCon,	bottomCon;	

//load js slides?
var isFlash         = false;

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//                          initialize
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

$(document)
    .ready(
        function()
        {
            init();
        }
    );

/*window.onload = init;*/

function init()
{	
    var testIt = false;
	
    if (!testIt)
    {
        embedFlash();
    }
		
    entryPoint();
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//			Entry Point
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function entryPoint()
{
    if (document.getElementById)
    {
        // assign page element values
        if (!isFlash)
        {
            next 		= document.getElementById('next');
            previous 		= document.getElementById('previous');
            caption_1 		= document.getElementById('caption_1');
            caption_2 		= document.getElementById('caption_2');
            image		= document.getElementById('image');
            imageConA		= document.getElementById('imageConA');
            imageConB		= document.getElementById('imageConB');
            controls		= document.getElementById('controls');
            popUp		= document.getElementById('popUp');
            popUpCon		= document.getElementById('popUpCon');
        }
		
        ym_government		= document.getElementById('ym_government');
        ym_pubSafety		= document.getElementById('ym_pubSafety');
        ym_nonProfit		= document.getElementById('ym_nonProfit');
        ym_k12			= document.getElementById('ym_k12');
        ym_higherEd		= document.getElementById('ym_higherEd');
		
        //addEventHanders
        addEventHandlers();
		
        //init css
        initializeCSS();
		
        //initiate on-page slideshow
        if (!isFlash)
        {
            imageSwap('next');
        }
    }
}

function initializeCSS()
{
    if (!isFlash)
    {
        $('#controls span')
            .css({
                'opacity'	:'0.0'
            }
        );
    }
	
    $('.rollOverLink span')
        .css({
            'opacity'	:'0.0'
        }
    );
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//			add event handlers
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function addEventHandlers()
{	
    //++++++++++++++++++++++++ slideshow elements
    if (!isFlash)
    {
        addEvent('click',       popUpCon,       function(evt) { popUpLink();     } );
        addEvent('mouseover',	popUpCon,       function(evt) { showPopUpLink(); } );
        addEvent('mouseout',	popUpCon,       function(evt) { hidePopUpLink(); } );
        addEvent('click',	caption_1,	function(evt) { caption1Link();  } );
        addEvent('mouseover',	caption_1,	function(evt) { caption1Over();  } );
        addEvent('mouseout',	caption_1,	function(evt) { caption1Out();   } );
        addEvent('click',	caption_2,	function(evt) { caption2Link();  } );
        addEvent('mouseover',	caption_2,	function(evt) { caption2Over();  } );
        addEvent('mouseout',	caption_2,	function(evt) { caption2Out();   } );
        addEvent('mouseover',	next,		function(evt) { rollOver('next');} );
        addEvent('mouseout',	next,		function(evt) { rollOut('next'); } );
        addEvent('mouseover',	previous,	function(evt) { rollOver('previous');});
        addEvent('mouseout',	previous,	function(evt) { rollOut('previous'); });
    }
	
    //++++++++++++++++++++++++ rollOver elements
    addEvent('mouseover',	ym_government,	function(evt) { rollOver('ym_government');  });
    addEvent('mouseout',	ym_government,	function(evt) { rollOut	('ym_government');  });
    addEvent('mouseover',	ym_pubSafety,	function(evt) { rollOver('ym_pubSafety');   });
    addEvent('mouseout',	ym_pubSafety,	function(evt) { rollOut	('ym_pubSafety');   });
    addEvent('mouseover',	ym_nonProfit,	function(evt) { rollOver('ym_nonProfit');   });
    addEvent('mouseout',	ym_nonProfit,	function(evt) { rollOut	('ym_nonProfit');   });
    addEvent('mouseover',	ym_k12,		function(evt) { rollOver('ym_k12');         });
    addEvent('mouseout',	ym_k12,		function(evt) { rollOut	('ym_k12');         });
    addEvent('mouseover',	ym_higherEd,	function(evt) { rollOver('ym_higherEd');    });
    addEvent('mouseout',	ym_higherEd,	function(evt) { rollOut	('ym_higherEd');    });
}

function imgEnable()
{
    addEvent(	'click',	next,		initiateImageSwapNext 		);
    addEvent(	'click',	previous,	initiateImageSwapPrevious	);
}

function imgDisable()
{
    removeEvent('click',	next,		initiateImageSwapNext		);
    removeEvent('click',	previous,	initiateImageSwapPrevious	);
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//			main images
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

var initiateImageSwapPrevious 	= function()
{
    imageSwap('previous');
}

var initiateImageSwapNext 	= function()
{
    imageSwap('next');
}

function imageSwap (direction)
{
    switch( direction )
    {
        case 'next':
            currentIndex++;
            if (currentIndex > images.length-1)
            {
                currentIndex = 0;
            }
            break;
        case 'previous':
            currentIndex--;
            if (currentIndex < 0)
            {
                currentIndex = images.length-1;
            }
            break;
    }
	
    // kill autoPlay setTimeout
    clearInterval(autoPlayTimer);
    imgDisable();

    initiateLoad();
}

// switch between top and bottom image containers
function initiateLoad()
{
    if (topIsA)
    {
        topCon		= imageConA;
        bottomCon	= imageConB;
		
        topIsA 		= false;
    }
    else
    {
        topCon		= imageConB;
        bottomCon	= imageConA;

        topIsA 		= true;
    }
	
    $(topCon)
        .empty()
        .css({
            'z-index': '2'
        });
			
    $(bottomCon)
        .css({
            'z-index': '1'
        });

    loadImage();
}

var newImg;
function loadImage()
{
    $(topCon)
        .html(	"<img class='spinner' src='" + loadSpinnerUrl + "'/>" );
    
    $('img.spinner')
        .hide()
        .fadeIn( 750 );
		
    newImg = new Image();
    $(newImg)
        .bind( 'load',  onLoadComplete )
        .bind( 'error', onLoadFail )
        .attr( 'src'   , basePath + images[currentIndex] )
        .attr( 'height', '285' );  //ie was forcing to 300?
}

var onLoadComplete = function()
{
    $(topCon)
        .empty()
        .html(newImg);

    $(newImg)
        .css({
            'opacity' : '0.0'
        })
        .animate(
            {
                'opacity' : '1.0'
            },	500
        );

    reset();
}

var onLoadFail  = function()
{
    $(topCon)
        .empty()
        .html(	"<img id='fail' src='" + loadFailUrl+ "'/>"   );

    $('img.fail')
        .css({
            'opacity' : '0.0'
        })
        .animate(
            {
                'opacity' : '1.0'
            },	500
        );

    reset();
}

function reset()
{
    var resetClick = setTimeout( imgEnable, 1000);

    updatecaption_1();
    updatecaption_2();
    resetAutoPlay();
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//			autoPlay
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

var autoPlayTimer;

//automatically swap images every 5000 miliseconds
function initiateAutoPlay()
{
    autoPlayTimer = setTimeout( initiateImageSwapNext, 5000);
}

//may be called by user action, so clearInterval if incomplete
function resetAutoPlay()
{
    clearInterval(autoPlayTimer);
    initiateAutoPlay();
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//			rollovers
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function rollOver(target)
{
    $('#'+target+' span')
    .stop()
    .animate({
            'opacity'	:'1.0'
        },	150
        );
}

function rollOut(target)
{
    $('#'+target+' span')
        .stop()
        .animate(
        {
            'opacity'	:'0.0'
        },	300
        );
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//			captions
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function updatecaption_1()
{
    $(caption_1)
        .stop()
        .fadeOut(
            200,
            function()
            {
                $(this)
                    .html(	captions_1[currentIndex] )
            }
        )
        .fadeIn( 750 );
}

function updatecaption_2()
{
    $(caption_2)
        .stop()
        .fadeOut(
            200,
            function()
            {
                $(this)
                    .html(	captions_2[currentIndex] )
            }
        )
        .fadeIn( 750 );
}

function caption1Over()
{
    $(caption_1)
        .css({
            'color' : '#000000'
        });
}

function caption1Out()
{
    $(caption_1)
        .css({
            'color' : '#999999'
        });
}
function caption2Over()
{
    $(caption_2)
        .css({
            'color' : '#000000'
        });
}

function caption2Out()
{
    $(caption_2)
        .css({
            'color' : '#999999'
        });
}

function caption1Link()
{
    redirectURL(links_1[currentIndex]);
}

function caption2Link()
{
    redirectURL(links_2[currentIndex]);
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//                      pop up links
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

function showPopUpLink()
{
    $(popUp)
        .stop()
        .animate(
        {
            'background-position' 	: '10px'
        },	350
        );
}	

function hidePopUpLink()
{
    $(popUp)
        .stop()
        .animate(
        {
            'background-position' 	: '-50px'
        },	200
        );
}

function popUpLink()
{
    redirectURL(links_1[currentIndex]);
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//                      navigation
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

// navigate page to targeted url
function redirectURL(targetURL)
{
    document.location.href = targetURL;
}

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//			flash
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

var flashvars 	= {
    filePath:	"",
    framerate: 	"",
    verbose:	""
};
																	
var params 	= {
    quality:	"high",
    wmode:	"opaque",
    menu:	"false",
    base:	"/flash/home_page/"
};
					
var attributes 	= {
    id:		"flashContent"
};

function embedFlash()
{
    swfobject.embedSWF(
        "../flash/home_page/home_shell.swf",
        "flashContent",
        "570",
        "325",
        "8.0.0",
        "../frameworks/swfobject/expressInstall.swf",
        flashvars,
        params,
        attributes,
        outputStatus
        );
}

// if flash embed is successful, set isFlash boolean to true
// if not, run javascript slideshow
function outputStatus(e)
{
    if (e.success)
    {
        isFlash = true;
    }
}