var sections, current_section, next_section, previous_section;

var section_data = {
    'home': {'angle': 0, 'color': '#669900' },     
    'web': { 'angle': -90, 'color': '#9A6600' },
    'film_tv': { 'angle': -180, 'color': '#2645AB' },
    'medical': { 'angle': -270, 'color': '#660032' }
}

jQuery.fn.initTrigger = function() {
                 
    jQuery.each(jQuery('div#navigation span'), function(key, navi_point) {
       var navi_section = jQuery(navi_point).attr('id').replace('navi_', '');

       jQuery(navi_point).bind({
            'mouseover.showSection': function() {

                if(navi_section == current_section) {
                    return false;
                }
                
                jQuery(this).showSection(navi_section);
            },
            'mouseleave': function() {

                if(navi_section == current_section) {
                    return false;
                }
                
                jQuery(this).showSection(current_section);
            }
        });
    });
    
    jQuery('span#spin_left').bind({
        
        'mouseover.spinLeft': function() {
            jQuery(this).showSection(previous_section);
        },
        'mouseleave': function() {
            jQuery(this).showSection(current_section);
        }
    });

    jQuery('span#spin_right').bind({        
        
        'mouseover.spinRight': function() {
            jQuery(this).showSection(next_section);
        },
        'mouseleave': function() {
            jQuery(this).showSection(current_section);
        }
    });
}

jQuery.fn.initSection = function(name) {
    
    if(section_data[name]) {
        current_section = name;
        previous_section = sections[(jQuery.inArray(current_section, sections) - 1 + sections.length) % sections.length];
        next_section = sections[(jQuery.inArray(current_section, sections) + 1) % sections.length];

        jQuery('img#globe').rotate(section_data[name]['angle']);
    }
}

jQuery.fn.showSection = function(name) {
    
    jQuery.each(jQuery('div#navigation span'), function(key, navi_point) {
        var navi_section = jQuery(navi_point).attr('id').replace('navi_', '');

        jQuery(navi_point).stop();
        
        if(navi_section == name) {
            jQuery(navi_point).animate({'font-size': '28px'});
        } else {
            jQuery(navi_point).animate({'font-size': '22px'});
        }
    });
    
    if(section_data[name]) {
        var colorized = [ 'div#header', 'div#oink_logo', '.navilink' ];
        var new_angle = section_data[name]['angle'];

        if(name != current_section) {

            if(jQuery(this).attr('id') == 'spin_left') {
                new_angle = section_data[current_section]['angle'] + 90;
            }

            if(jQuery(this).attr('id') == 'spin_right') {
                new_angle = section_data[current_section]['angle'] - 90;
            }
        }

        jQuery(document).unbind('.showSection');

        jQuery('#globe').rotate({
            'animateTo': new_angle,
            'callback': function() {
                jQuery(this).initTrigger();
            }
        }); 

        jQuery.each(colorized, function(key, el) {
            var css_params = {};

            if(jQuery(el).hasClass('navilink')) {
                css_params['color'] = section_data[name]['color'];
            } else {
                css_params['background-color'] = section_data[name]['color'];
            }

            jQuery(el).stop();
            jQuery(el).animate(css_params);
        });
    }
    

}

jQuery(document).ready(function() {
    
    jQuery.extend({
        'keys': function(obj) {
            var a = [];
            
            jQuery.each(obj, function(k) {
                a.push(k)
            });
            
            return a;
        }
    });
    
    sections = jQuery.keys(section_data);
    
    jQuery(document).bind({
        'mousemove.enableOnMove': function() {
            jQuery(this).initTrigger();
            jQuery(document).unbind('.enableOnMove');
        }
    });
});