/*
Object
    |- src      : Path to Media
    |- type
        |- 0    : Image
        |- 1    : MP3
        |- 2    : FLV
    |- width    : Media width
    |- height   : Media width
*/
var debug        = false;
if (debug)
{
    console.log( ':: siteheader.js');
    var startTime = $time();
    function getTimePoint ()
    {
        return $time() - startTime + 'ms';
    }
}

/*** declare some Variables | 28.03.2008 | mpf ***/
var head;                   // element id hosting the scrollable element
var headerEle;              // scrollable element id

var fader;                  // NOT CONFIGURABLE
var faderID;                // id the fader element should get

var scroll;                 // NOT CONFIGURABLE
var scrollRight;            // NOT CONFIGURABLE
var scrollLeft;             // NOT CONFIGURABLE
var scrollbarTime2;
var scrollbarTime1;

var baseLoad;               // loaded images at init (very first access)
var baseID;                 // page id to be loaded at init
var fadeSpeed;              // how fast the overlaying div should fade out
var endSpeed;               // speed of inital scroll to very left
var startSpeed;             // speed of auto scrolling to very right
var scrollSpeed;            // speed to scroll to the very left or right
var jumpSpeed;              // speed to scroll to a imaged invoked by a link

var useOpacity;             // if scroll buttons should use opacitiy to become visible or not
var minOpacity;             // min opacity value of scroll buttons !!! NOT 0
var maxOpacity;             // max opacity value of scroll buttons
var opacityFade;            // speed how fast scroll buttons fade

var staticSpeed;            // only devel

function initHeader ()
/*** initializes the header !!! IMPORTANT - has to be called when domready !!! | 28.03.2008 | mpf ***/
{
	if (debug) {console.log( 'init header : ' + getTimePoint() );}

    /*** CONFIGURATION START | set some variables | 28.03.2008 | mpf ***/
    head        = $( 'head' );
    headerEle   = $( 'topwrap' );
    faderID     = 'fader';

    baseLoad    = false;
    baseID      = 0;

    fadeSpeed   = 1800;
    endSpeed    = 6000;
    startSpeed  = 6000;
    scrollSpeed = 4500;
    jumpSpeed   = 2500;

    useOpacity  = false;
    minOpacity  = 0.1;
    maxOpacity  = 0.8;
    opacityFade = 200;
    
    staticSpeed = 60;
    /*** CONFIGURATION END | 28.03.2008 | mpf ***/


    /*** create and inject fader and scroller | 28.03.2008 | mpf ***/
    fader       = new Element('div',
                                {
                                    'id' : faderID
                                }
                      ).injectTop( head.id );
    faderText   = new Element( 'span' ).setHTML( 'loading ...' ).injectInside( fader.id );
    fader.setStyle('opacity', '0');
    faderText.setStyle('opacity', '0');
    
    if ( useOpacity )
    {
        scrollRight = new Element( 'div', { 'id' : 'scrollHeadRight' } ).setStyle('opacity', minOpacity).injectTop( head.id );
        scrollLeft  = new Element( 'div', { 'id' : 'scrollHeadLeft' } ).setStyle('opacity', minOpacity).injectTop( head.id );
    }
    else
    {
        /*** since ie7 seems  | 31.03.2008 | mpf ***/
        scrollRight = new Element( 'div', { 'id' : 'scrollHeadRight' } ).setStyle('opacity', 0.001).injectTop( head.id );
        scrollLeft  = new Element( 'div', { 'id' : 'scrollHeadLeft' } ).setStyle('opacity', 0.001).injectTop( head.id );
    }

    /*** request the images on startup | 28.03.2008 | mpf ***/
    if ( baseLoad )
    {
        getMedia( baseID );
    }
                             
    /*** create scroll and jump object at # - nowhere | 28.03.2008 | mpf ***/                     
    scroll = new Fx.Scroll(head.id, {
                wait: false,
                duration: scrollSpeed,
                transition: Fx.Transitions.Quad.easeInOut
             });
    
    jump = new Fx.Scroll(head.id, {
                wait: false,
                duration: jumpSpeed,
                transition: Fx.Transitions.Quad.easeInOut
             });

    /*** attach scroll funktion to all links point at # - nowhere | 28.03.2008 | mpf ***/                     
    $$('a[href^="#"]').addEvent('click', function(e) {
        if (debug) {console.log( 'found link to ' + this.getProperty('href') );}
        new Event(e).stop();
        jump.toElement($E(this.getProperty('href')));
    });

    /*** attach scroll funktion to right areas | 28.03.2008 | mpf ***/                     
    scrollRight.addEvent('mouseenter', function(e) {
        if (debug) {console.log( 'scroll Right ' );}
        if ( useOpacity )
        {
            show = new Fx.Styles( this, { duration: opacityFade, transition: Fx.Transitions.linear} ).start({'opacity': maxOpacity});
        }
        scroll.toRight();
    });
    scrollRight.addEvent('mouseleave', function(e) {
        if (debug) {console.log( 'scroll stop Right ' );}
        if ( useOpacity )
        {
            show = new Fx.Styles( this, { duration: opacityFade, transition: Fx.Transitions.linear} ).start({'opacity': minOpacity});
        }
        scroll.stop();
    });

    /*** attach scroll funktion to left areas | 28.03.2008 | mpf ***/                     
    scrollLeft.addEvent('mouseenter', function(e) {
        if (debug) {console.log( 'scroll Left ' );}
        if ( useOpacity )
        {
            show = new Fx.Styles( this, { duration: opacityFade, transition: Fx.Transitions.linear} ).start({'opacity': maxOpacity});
        }
        scroll.toLeft();
    });
    /*** attach scroll funktion to left right areas | 28.03.2008 | mpf ***/                     
    scrollLeft.addEvent('mouseleave', function(e) {
        if (debug) {console.log( 'scroll stop Left ' );}
        if ( useOpacity )
        {
            show = new Fx.Styles( this, { duration: opacityFade, transition: Fx.Transitions.linear} ).start({'opacity': minOpacity});
        }
        scroll.stop();
    });
}



function toggleScrollers ( mode )
/*** toggles visibility of scrollers | 28.03.2008 | mpf ***/
{
    if ( mode==true )
    {
        if (debug) {console.log( 'enable scrollers ' + getTimePoint() );}
        scrollRight.setStyle( 'display', 'block' );
        scrollLeft.setStyle( 'display', 'block' );
        // alert('enable scrollers');
    }
    else
    {
        if (debug) {console.log( 'disable scrollers ' + getTimePoint() );}
        // alert('disable scrollers');
        scrollRight.setStyle( 'display', 'none' );
        scrollLeft.setStyle( 'display', 'none' );
    }
    
    return true;
}



function getMedia ( pageId )
/*** gets media via ajax ***/
{
    if (debug) {console.log( 'get media ' + pageId + ' ' + getTimePoint() );}

    /*** clearing | 01.04.2008 | mpf ***/
    scroll.stop();
    window.clearTimeout( scrollbarTime1 );
    window.clearTimeout( scrollbarTime2 );

    /*** empty header and disable scrollers | 31.03.2008 | mpf ***/
    $( headerEle.id ).empty();
    toggleScrollers( false );

    /*** set opacity of fader to none - fader is visible  | 28.03.2008 | mpf ***/
    fader.setStyle( 'opacity', '1' );

    /*** get media from eZ Publish | 28.03.2008 | mpf ***/
	var jSonRequest    = new Json.Remote( 
                                 mediaUrl + pageId, 
                                 { onComplete: function( response ) 
                                               {
                                                    if (debug) {console.log( response + getTimePoint() );}
                                                    loadMedia( response.childs );
                                               }
                                 }
                             ).send();

    return true;
}



function loadMedia ( media )
/*** loads media to the header div ***/
{
    if (debug) {console.log( 'load media' + getTimePoint() );}
    var w           = 0;
    var c           = 1;
    mediaArr        = new Array();

    if( media.length == 0)
    {
        switchKubus( 'white', $(kubus) );
        return false;
    }
    switchKubus( 'red', $(kubus) );



    /*** build and inject html into header | 27.03.2008 | mpf ***/
    media.each (
        function(item)
        {
            if (item.src == '' || item.width == '') {
                if (debug) {console.log('skip json element ' + c)};
                return true;
            }
            image   = new Element('img',
                                    {
                                        'id': 'media' + c,
                                        'src': item.src
                                    }
                                 ).injectInside( headerEle.id );

            mediaArr[c]             = new Object;
            mediaArr[c]['width']    = item.width;
            mediaArr[c]['src']      = item.src;

            w += parseInt( item.width );
            c++;
        }
    );
    
    /*** check screen with / media with | 31.03.2008 | mpf ***/
    if ( w < screen.width )
    {
    	if (debug) {console.log( 'stack is NOT wide enough ' + w + 'px  ' + getTimePoint() );}
        var rc = 1;
    	while ( w < screen.width ) {
            if ( rc == c )
            {
            	if (debug) {console.log( 'reset rc : repeat count ' );}
                rc = 1;
            }
            image   = new Element('img',
                                    {
                                        'id': 'media' + c + '_' + rc ,
                                        'src': mediaArr[ rc ][ 'src' ]
                                    }
                                 ).injectInside( headerEle.id );
            w += parseInt( mediaArr[ rc ][ 'width' ] );
            rc++;
        }
    }
  
    /*** ajust header | 27.03.2008 | mpf ***/
    setContainerStyle( w );

    /*** init start animation | 27.03.2008 | mpf ***/
    goStart( true );
    goEnd();
    
    if (debug) {console.log( 'medienbreite ' + w + 'px' );}

    return true;
}



function setContainerStyle( w )
/*** sets some styles we need to the header's elements | 28.03.2008 | mpf ***/
{
	if (debug) {console.log( 'set container' + getTimePoint() );}

	/*** set head elements width and height | 28.03.2008 | mpf ***/
	headerEle.style.width       = w+'px';
	headerEle.style.margin      = '0';
	headerEle.style.padding     = '0';
	headerEle.style.padding     = '0';
	
	return true;
}



function fadeFaderOut()
/*** fades the overly out | 28.03.2008 | mpf ***/
{
	if (debug) {console.log( 'fade out ' + getTimePoint() );}

	var show = new Fx.Styles( fader, {
	    duration: fadeSpeed,
	    transition: Fx.Transitions.linear
	});
	
	show.start({
		'filter':'alpha(opacity=0)',
		'-moz-opacity': '0',
		'opacity': '0'
	});
    
    return true;
}



function goEnd()
/*** scrolls the header fast to its end | 28.03.2008 | mpf ***/
{
	if (debug) {console.log( 'goEnd ' + getTimePoint() );}


    // use to have a linear tween / static duration transition: Fx.Transitions.linear;
	fadeFaderOut();
    var scroll = new Fx.Scroll(head.id, {
        wait: false,
        duration: endSpeed,
        transition: Fx.Transitions.Quad.easeInOut
    });
    
    scroll.toRight();
    scrollbarTime1 = window.setTimeout("toggleScrollers( true )", endSpeed+1);

    return true;
}



function goStart( rewind )
/*** scrolls the header slowlier back foreward | 28.03.2008 | mpf ***/
{
	if (debug) {console.log( 'goStart (' + rewind + ') ' + getTimePoint() );}


	var scroll = new Fx.Scroll(head.id, {
		wait: false,
		duration: startSpeed,
 		transition: Fx.Transitions.Quad.easeInOut
	});

    if ( rewind )
    {
        scroll.set(0, 0);
    }
    else
    {
	    scroll.toLeft();
	    scrollbarTime2 = window.setTimeout("toggleScrollers( true )", startSpeed+1);
    }

    return true;
}



function goRight()
/*** scrolls the header slowlier back foreward | 28.03.2008 | mpf ***/
{
	if (debug) {console.log( 'goRight ' + getTimePoint() );}

	var scroll = new Fx.Scroll(head.id, {
		wait: false,
        // duration: 5000,
 		transition: Fx.Transitions.Quad.easeInOut
	});

	scroll.toLeft();
	
	toggleScrollers( true );

    return true;
}