$(function() {

    $('.gallery a').fancybox({
        overlayColor: '#000',
        transitionIn: 'elastic',
        transitionOut: 'elastic',
        titlePosition: 'inside',
        autoDimensions: true,
        autoScaling: true
    });

    var organise = (function() {
        var viewport = {},
            pane = {},
            padding = 0;

        arrange = function() {
            viewport = {
                    height: $(window).height(),
                    width:  $(window).width()
            };

            pane = {
                height: $('.screen').height(),
                width:  $('.screen').width()
            };

            padding = (viewport.width - pane.width) / 2;

            if(viewport.width < 960) {
                return;
            }

            $('.canvas').css({ left: padding, width: (viewport.width * $('.pane').length) }); 

            $('.left').css({ left: padding });
            $('.right').css({ right: padding });

            $('.pane').each(function(i) {
                $(this).css({ left: (i * viewport.width) });
            });
        };

        focus_panes = function() {
            var destination = {
                x: $('.active_pane').position().left,
                y: $('.active_screen').position().top
            };

            $('.canvas').css({ left: (-1 * destination.x) + padding, top: 0 });

            $('.active', '.nav').removeClass('active');
            $('li:eq('+$('.active_pane').index()+')', '.nav').addClass('active');

            if($('.screen', '.active_pane').length > 0) {
                if($('.subnav').css('display') != 'block') {
                    $('.subnav').css({ display: 'block', opacity: 0 }).stop().animate({ opacity: 1 });
                }

                $('.active', '.subnav').removeClass('active');
                $('li:eq('+$('.active_screen', '.active_pane').index()+')', '.subnav').addClass('active');
            } else {
                $('.subnav').stop().animate({ opacity: 0 }, function() {
                    $(this).css({ display: 'none', opacity: 1 });
                });
            }
        };

        disable_controls = function() {
            $('.control').unbind('click').bind('click', false).stop().animate({ opacity: 0.2 });
        };

        enable_right_control = function() {
            $('.right').stop().animate({ opacity: 1 });

            $('.right').one('click', function() {
                var current_pane_index = $('.active_pane').index();
                $('.active_pane').removeClass('active_pane');
                $('.pane:eq('+(current_pane_index + 1)+')').addClass('active_pane');
                
                $('.canvas').stop().animate({ left: '+=' + (-1 * viewport.width) }, function() {
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq(0)', '.pane').addClass('active_screen');
                    $('.pane:has(.screen)').css({ top: 0 });
                    init();
                });
                return false;
            });
        };

        enable_left_control = function() {
            $('.left').stop().animate({ opacity: 1 });

            $('.left').one('click', function() {
                var current_pane_index = $('.active_pane').index();
                $('.active_pane').removeClass('active_pane');
                $('.pane:eq('+(current_pane_index - 1)+')').addClass('active_pane');

                $('.canvas').stop().animate({ left: '-=' + (-1 * viewport.width) }, function() {
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq(0)', '.pane').addClass('active_screen');
                    $('.pane:has(.screen)').css({ top: 0 });
                    init();
                });
                return false;
            });
        };

        enable_up_control = function() {
            $('.up').stop().animate({ opacity: 1 });

            $('.up').one('click', function() {
                $('.active_pane').stop().animate({ top: '+=' + (1 * $('.active_pane .screen').outerHeight(true)) }, function() {
                    var active_screen = $('.active_screen', '.active_pane').index();
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq('+(active_screen - 1)+')', '.active_pane').addClass('active_screen');
                    $('.active', '.subnav').removeClass('active');
                    $('li:eq('+(active_screen - 1)+')', '.subnav').addClass('active');
                    init();
                });

                return false;
            });
        };

        enable_down_control = function() {
            $('.down').stop().animate({ opacity: 1 });

            $('.down').one('click', function() {
                $('.active_pane').stop().animate({ top: '-=' + (1 * $('.active_pane .screen').outerHeight(true)) }, function() {
                    var active_screen = $('.active_screen', '.active_pane').index();
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq('+(active_screen + 1)+')', '.active_pane').addClass('active_screen');
                    $('.active', '.subnav').removeClass('active');
                    $('li:eq('+(active_screen + 1)+')', '.subnav').addClass('active');
                    init();
                });

                return false;
            });
        };

        enable_controls = function() {
            var current_pane_index = $('.active_pane').index();

            if(current_pane_index === 0) {
                enable_right_control();
                return;
            }

            if(current_pane_index == $('.pane').length - 1) {
                enable_left_control();
                return;
            }

            if($('.pane:eq('+current_pane_index+') .screen').length > 0) {
                if($('.active_screen', '.active_pane').index() < ($('.screen', '.active_pane').length - 1)) {
                    enable_down_control();
                }

                if($('.active_screen', '.active_pane').index() > 0) {
                    enable_up_control();
                }
            }

            enable_left_control();
            enable_right_control();
        };

        var init = function() {
            disable_controls();
            arrange();
            focus_panes();
            enable_controls();

            $('.nav a').click(function() {
                var nav_index = $(this).parent().index();

                $('.canvas').stop().animate({ left: (-1 * nav_index * viewport.width) + padding }, function() {
                    $('.active_pane').removeClass('active_pane');
                    $('.pane:eq('+nav_index+')').addClass('active_pane');
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq(0)', '.pane').addClass('active_screen');
                    $('.pane:has(.screen)').css({ top: 0 });
                    init();
                });

                return false;
            });

            $('.subnav a').click(function() {
                var subnav_index = $(this).parent().index();

                $('.active_pane').stop().animate({ top: (-1 * subnav_index * $('.screen', '.active_pane').outerHeight(true)) }, function() {
                    var active_screen = $('.active_screen', '.active_pane').index();
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq('+(subnav_index)+')', '.active_pane').addClass('active_screen');
                    init();
                });
                
                return false;
            });

            $('.tertiary_nav a').click(function() {
                var tertiary_nav_index = $(this).parent().index() + 1;

                $('.canvas').stop().animate({ left: (-2 * viewport.width) + padding }, 1000, function() {
                    init();
                });
                
                $('.pane:eq(2)').stop().animate({ top: (-1 * tertiary_nav_index * $('.screen', '.pane:eq(2)').outerHeight(true)) }, function() {
                    $('.active_pane').removeClass('active_pane');
                    $('.pane:eq(2)').addClass('active_pane');
                    
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq('+tertiary_nav_index+')', '.pane:eq(2)').addClass('active_screen');
                });

                return false;
            });
 
            $('.brands_list a').click(function() {
                var brand_index = $(this).parent().index() + 1;

                $('.active_pane').stop().animate({ top: (-1 * brand_index * $('.screen', '.active_pane').outerHeight(true)) }, function() {
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq('+brand_index+')', '.active_pane').addClass('active_screen');
                    init();
                });

                return false;
            });

            $('.footer a').click(function() {
                $('.canvas').stop().animate({ left: padding }, function() {
                    $('.active_pane').removeClass('active_pane');
                    $('.pane:eq(0)').addClass('active_pane');
                    $('.active_screen').removeClass('active_screen');
                    $('.screen:eq(0)', '.pane').addClass('active_screen');
                    $('.pane:has(.screen)').css({ top: 0 });
                    init();
                });
                return false;
            });
        };

        $(window).resize(init);
        init();

    });

    $('body').css({ opacity: 0 });

    $(window).bind('load', function() {
        organise();
        $('body').stop().animate({ opacity: 1 });
    });

});