(function(){

    dojo.require( 'dojo.fx' );
    dojo.require( 'dojo.fx.easing' );
    dojo.require( 'dojox.html.ext-dojo.style' );
    dojo.require( 'dojox.fx.ext-dojo.complex' );

    var place = dojo.place;
    var style = dojo.style;
    var create = dojo.create;
    var marginBox = dojo.marginBox;

    function getViewport( ) {
        var scrollRoot = (dojo.doc.compatMode == 'BackCompat')? dojo.body() : dojo.doc.documentElement;
        var scroll = dojo._docScroll();
        return { w: scrollRoot.clientWidth, h: scrollRoot.clientHeight, l: scroll.x, t: scroll.y };
    }

    function animate( node, left ) {
        var endWidth = marginBox( node ).w;
        return dojo.animateProperty( {
            node: node,
            duration: 1000,
            easing: dojo.fx.easing.elasticOut,
            properties: {
                transform: { start: "rotate(0deg) scale(0.1)", end: "rotate(365deg) scale(1)" },
                left: { start: endWidth+100, end: left || 0, unit: 'px' }
            }   
        } ).play( );
    }

    function Slogan( ) {
        var self = {};
        function init( ) {
            var viewport = getViewport( );
            self.rotation = 12.7;
            self.canvas = dojo.create( 'div', { style: {
                position: 'absolute',
                top: 0,
                left: '460px',
                width: ( viewport.w - 460 ) + 'px'
                /*
                height: viewport.h + 'px'
                */
            } } );
            place( self.canvas, dojo.body( ) );

            self.line1 = dojo.create( 'div', { 'class': 'slg', innerHTML: 'WEB' } );
            place( self.line1, self.canvas );
            self.maximize( self.line1 );

            self.line2 = dojo.create( 'div', { 'class': 'slg', innerHTML: 'DEVELOPER' } );
            place( self.line2, self.canvas );
            self.maximize( self.line2 );

            self.line3 = dojo.create( 'div', { 'class': 'slg', innerHTML: 'IN VIENNA' } );
            place( self.line3, self.canvas );
            self.maximize( self.line3 );

            self.step1( );
            return self;
        }
        self.step1 = function( ) {
            var node = self.line1;
            style( node, {
                visibility: 'visible'
            } );
            var width = marginBox( node ).w;

            var currentFontSize = style( node, 'fontSize' );
            style( node, 'fontSize', parseInt( style( self.line2, 'fontSize' ) ) + 'px' );
            var endWidth = marginBox( node ).w;
            style( node, 'fontSize', currentFontSize );

            dojo.connect( animate( node ), 'onEnd', function( ) {
                var a2 = dojo.animateProperty( {
                    node: node,
                    properties: { 
                        fontSize: { end: parseInt( style( self.line2, 'fontSize' ) ) },
                        left: { end: ( marginBox( self.canvas ).w - endWidth ) - 10 }
                    },
                    easing: dojo.fx.easing.quadIn,
                    duration: 100
                } ).play( );
                dojo.connect( a2, 'onEnd', self.step2 );
                self.bump( node );
            } );
        };
        self.step2 = function( ){
            var node = self.line2;
            style( node, { 
                top: marginBox( self.line1 ).h + 'px',
                visibility: 'visible'
            } );

            var currentFontSize = style( node, 'fontSize' );
            style( node, 'fontSize', parseInt( style( self.line2, 'fontSize' ) ) + 'px' );
            var endWidth = marginBox( node ).w;
            style( node, 'fontSize', currentFontSize );
            
            var width = marginBox( node ).w;

            dojo.connect( animate( node ), 'onEnd', function( ) {
                var a2 = dojo.animateProperty( {
                    node: node,
                    properties: { 
                        fontSize: { end: parseInt( style( self.line2, 'fontSize' ) ) },
                        left: { end: ( marginBox( self.canvas ).w - endWidth ) - 10 },
                        top: { end: ( marginBox( self.line1 ).h * 0.65 ) }
                    },
                    easing: dojo.fx.easing.quadIn,
                    duration: 100
                } ).play( );
                dojo.connect( a2, 'onEnd', self.step3 );
                self.bump( node, 8000 );
            } );
        };
        self.step3 = function( ) {
            var node = self.line3;
            style( node, { 
                fontSize: ( parseInt( style( self.line2, 'fontSize' ) ) / 2 ) + 'px',
                left: marginBox( node ).w + 'px',
                top: ( ( marginBox( self.line2 ).h + marginBox( self.line1 ).h ) * 0.75 ) + 'px',
                visibility: 'visible'
            } );
            var endWidth = marginBox( node ).w;
            var width = marginBox( node ).w;
            dojo.connect( animate( node ), 'onEnd', function( ) {
                var a2 = dojo.animateProperty( {
                    node: node,
                    properties: { 
                        left: { end: ( marginBox( self.canvas ).w - endWidth ) - 10 }
                    },
                    easing: dojo.fx.easing.quadIn,
                    duration: 100
                } ).play( );
            } );
            self.bump( node, 4000 );
        };
        self.bump = function( node, delay ) {
            delay = delay || 5000
            var anim = dojo.animateProperty( {
                node: node,
                duration: 800,
                easing: dojo.fx.easing.elasticOut,
                properties: {
                    transform: { start: 'scale(0.9) rotate(365deg)', end: 'scale(1) rotate(365deg)' }
                }
            } ).play( delay );
            dojo.connect( anim, 'onEnd', function( ) {
                anim.play( delay );
            } );
        };
        self.maximize = function( node ) {
            var maxWidth = marginBox( self.canvas ).w - 250;
            style( node, {
                position: 'absolute',
                color: '#fe9500',
                fontSize: '10px',
                fontWeight: 'bold',
                visibility: 'hidden',
                textShadow: '5px 5px 5px #666'
            } );
            while( marginBox( node ).w < ( maxWidth ) ) {
                style( node, 'fontSize', ( parseInt( style( node, 'fontSize' ) ) + 5 ) + 'px' );
            }
        };
        return init( );
    }

    dojo.ready( function( ) {
        var content = dojo.byId( 'content' );
        var viewport = getViewport( );
        var bg_image = dojo.byId( 'bg_image' );
        var map_canvas = dojo.byId( 'map_canvas' );
        var contentMarginBox = dojo.marginBox( content );

        if( ( contentMarginBox.t + contentMarginBox.h ) > viewport.h ) {
            style( map_canvas, 'height', ( contentMarginBox.t + contentMarginBox.h ) + 'px' );
        }

        var latlng = new google.maps.LatLng( 48.20036, 16.39759 );
        var myOptions = {
            disableDefaultUI: true,
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map( map_canvas, myOptions );
        var marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            title: 'Office'
        });   
        google.maps.event.addListener( marker, 'click', function( ) {
            window.location.href = 'http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Apostelgasse+2-14&sll=48.200322,16.399777&sspn=0.010019,0.008787&ie=UTF8&hq=&hnear=Apostelgasse+2-14,+Landstra%C3%9Fe+1030+Vienna,+Austria&ll=48.199907,16.397513&spn=0.010019,0.008787&z=17';
        } );

        if( viewport.w > 800 && viewport.h > 600 && !dojo.isIE ) {

            var anim = dojo.animateProperty( {
                node: content,
                duration: 800,
                easing: dojo.fx.easing.elasticOut,
                properties: {
                    transform: { start: 'scale(0.9)', end: 'scale(1)' }
                }
            } ).play( 5000 );
            dojo.connect( anim, 'onEnd', function( ) {
                anim.play( 5000 );
            } );

            var anim2 = dojo.animateProperty( {
                node: bg_image,
                duration: 800,
                easing: dojo.fx.easing.elasticOut,
                properties: {
                    transform: { start: 'scale(0.9)', end: 'scale(1)' }
                }
            } ).play( 8000 );
            dojo.connect( anim2, 'onEnd', function( ) {
                anim2.play( 8000 );
            } );

            WebFont.load( {
                google: {
                    families: [ 'Reenie Beanie' ]
                },
                active: function( ) {
                    Slogan( );
                }
            } );
        }
    } );
})();