var Fused_Navigation = function(){
    return {
        //of background image
        activeWidth: 170,
        activeHeight: 170,
        inactiveWidth: 85,
        inactiveHeight: 85,
        inactiveOpacity: 0.3, //inactive transparency
        activeOpacity: 1.0, //active transparency
        animateSpeed: 500, // duration of scale up/down animations
        animating: false,
        isIE: false,
        sectionToBall: {
            specs : 'blue',
            services : 'red',
            about: 'green',
            contact: 'yellow'
        },

        initiateAnimation: function(){
            var _self = this,
                section = window.location.hash.replace('#', ''),
                defaultBall = 'red',
                ballList = [],
                count = 0,
                timerIncrement = 300,
                balla;
            this.isIE = $.browser.msie;
            var randOrd = function (){
                return (Math.round(Math.random())-0.5);
            }
            var initBallTimer = function(ball, count){
                var timeoutValue = timerIncrement * count;
                window.setTimeout(function () {_self.initiateBall(ball, (0==count ? true : false))}, timeoutValue);
            }

            if (section && typeof this.sectionToBall[section] != 'undefined') {
                defaultBall = this.sectionToBall[section];
            }

            // generate random list of colours
            for (var x in this.sectionToBall) {
                if (this.sectionToBall[x] != defaultBall) {
                    ballList.push(this.sectionToBall[x]);
                }
            }
            ballList.sort(randOrd);
            // add first ball
            ballList.push(defaultBall);
            
            while (ballList.length > 0) {
                ball = ballList.pop();
                initBallTimer(ball, count);
                count++;
            }

            window.setTimeout(function () {_self.initiateHeadings(defaultBall)}, 500);
        },
        
        initiateBall: function(ball, active){
            var attribs = {
                width: (active ? this.activeWidth : this.inactiveWidth),
                height: (active ? this.activeHeight : this.inactiveHeight),
                opacity: (active ? this.activeOpacity : this.inactiveOpacity)
            };
            if (this.isIE) {
                delete attribs.opacity;
            }
            $( ['#home-menu #',ball,' .ball'].join('') ).animate(attribs, this.animateSpeed);
            if(active){
                this.openLink(ball, true);
            }
        },

        initiateHeadings: function(defaultBall){
            if (this.isIE) {
                $('#home-menu .heading').show();
                $(['#home-menu #',defaultBall,' .heading'].join('')).show();
                $('#info-box').show();
            } else {
                $('#home-menu .heading').fadeTo(this.animateSpeed, this.inactiveOpacity);
                $(['#home-menu #',defaultBall,' .heading'].join('')).fadeTo(this.animateSpeed, this.activeOpacity)
                $('#info-box').fadeIn(this.animateSpeed);
            }
        },

        openLink: function(ball, force){
            if(this.animating){
                //return;
            }
            var section = $( '#home-menu #'+ball );

            // if ball is inactive open it and reset others
            if(section.hasClass('inactive')){
                this.animating = true;

                var attribs = {
                    shrink : {
                        ball : {
                            opacity: this.inactiveOpacity,
                            width: this.inactiveWidth,
                            height: this.inactiveHeight
                        },
                        heading : {
                            opacity: this.inactiveOpacity,
                            marginTop: 0,
                            marginLeft: -48
                        }
                    },
                    grow : {
                        ball : {
                            opacity: this.activeOpacity,
                            width: this.activeWidth,
                            height: this.activeHeight
                        },
                        heading : {
                            opacity: this.activeOpacity,
                            marginTop: 40,
                            marginLeft: 0
                        }
                    }
                };
                if (this.isIE) {
                    delete attribs.shrink.ball.opacity;
                    delete attribs.shrink.heading.opacity;
                    delete attribs.grow.ball.opacity;
                    delete attribs.grow.heading.opacity;
                }
                
                // shrink any active ball(s) and fade any active heading(s)
                $('#home-menu .active').removeClass('active')
                        .addClass('inactive')
                        .each(function(){
                            $(this).animate({
                                marginTop: ( $(this).hasClass('bottom') ? 235 : 55 )
                            }, this.animateSpeed);
                        })
                        .find('.ball')
                        .animate(attribs.shrink.ball, this.animateSpeed)
                        .end()
                        .find('.heading')
                        .animate(attribs.shrink.heading, this.animateSpeed);

                // now grow the active one
                section.removeClass('inactive')
                        .addClass('active')
                        .each(function(){
                            if($(this).hasClass('bottom')){
                                $(this).animate({
                                    marginTop: 155
                                }, this.animateSpeed);
                            }
                        })
                        .find('.ball')
                        .animate(attribs.grow.ball, this.animateSpeed)
                        .end()
                        .find('.heading')
                        .animate(attribs.grow.heading, this.animateSpeed);      

                // Show information
                $( '#info-body li' + (!force ? ':visible' : '') ).fadeOut(500,function(){
                    $( ['#info-body #',ball,'-info'].join('') ).fadeIn(500, function(){
                        Fused_Navigation.animating = false;
                    });
                });
            }
        }
    }
}();

$(document).ready(function(){
    // setup events on balls
    var balls = ['blue', 'red', 'green', 'yellow'];
    for(var i=0; i<balls.length; i++){
        var colour = balls[i];
        $( ['#home-menu #',colour,' a'].join('') ).mouseover(function(){
            Fused_Navigation.openLink( $(this).parent().attr('id') );
        }).click(function(){
            this.blur();
            window.location = this.hash;
            return false;
        });
    }
    Fused_Navigation.initiateAnimation();
});