// -------------------------------------------------
// initialize video container
// -------------------------------------------------
var initVideoLayer = function() {

var myVideoLayer = $('lightbox').setStyles({
'display': 'none'
});

var myVideoLayer_slide = $('lightbox_slide').setStyles({
'display': 'none'
}); 

var hStripe1 = $('hstripe1').setStyles({
'display': 'none'
});
var hStripe2 = $('hstripe2').setStyles({
'display': 'none'
});

var myBgLayer = $('bg').setStyles({
'display': 'none'
});

// as 100 % for width and height does not work on IE 6, 
// trying to find out the actuval width and height of the open browser

 bodyWidth  = document.documentElement.clientWidth;
 bodyHeight = document.documentElement.clientHeight;

// alert ('BROWSER width:'+bodyWidth+' height'+bodyHeight);

};

// -------------------------------------------------
// get movie
// -------------------------------------------------
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}

// -------------------------------------------------
// open video stream
// -------------------------------------------------
var videoDelayStart = function(fileName, fileTitle){
$('receivedField').set('value','OPEN: From Flash: '+fileName+', '+fileTitle); // TEST //
getFlashMovie("media_player").flashVideoOpen(fileName, fileTitle);
//getFlashMovie("AMB_Map").flashVideoOpen();
return "Message received";
};

var myCfgVideoDelayStart = videoDelayStart.create({
delay: 2000
});



function videoOpen(fileName, fileTitle) {
var vargs = [fileName,fileTitle];
window.addEvent('domready', function() {
showVideoLayer();
//getFlashMovie("AMB_Map").flashVideoOpen();
getFlashMovie("video_selector").flashVideoOpen();
//return "Message received";
myCfgVideoDelayStart.run(vargs);
});
}









/*
// -------------------------------------------------
// open slide show stream  // not working
// -------------------------------------------------

var myCfgSlideShowDelayStart = SlideShowStart(fileName).create({
delay: 2000
});
var SlideShowStart = function(fileName){
$('receivedField').set('value','OPEN: From Flash: '+fileName); // TEST //
getFlashMovie("slideshow").flashSlideshowOpen(fileName);
//getFlashMovie("AMB_Map").flashVideoOpen();
getFlashMovie("video_selector").flashVideoOpen();
return "Message received";
};
function slideshowOpen(fileName) {
alert ('i m slideshowOpen');
var vargs = [fileName];
window.addEvent('domready', function() {
showVideoLayer();
//getFlashMovie("AMB_Map").flashVideoOpen();
//return "Message received";
myCfgSlideShowDelayStart.run(vargs);
});
}
*/
 
// -------------------------------------------------
// close video stream
// -------------------------------------------------

var videoDelayClose = function(str){
$('receivedField').set('value','CLOSE: From Flash: '+str); // TEST //
getFlashMovie("video_selector").flashVideoClose();
//getFlashMovie("AMB_Map").flashVideoClose();
return "Message received";
}

var myCfgVideoDelayClose = videoDelayClose.create({
delay: 1000
});

function videoClose(str) {
window.addEvent('domready', function() {
hideVideoLayer();
myCfgVideoDelayClose.run(str);
});
 }




// -------------------------------------------------
// open slide show stream
// -------------------------------------------------

var slideshowDelayStart = function(fileName){
$('receivedField').set('value','OPEN: From Flash: '+fileName); // TEST //
getFlashMovie("slideshow").flashSlideshowOpen(fileName);
//getFlashMovie("AMB_Map").flashVideoOpen();
getFlashMovie("video_selector").flashVideoOpen();
return "Message received";
};

var myCfgSlideshowDelayStart = slideshowDelayStart.create({
delay: 2000
});

function slideshowOpen(fileName) {
var vargs = [fileName];
window.addEvent('domready', function() {
showSlideshowLayer();
//getFlashMovie("AMB_Map").flashVideoOpen();
getFlashMovie("video_selector").flashVideoOpen();
//return "Message received";
myCfgSlideshowDelayStart.run(vargs); 

});
};



// -------------------------------------------------
// close slide show stream
// -------------------------------------------------


function slideshowClose(str){
//alert ('i m going to close this');
window.addEvent('domready',function() {
hideSlideshowLayer();
myCfgVideoDelayClose.run(str);
});
}





// -------------------------------------------------
// show video container
// -------------------------------------------------
var showVideoLayer = function() {

// as 100 % for width and height does not work on IE 6, 
// trying to find out the actuval width and height of the open browser

 bodyWidth  = document.documentElement.clientWidth;
 bodyHeight = document.documentElement.clientHeight;

var myVideoLayer = $('lightbox').setStyles({
'display': 'block'
});

var hStripe1 = $('hstripe1').setStyles({
'display': 'block'
});

var hStripe2 = $('hstripe2').setStyles({
'display': 'block'
});

var myBgLayer = $('bg').setStyles({
'display': 'block'
});

// -------------------------------------------------
// Do not separate into functions so the parameters can
// roll without user interaction
// 
// link: ignore, cancel, chain
// short 250ms, normal 500ms, long 1000ms
//
// Note: for any width/height set at 100%, be sure to set css values for
// margin, padding, top, left 
// to 0, otherwise mootools will add these to the total calculated
// values (forcing the browser scroll bars to appear including the
// excess space
// -------------------------------------------------

var morphVideoLayer = new Fx.Morph(myVideoLayer, {
'unit': 'px',
'link': 'ignore',
'duration': '1000'
});

var morphBgLayer = new Fx.Morph(myBgLayer, {
'unit': 'px',
'link': 'ignore',
'duration': '1000'
});

var morphhStripe1 = new Fx.Morph(hStripe1, {
'duration': '1000'
});

var morphhStripe2 = new Fx.Morph(hStripe2, {
'duration': '1000'
});

// -------------------------------------------------
// set initial positions

morphVideoLayer.set({
'width': bodyWidth,
'height': 0,
'overflow-y': 'hidden'
});

morphBgLayer.set({
'width': bodyWidth,
'height': 0
});

morphhStripe1.set({
'opacity': 0
});

morphhStripe2.set({
'opacity': 0
});

// -------------------------------------------------
// start animations immediately

morphVideoLayer.start({
'width': bodyWidth,
'height': bodyHeight,
'overflow-y': 'hidden'
});

morphBgLayer.start({
'width': bodyWidth,
'height': bodyHeight
});

morphhStripe1.start({
'opacity': 1
}).start({
'display': 'none'
});

morphhStripe2.start({
'opacity': 1
}).start({
'display': 'none'
});

};


// -------------------------------------------------
// hide video container
// -------------------------------------------------
var hideVideoLayer = function() {

// as 100 % for width and height does not work on IE 6, 
// trying to find out the actuval width and height of the open browser

 bodyWidth  = document.documentElement.clientWidth;
 bodyHeight = document.documentElement.clientHeight;

var myVideoLayer = $('lightbox');

var hStripe1 = $('hstripe1').setStyles();
var hStripe2 = $('hstripe2').setStyles();

var myBgLayer = $('bg');

var morphBgLayer = new Fx.Morph(myBgLayer, {
'unit': 'px',
'link': 'ignore',
'duration': '1000'
});

var morphhStripe1 = new Fx.Morph(hStripe1, {
'duration': '1000'
});

var morphhStripe2 = new Fx.Morph(hStripe2, {
'duration': '1000'
});

var morphVideoLayer = new Fx.Morph(myVideoLayer, {
'unit': 'px',
'link': 'ignore'
});

// -------------------------------------------------
// start animations immediately

morphBgLayer.start({
'width': bodyWidth,
'height': 0
});

morphhStripe1.start({
'opacity': 0
}).start({
'display': 'none'
});

morphhStripe2.start({
'opacity': 0
}).start({
'display': 'none'
});

morphVideoLayer.start({
'width': bodyWidth,
'height': 0,
'overflow-y': 'hidden'
});

};













// -------------------------------------------------
// show slideshow container
// -------------------------------------------------
var showSlideshowLayer = function() {

// as 100 % for width and height does not work on IE 6, 
// trying to find out the actuval width and height of the open browser

 bodyWidth  = document.documentElement.clientWidth;
 bodyHeight = document.documentElement.clientHeight;

var myVideoLayer = $('lightbox_slide').setStyles({
'display': 'block'
});

var hStripe1 = $('hstripe1').setStyles({
'display': 'block'
});

var hStripe2 = $('hstripe2').setStyles({
'display': 'block'
});

var myBgLayer = $('bg').setStyles({
'display': 'block'
});

// -------------------------------------------------
// Do not separate into functions so the parameters can
// roll without user interaction
// 
// link: ignore, cancel, chain
// short 250ms, normal 500ms, long 1000ms
//
// Note: for any width/height set at 100%, be sure to set css values for
// margin, padding, top, left 
// to 0, otherwise mootools will add these to the total calculated
// values (forcing the browser scroll bars to appear including the
// excess space
// -------------------------------------------------

var morphVideoLayer = new Fx.Morph(myVideoLayer, {
'unit': 'px',
'link': 'ignore',
'duration': '1000'
});

var morphBgLayer = new Fx.Morph(myBgLayer, {
'unit': 'px',
'link': 'ignore',
'duration': '1000'
});

var morphhStripe1 = new Fx.Morph(hStripe1, {
'duration': '1000'
});

var morphhStripe2 = new Fx.Morph(hStripe2, {
'duration': '1000'
});

// -------------------------------------------------
// set initial positions

morphVideoLayer.set({
'width': bodyWidth,
'height': 0,
'overflow-y': 'hidden'
});

morphBgLayer.set({
'width': bodyWidth,
'height': 0
});

morphhStripe1.set({
'opacity': 0
});

morphhStripe2.set({
'opacity': 0
});

// -------------------------------------------------
// start animations immediately

morphVideoLayer.start({
'width': bodyWidth,
'height': bodyHeight,
'overflow-y': 'hidden'
});

morphBgLayer.start({
'width': bodyWidth,
'height': bodyHeight
});

morphhStripe1.start({
'opacity': 1
}).start({
'display': 'none'
});

morphhStripe2.start({
'opacity': 1
}).start({
'display': 'none'
});

};





// -------------------------------------------------
// hide slideshow container
// -------------------------------------------------
var hideSlideshowLayer = function() {

// as 100 % for width and height does not work on IE 6, 
// trying to find out the actuval width and height of the open browser

 bodyWidth  = document.documentElement.clientWidth;
 bodyHeight = document.documentElement.clientHeight;

var myVideoLayer = $('lightbox_slide');

var hStripe1 = $('hstripe1').setStyles();
var hStripe2 = $('hstripe2').setStyles();

var myBgLayer = $('bg');

var morphBgLayer = new Fx.Morph(myBgLayer, {
'unit': 'px',
'link': 'ignore',
'duration': '1000'
});

var morphhStripe1 = new Fx.Morph(hStripe1, {
'duration': '1000'
});

var morphhStripe2 = new Fx.Morph(hStripe2, {
'duration': '1000'
});

var morphVideoLayer = new Fx.Morph(myVideoLayer, {
'unit': 'px',
'link': 'ignore'
});

// -------------------------------------------------
// start animations immediately

morphBgLayer.start({
'width': bodyWidth,
'height': 0
});

morphhStripe1.start({
'opacity': 0
}).start({
'display': 'none'
});

morphhStripe2.start({
'opacity': 0
}).start({
'display': 'none'
});

morphVideoLayer.start({
'width': bodyWidth,
'height': 0,
'overflow-y': 'hidden'
});

};



























// -------------------------------------------------
// DOM: initialize objects
// -------------------------------------------------
window.addEvent('domready', function() {
initVideoLayer();
});