'use strict';
WebFont.load({
    custom: {
        families: ['FFDINWebProCondBoldItalic']
    }
});
var bypassHomeScreen;

/**
 * @ngdoc function
 * @name 5GumApp.controller:CanvasCtrl
 * @author Memo Ramirez & Danny Lee (animations canvas)
 * @description
 * # CanvasCtrl
 * CONTROLS THE DESKTOP AND TABLET CANVAS VIEWS
 */
angular.module('5GumApp')
    .controller('DeskTabCtrl',['$rootScope', '$scope', '$location', '$state', '$stateParams', '$timeout', 'apiService', 'viewService', function ($rootScope, $scope, $location, $state, $stateParams, $timeout, apiService, viewService) {
        // ======================================================
        //
        // ASSIGN APPROPRIATE GRID PAGE BASED ON CONTENT OR
        // PRODUCT ID
        // note: this will listen to $broadcast from cutToSection
        // function which returns the sectionID (0, 1, 2)
        // depending if it's going to five, main, or product.
        //
        // ======================================================

        $rootScope.$on('cut_to_section_from_deep_link', function(event, args) {
            if (args.section === 2) {
                if ($state.params.product) {
                    $timeout(transitionToProductGridPageFromDeepLink, 1200);
                }
            } else if (args.section === 1) {
                if ($state.params.section && !$state.params.id) {
                    $timeout(transitionToContentGridPageFromDeepLink, 1200);
                }
            }
        });

        // ================================================
        //
        // PRODUCT PAGE MENU SIDEBAR, PAGE-PILLS, & ARROWS
        // ** NOTE **
        // THIS NEEDS TO BE IN MAIN.JS SINCE IT RELIES
        // ON CANVAS METHODS TO OPERATE
        //
        // ================================================

        $scope.currentProductIndex = null;
        $scope.currentIndex = 0;

        // ** GENERAL TRANSITION STATE METHOD **
        // WILL CHANGE STATE (URL) FOR CONTENT AND PRODUCT SECTIONS (PAGES).
        $scope.updateUrlBasedOnState = function() {
            if ($rootScope.CURRENT_SECTION === "SECTION_PRODUCT") {
                // GET CURRENT MOUSE_INDEX
                var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
                // CHANGE STATE BASED ON PRODUCT SLUG
                if ($rootScope.productsExist) {
                    getSlugByIndex("SECTION_PRODUCT", currentIndex, true, function(response) {
                        var pageSlug = response;
                        $state.go('product', { product: pageSlug });
                    });
                    return pageSlug;
                } else {
                    getSlugByIndex("SECTION_PRODUCT", currentIndex, false, function(response) {
                        var pageSlug = response;
                        $state.go('product', { product: pageSlug });
                    });
                    return pageSlug;
                }
            } else if ($rootScope.CURRENT_SECTION === "SECTION_MAIN") {
                // GET CURRENT MOUSE_INDEX
                var currentIndex = getMouseIndexBySectionName("SECTION_MAIN");
                getSlugByIndex("SECTION_MAIN", currentIndex, false, function(response) {
                    var pageSlug = response;
                    $state.go('content', { section: pageSlug });
                });
                return pageSlug;
            } else {
                console.log("State change transition did not occur from section: " + section + ", and index: " + index);
            }
        };

        // GO TO MAIN PAGE
        // GENERAL 'GO' FUNCTION - TO GO TO ANOTHER STATE
        $scope.goToFive = function() {
            document.location = '/';
            //$state.go('five');
            //cutToSection(0);
        };

        $scope.goToPromotionPage = function() {
            ga('send', 'event', 'Navigation', 'Click', 'Promotions');
            document.location = $rootScope.promotions.Url;
        };

        // GO TO PRODUCTS PAGE - GLOBAL (NO PRODUCTS)
        $scope.goToProducts = function() {
            clearTimeout(bypassHomeScreen);
            ga('send', 'event', 'Navigation', 'Click', 'Products');
            $state.go('main', { directory: "product" });
            cutToSection(2);
            var individualProductSection = "SECTION_PRODUCT";
            cutToGridPageByIndex( individualProductSection, 0 );
            // GET CURRENT MOUSE_INDEX
            var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
            $scope.currentProductIndex = currentIndex;
            var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
            var nthListItem = currentIndex + 1;

            // CHANGE STATE BASED ON PRODUCT SLUG
            $scope.updateUrlBasedOnState();

            if (nthListItem === 1) {
                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                $scope.firstPage = true;
                $scope.lastPage = false;
            } else {
                $("li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                if (currentIndex == maxIndex) {
                    $scope.lastPage = true;
                    $scope.firstPage = false;
                } else {
                    $scope.lastPage = false;
                    $scope.firstPage = false;
                }
            }
        };

        $scope.goToIndividualProduct = function(id) {
            ga('send', 'event', 'Flavor', 'Click', id);
            var individualContentSection = "SECTION_PRODUCT";
            cutToGridPageByIndex( individualContentSection, id );
            var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
            var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
            var nthListItem = currentIndex + 1;

            // CHANGE STATE BASED ON PRODUCT SLUG
            $scope.updateUrlBasedOnState();

            if (nthListItem === 1) {
                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                $scope.firstPage = true;
                $scope.lastPage = false;
            } else {
                $("li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                if (currentIndex == maxIndex) {
                    $scope.lastPage = true;
                    $scope.firstPage = false;
                } else {
                    $scope.lastPage = false;
                    $scope.firstPage = false;
                }
            }
        };

        $scope.goToIndividualProductBySlug = function(slug) {
            ga('send', 'event', 'Global Flavor', 'Click', slug);
            if ($scope.fromState === $scope.toState) {
                if($rootScope.productsExist) {
                    getIndexBySlug("SECTION_PRODUCT", slug, true, function(response) {
                        var productIndex = response;
                        $state.go('product', { product: slug });
                        //$state.go('product', { product: productIndex });
                        var individualProductSection = "SECTION_PRODUCT";
                        cutToGridPageByIndex( individualProductSection, productIndex );
                        // GET CURRENT MOUSE_INDEX
                        var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
                        var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
                        var nthListItem = currentIndex + 1;

                        if (nthListItem === 1) {
                            $(".content-pagination ul li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li.gray-link").removeClass("gray-link");
                            $scope.firstPage = true;
                            $scope.lastPage = false;
                        } else {
                            $("li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                            $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                            if (currentIndex == maxIndex) {
                                $scope.lastPage = true;
                                $scope.firstPage = false;
                            } else {
                                $scope.lastPage = false;
                                $scope.firstPage = false;
                            }
                        }
                    });
                } else {
                    getIndexBySlug("SECTION_PRODUCT", slug, false, function(response) {
                        var productIndex = response;
                        $state.go('product', { product: slug });
                        //$state.go('product', { product: productIndex });
                        var individualProductSection = "SECTION_PRODUCT";
                        cutToGridPageByIndex( individualProductSection, productIndex );
                        // GET CURRENT MOUSE_INDEX
                        var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
                        var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
                        var nthListItem = currentIndex + 1;

                        if (nthListItem === 1) {
                            $(".content-pagination ul li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li.gray-link").removeClass("gray-link");
                            $scope.firstPage = true;
                            $scope.lastPage = false;
                        } else {
                            $("li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                            $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                            if (currentIndex == maxIndex) {
                                $scope.lastPage = true;
                                $scope.firstPage = false;
                            } else {
                                $scope.lastPage = false;
                                $scope.firstPage = false;
                            }
                        }
                    });
                }
            } else {
                $state.go('product', { product: slug });
                $scope.currentProductIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
            }
        };

        $scope.goToContentSection = function(id) {
            clearTimeout(bypassHomeScreen);
            var individualContentSection = "SECTION_MAIN";
            cutToGridPageByIndex( individualContentSection, id );
            var currentIndex = getMouseIndexBySectionName("SECTION_MAIN");
            var maxIndex = getMouseMaxBySectionName("SECTION_MAIN");
            var nthListItem = currentIndex + 1;

            // CHANGE STATE BASED ON PRODUCT SLUG
            $scope.updateUrlBasedOnState();

            if (nthListItem === 1) {
                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                $scope.firstPage = true;
                $scope.lastPage = false;
            } else {
                $("li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                if (currentIndex == maxIndex) {
                    $scope.lastPage = true;
                    $scope.firstPage = false;
                } else {
                    $scope.lastPage = false;
                    $scope.firstPage = false;
                }
            }
        };

        $scope.goUpOneContent = function() {
            clearTimeout(bypassHomeScreen);
            cutUpOneGridPageByIndex("SECTION_MAIN");
            // GET CURRENT MOUSE INDEX
            var currentIndex = getMouseIndexBySectionName("SECTION_MAIN");
            var maxIndex = getMouseMaxBySectionName("SECTION_MAIN");
            var nthListItem = currentIndex + 1;
            ga('send', 'event', 'Homepage', 'Scroll', 'Scroll_page' + nthListItem);

            // CHANGE STATE BASED ON PRODUCT SLUG
            $scope.updateUrlBasedOnState();

            if (nthListItem === 1) {
                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                $scope.firstPage = true;
                $scope.lastPage = false;
            } else {
                $("li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                if (currentIndex == maxIndex) {
                    $scope.lastPage = true;
                    $scope.firstPage = false;
                } else {
                    $scope.lastPage = false;
                    $scope.firstPage = false;
                }
            }
        };

        $scope.goUpOneProduct = function() {
            clearTimeout(bypassHomeScreen);
            cutUpOneGridPageByIndex("SECTION_PRODUCT");
            // GET CURRENT MOUSE INDEX
            var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
            $scope.currentProductIndex = currentIndex;
            var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
            var nthListItem = currentIndex + 1;
            ga('send', 'event', 'Global Flavor', 'Scroll', 'Scroll_page_' + nthListItem);

            // CHANGE STATE BASED ON PRODUCT SLUG
            $scope.updateUrlBasedOnState();

            if (nthListItem === 1) {
                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                $scope.firstPage = true;
                $scope.lastPage = false;
            } else {
                $("li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                if (currentIndex == maxIndex) {
                    $scope.lastPage = true;
                    $scope.firstPage = false;
                } else {
                    $scope.lastPage = false;
                    $scope.firstPage = false;
                }
            }
        };

        $scope.goDownOneContent = function() {
            clearTimeout(bypassHomeScreen);
            cutDownOneGridPageByIndex("SECTION_MAIN");
            // GET CURRENT MOUSE_INDEX
            var currentIndex = getMouseIndexBySectionName("SECTION_MAIN");
            var maxIndex = getMouseMaxBySectionName("SECTION_MAIN");
            var nthListItem = currentIndex + 1;
            ga('send', 'event', 'Homepage', 'Scroll', 'Scroll_world-flavor-page' + nthListItem);

            // CHANGE STATE BASED ON PRODUCT SLUG
            $scope.updateUrlBasedOnState();

            if (nthListItem === 1) {
                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                $scope.firstPage = true;
                $scope.lastPage = false;
            } else {
                $("li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                if (currentIndex == maxIndex) {
                    $scope.lastPage = true;
                    $scope.firstPage = false;
                } else {
                    $scope.lastPage = false;
                    $scope.firstPage = false;
                }
            }
        };

        $scope.goDownOneProduct = function() {
            clearTimeout(bypassHomeScreen);
            cutDownOneGridPageByIndex("SECTION_PRODUCT");
            // GET CURRENT MOUSE_INDEX
            var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
            $scope.currentProductIndex = currentIndex;
            var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
            var nthListItem = currentIndex + 1;
            ga('send', 'event', 'Global Flavor', 'Scroll', 'Scroll_world-flavor-page' + nthListItem);

            // CHANGE STATE BASED ON PRODUCT SLUG
            $scope.updateUrlBasedOnState();

            if (nthListItem === 1) {
                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                $scope.firstPage = true;
                $scope.lastPage = false;
            } else {
                $("li.blue-link").removeClass("blue-link");
                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                if (currentIndex == maxIndex) {
                    $scope.lastPage = true;
                    $scope.firstPage = false;
                } else {
                    $scope.lastPage = false;
                    $scope.firstPage = false;
                }
            }
        };

        // ============================================
        //
        // CANVAS ANIMATIONS AND VIEWS
        // MAIN AUTHOR: DANNY LEE
        // SECONDARY AUTHOR: MEMO RAMIREZ (NOTED)
        //
        // ============================================

        //GLOBAL/WINDOW VARS
        var IS_DEVICE=( /Android|blackberry|webOS|kindle|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) ? true : false;

        // TODO: THIS IS USED FOR TESTING - REMOVE ON PRODUCTION
        //var IS_DEVICE=true;

        var swipeData={};
        var mouseData={};
        var windowData={};

        //PIXI SETTING VARS
        var pixiSettings = { ratio: 1, defaultWidth:0, defaultHeight: 0, width: 400, height: 300 };
        var FivePixi = { stage: "", renderer: "", stageObjects: [] };
        var targetWidth = 1024, targetHeight = 768;

        //SECTION VARS
        var GRID_MAIN, mainDisplayObject;
        var GRID_PRODUCT;
        var FIVE_LOGO, productDisplayObject;
        $scope.SECTIONS_ARRAY = [];
        $rootScope.CURRENT_SECTION; //string from $scope.SECTIONS_ARRAY
        var IS_ANIMATING=false;

        //----------------------------------------------------------------------------------------------------------------------------------------------------------------------
        // TEST BTN HANDLERS------------------------------------------------------------------------------------------------------------------------------------------------
        // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------


        function testButtons(){

            $("#test-controller ul#test_a li").each( function(i,val){

                $(this).find("span").on({
                    click: function(){

                        if( $(this).text() == "FIVE" && 0 != this.MOUSE_INDEX ){
                            cutToSection(0);
                        }else if( $(this).text() == "MAIN GRIDROLL" && 1 != this.MOUSE_INDEX ){
                            cutToSection(1);
                        }else if( $(this).text() == "PRODUCT GRIDROLL" && 2 != this.MOUSE_INDEX ){
                            cutToSection(2);
                        }

                    }
                });

                $(this).find("li").on({
                    click: function(){

                        var id=0;
                        var section;
                        if( $(this).attr('id') == "mg0"){
                            section = "SECTION_MAIN";
                            id=0;
                        }else if( $(this).attr('id') == "mg1"){
                            section = "SECTION_MAIN";
                            id=1;
                        }else if( $(this).attr('id') == "mg2"){
                            section = "SECTION_MAIN";
                            id=2;
                        }else if( $(this).attr('id') == "mg3"){
                            section = "SECTION_MAIN";
                            id=3;
                        }

                        if( $(this).attr('id') == "pg0"){
                            section = "SECTION_PRODUCT";
                            id=0;
                        }else if( $(this).attr('id') == "pg1"){
                            section = "SECTION_PRODUCT";
                            id=1;
                        }

                        cutToGridPageByIndex( section, id );

                    }
                });

            });

            $("#test-controller ul#test_b li").each( function(i,val){

                $(this).find("span").on({
                    click: function(){

                        var id=0;
                        if( $(this).text() == "A_FIVE" && 0 != this.MOUSE_INDEX ){
                            id=0
                        }else if( $(this).text() == "A_MAIN GRIDROLL" && 1 != this.MOUSE_INDEX ){
                            id=1
                        }

                        autoAnimateToSection( id );
                    }
                });

                $(this).find("li").on({

                    click: function(){

                        var id=0;
                        var section;
                        if( $(this).attr('id') == "mg0"){
                            section = "SECTION_MAIN";
                            id=0;
                        }else if( $(this).attr('id') == "a_mg1"){
                            section = "SECTION_MAIN";
                            id=1;
                        }else if( $(this).attr('id') == "a_mg2"){
                            section = "SECTION_MAIN";
                            id=2;
                        }else if( $(this).attr('id') == "a_mg3"){
                            section = "SECTION_MAIN";
                            id=3;
                        }

                        cutToGridPageByIndex( section, id, true );

                    }

                });

            });

        }


        $("#g5").click(function(){
            $scope.SECTIONS_ARRAY[0].sectionInstance.glitchTheFive();
        });


        function updateOutputbox(){
            $("#test-outputbox").text($rootScope.CURRENT_SECTION);
        }

        //END TESTS ----------------------------------------------------------------------------------------------------------------------------------------


        function initPixi(){

            //set 3d perspective on parent conateiner for greensock 3dtransforms
            if( !IS_DEVICE ){
                TweenMax.set( $("#main"), { perspective: 1000 });
                //TweenMax.to( $("#main canvas") , 1, { rotationY:10});
            }

            var devicePixelRatio = window.devicePixelRatio;


            var interactive = true;
            FivePixi.stage =  new PIXI.Stage('0xff0000', interactive );
            FivePixi.stage.interaction=true;
            FivePixi.renderer = PIXI.autoDetectRenderer( pixiSettings.width, pixiSettings.height, { transparent: true, resolution: devicePixelRatio });
            pixiSettings.defaultWidth = pixiSettings.width = $(window).width();
            pixiSettings.defaultHeight = pixiSettings.height = $(window).height();
            FivePixi.renderer.resize( 400, 300 );

            $("#main").append( FivePixi.renderer.view );

            requestAnimFrame(animate);
            initWindowHandler();

            //ONCE PIXI STAGE IS CREATED SETUP SITE ASSETS
            createTheScenes();

        }

        //THIS FUNCTION IS IMPORTANT
        //This will instantiate each section and place data into an array
        function createTheScenes(){

            //CREATE CONTAINER TO HOLD EACH SECTION
            var fiveLogoDisplayObject = new PIXI.DisplayObjectContainer();
            fiveLogoDisplayObject.dx = fiveLogoDisplayObject.dy = 0;
            fiveLogoDisplayObject.visible = false;

            mainDisplayObject = new PIXI.DisplayObjectContainer();
            mainDisplayObject.dx = mainDisplayObject.dy = 0;
            mainDisplayObject.visible = false;

            productDisplayObject = new PIXI.DisplayObjectContainer();
            productDisplayObject.dx = productDisplayObject.dy = 0;
            productDisplayObject.visible = false;

            //INSTANTIATE EACH SECTION INSTANCE
            if ($state.params.directory == "content" || $state.params.directory == "product" || $state.params.id || $state.params.content || $state.params.product || $state.params.section || $state.params.productId) {
                FIVE_LOGO = new FiveLogo( fiveLogoDisplayObject, true );
            } else {
                FIVE_LOGO = new FiveLogo( fiveLogoDisplayObject, false );
            }
            GRID_MAIN = new FiveGrid( mainDisplayObject, $rootScope.content, 'main');

            if ($rootScope.productsExist) {

                GRID_PRODUCT = new FiveGrid( productDisplayObject, $rootScope.product, 'product');

            } else {
                GRID_PRODUCT = new FiveGrid( productDisplayObject, $rootScope.landing, 'product');
            }

            //ADD TO STAGE
            FivePixi.stage.addChild( fiveLogoDisplayObject );
            FivePixi.stage.addChild( mainDisplayObject );
            FivePixi.stage.addChild( productDisplayObject );

            //ONCE MODELS ARE BUILT THEN POPULATE SECTIONS ARRAY
            $scope.SECTIONS_ARRAY = [
                { "id": 0, "type": "logo", "section": "SECTION_FIVE", "sectionDisplayObject": fiveLogoDisplayObject, "sectionInstance": FIVE_LOGO  },
                { "id": 1, "type": "grid", "section": "SECTION_MAIN", "sectionDisplayObject": mainDisplayObject, "sectionInstance": GRID_MAIN  },
                { "id": 2, "type": "grid", "section": "SECTION_PRODUCT", "sectionDisplayObject": productDisplayObject, "sectionInstance": GRID_PRODUCT }
            ];





            //INITALIZE DEFAULT SECTION VIEW
            cutToSection( 0 );

        }

        //CALL THIS TO ANIMATE IN AND OUT
        var lastYPosition = 0;
        function autoAnimateToSection( sectionID ){

            var animationDuration = .75;
            var ease = Ease.EaseNone;

            //set the selected section displayObject and instance
            var curSecContainer = $scope.SECTIONS_ARRAY[ sectionID ].sectionDisplayObject;
            var curSecInstance = $scope.SECTIONS_ARRAY[ sectionID ].sectionInstance;

            if( $rootScope.CURRENT_SECTION == "SECTION_FIVE" && !IS_ANIMATING ){

                //since we are in  SECTION_FIVE - assign FIVE displayObject
                var fiveObj = $scope.SECTIONS_ARRAY[ 0 ].sectionDisplayObject;

                if( getSectionNameByID( sectionID ) == "SECTION_MAIN" ){

                    //declare/set new section
                    $rootScope.CURRENT_SECTION = getSectionNameByID( sectionID );

                    //animate Current section OUT
                    TweenMax.fromTo( fiveObj, animationDuration, { y: fiveObj.dy }, { onStart: transitionBegin, y: -(fiveObj.height*2), ease: ease, delay: .15 } );

                    //animate new section IN
                    curSecInstance.resetGrid();

                    //animate GRID IN
                    TweenMax.fromTo( curSecContainer, animationDuration, {  y: $(window).height() }, { onStart: enableDisplayObject, onStartParams:[curSecContainer], y: curSecContainer.dy, ease: ease, delay: .15, onComplete: transitionEnd, onCompleteParams:[ fiveObj ] } );

                    //glitch the 5
                    //$scope.SECTIONS_ARRAY[0].sectionInstance.glitchTheFive();
                    //$scope.SECTIONS_ARRAY[0].sectionInstance.transitionLogoOut()

                    //glitch the grid
                    glitchGridOnDemand(sectionID, 600, 1, true);

                }

            } else if( $rootScope.CURRENT_SECTION == "SECTION_MAIN" && !IS_ANIMATING ){

                //since we are in SECTION_MAIN - assign gridRoll displayObject
                var gridrollObj = $scope.SECTIONS_ARRAY[ 1 ].sectionDisplayObject;

                if( getSectionNameByID( sectionID ) == "SECTION_FIVE" ){

                    //declare/set new section
                    $rootScope.CURRENT_SECTION = getSectionNameByID( sectionID );

                    //animate Current section OUT AND then RESET the grid to default
                    TweenMax.fromTo( gridrollObj, animationDuration, {  y: gridrollObj.dy }, { onStart: transitionBegin, y: $(window).height(), ease: ease, delay: .15, onComplete: curSecInstance.resetGrid } );

                    //animate FIVE IN
                    TweenMax.fromTo( curSecContainer, animationDuration, {  y: -$(window).height() }, { onStart: enableDisplayObject, onStartParams:[curSecContainer], y: curSecContainer.dy, ease: ease, delay: .15, onComplete: transitionEnd, onCompleteParams:[ gridrollObj ] } );

                    //glitch the 5
                    //$scope.SECTIONS_ARRAY[0].sectionInstance.transitionLogoIn( );
                    //$scope.SECTIONS_ARRAY[0].sectionInstance.glitchTheFive();

                    //TweenMax.delayedCall( .5, tg )

                    //function tg(){$scope.SECTIONS_ARRAY[0].sectionInstance.glitchTheFive();}

                    //glitch the grid
                    glitchGridOnDemand(sectionID, 50 , 3, true);

                }

            }else if( $rootScope.CURRENT_SECTION == "SECTION_PRODUCT" && !IS_ANIMATING ){

                //HANDLER FOR WHEN COMING BACK FROM THE PRODUCT PAGE
                cutToSection( sectionID, true );
                disableDisplayObject( sectionID );

            }

            //DELETE THIS ON LAUNCH
            updateOutputbox();

        }

        function glitchGridOnDemand( sectionID, duration, iteration, isToFromIntro ){
            if( $scope.SECTIONS_ARRAY[ sectionID ].sectionInstance ){
                $scope.SECTIONS_ARRAY[ 1 ].sectionInstance.glitchTheGrid( duration, iteration );
            }
            if (isToFromIntro) {
                if ($rootScope.CURRENT_SECTION == "SECTION_FIVE") {
                    transitionToStateFive();
                } else if ($rootScope.CURRENT_SECTION == "SECTION_MAIN") {
                    transitionToStateMain();
                }
            }
        }

        //CALL THIS WHEN YOU NEED TO CHANGE OUT THE SECTIONS
        function cutToSection( sectionID, fromAnimation, fromDeepLink ){

            (fromAnimation) ? fromAnimation=true : fromAnimation=false;

            for( var i=0; i<$scope.SECTIONS_ARRAY.length; i++ ){
                if( $scope.SECTIONS_ARRAY[i].id == sectionID){

                    //update current section
                    $rootScope.CURRENT_SECTION=$scope.SECTIONS_ARRAY[i].section;
                    enableDisplayObject( $scope.SECTIONS_ARRAY[i].sectionDisplayObject );
                    resetDisplayObjectToDefault( $scope.SECTIONS_ARRAY[i].sectionDisplayObject );

                    if( $scope.SECTIONS_ARRAY[i].type == "grid" ){
                        $scope.SECTIONS_ARRAY[i].sectionInstance.resetGrid();
                    }

                    //***!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                    //updateOutputbox();//DELETE THIS WHEN PORTING TO ANGULAR;
                    //***!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

                }else{

                    resetDisplayObjectToDefault( $scope.SECTIONS_ARRAY[i].sectionDisplayObject );
                    disableDisplayObject( $scope.SECTIONS_ARRAY[i].sectionDisplayObject );

                }
            }

            if (fromDeepLink) {
                $rootScope.$broadcast('cut_to_section_from_deep_link', { section: sectionID });
            }
        }

        //GOTO GRID BY ID
        function cutToGridPageByIndex( _section, _index, _isGlitch ){

            var isGlitch = _isGlitch || false;

            //if different section then change to current section before going to gridrollindex
            if( $rootScope.CURRENT_SECTION != _section ){
                cutToSection( getSectionIDByName( _section ) );
            }

            //Assign ID and then call the section object for the repective section
            var sectionID=-1;
            if( $rootScope.CURRENT_SECTION == "SECTION_MAIN" ){
                sectionID=1;
            }else if( $rootScope.CURRENT_SECTION == "SECTION_PRODUCT" ){
                sectionID=2
            }

            $scope.SECTIONS_ARRAY[ sectionID ].sectionInstance.forceGridChangeToIndex( _index );

            if(isGlitch){
                if( $scope.SECTIONS_ARRAY[ sectionID ].sectionInstance ){
                    //$scope.SECTIONS_ARRAY[ sectionID ].sectionInstance.glitchTheGrid();
                    glitchGridOnDemand( sectionID, 250, 1 )
                }
            }
        }

        //GO UP ONE GRID BY CURRENT INDEX
        function cutUpOneGridPageByIndex( _section, _isGlitch ){

            var isGlitch = _isGlitch || false;

            //if different section then change to current section before going to gridrollindex
            if( $rootScope.CURRENT_SECTION != _section ){
                cutToSection( getSectionIDByName( _section ) );
            }

            //Assign ID and then call the section object for the respective section
            var sectionID=-1;
            if( $rootScope.CURRENT_SECTION == "SECTION_MAIN" ){
                sectionID=1;
            }else if( $rootScope.CURRENT_SECTION == "SECTION_PRODUCT" ){
                sectionID=2
            }

            $scope.SECTIONS_ARRAY[ sectionID ].sectionInstance.forceGridChangeUpOne();

            if(isGlitch){
                if( $scope.SECTIONS_ARRAY[ sectionID ].sectionInstance ){
                    //$scope.SECTIONS_ARRAY[ sectionID ].sectionInstance.glitchTheGrid();
                    glitchGridOnDemand( sectionID, 250, 1 )
                }
            }
        }

        // FIND INDEX ID BASED ON SLUG
        function getIndexBySlug(_section, _slug, _hasProducts, callback) {
            if (_section == "SECTION_MAIN") {
                for (var k = 0; k < $rootScope.content.length; k++) {
                    if ($rootScope.content[k].Id == _slug) {
                        callback(k);
                    }
                }
            } else if (_section == "SECTION_PRODUCT") {
                if (_hasProducts) {
                    for (var i = 0; i < $rootScope.product.length; i++) {
                        if ($rootScope.product[i].Id == _slug) {
                            callback(i);
                        }
                    }
                } else {
                    for (var j = 0; j < $rootScope.landing.length; j++) {
                        if ($rootScope.landing[j].Id == _slug) {
                            callback(j);
                        }
                    }
                }
            }
        }

        // FIND SLUG BASED ON INDEX
        function getSlugByIndex(_section, _index, _hasProducts, callback) {
            if (_section == "SECTION_MAIN") {
                callback($rootScope.content[_index].Id);
            } else if (_section == "SECTION_PRODUCT") {
                if (_hasProducts) {
                    callback($rootScope.product[_index].Id);
                } else {
                    callback($rootScope.landing[_index].Id);
                }
            }
        }

        //GOTO GRID BY ID
        function cutDownOneGridPageByIndex( _section, _isGlitch ){

            var isGlitch = _isGlitch || false;

            //if different section then change to current section before going to gridrollindex
            if( $rootScope.CURRENT_SECTION != _section ){
                cutToSection( getSectionIDByName( _section ) );
            }

            //Assign ID and then call the section object for the respective section
            var sectionID=-1;
            if( $rootScope.CURRENT_SECTION == "SECTION_MAIN" ){
                sectionID=1;
            }else if( $rootScope.CURRENT_SECTION == "SECTION_PRODUCT" ){
                sectionID=2
            }

            $scope.SECTIONS_ARRAY[ sectionID ].sectionInstance.forceGridChangeDownOne();

            if(isGlitch){
                if( $scope.SECTIONS_ARRAY[ sectionID ].sectionInstance ){
                    //$scope.SECTIONS_ARRAY[ sectionID ].sectionInstance.glitchTheGrid();
                    glitchGridOnDemand( sectionID, 250, 1 )
                }

            }
        }

        function transitionBegin(){
            IS_ANIMATING=true;
        }

        function transitionEnd( obj ){
            IS_ANIMATING=false;
            if(obj) {
                disableDisplayObject( obj );
            }
        }

        function enableDisplayObject( obj ){
            obj.visible = true;
            obj.renderable = true;
        }

        function disableDisplayObject( obj ){
            obj.visible = false;
            obj.renderable = false;
        }

        // ADD STATE TRANSITION METHOD FOR SECTION_FIVE
        function transitionToStateFive() {
            $state.transitionTo( 'five', null, { location: true});
        }

        // ADD STATE TRANSITION METHOD FOR SECTION_MAIN
        function transitionToStateMain() {
            $state.transitionTo( 'main', { directory: 'content' }, { location: true});
        }

        function transitionToProductGridPageFromDeepLink() {
            if($rootScope.productsExist) {
                getIndexBySlug("SECTION_PRODUCT", $state.params.product, true, function(response) {
                    $scope.goToIndividualProduct(response);
                });
            } else {
                getIndexBySlug("SECTION_PRODUCT", $state.params.product, false, function(response) {
                    $scope.goToIndividualProduct(response);
                });
            }
        }

        function transitionToContentGridPageFromDeepLink() {
            getIndexBySlug("SECTION_MAIN", $state.params.section, false, function(response) {
                $scope.goToContentSection(response);
            });
        }

        function _gotoFiveLogo(){
            autoAnimateToSection( 0 );
            //cutToSection(0);
        }

        function resetDisplayObjectToDefault( obj ){
            TweenMax.to( obj, 0,  { x: obj.dx, y: obj.dy } );
        }

        function setOffScreen( obj ){
            TweenMax.to( obj, 0,  { y: -$(window).width } );
        }

        function getSectionIDByName( _sectionName ){
            for( var i=0; i<$scope.SECTIONS_ARRAY.length; i++ ){
                if( $scope.SECTIONS_ARRAY[i].section == _sectionName )
                    return $scope.SECTIONS_ARRAY[i].id;
            }
        }

        function getSectionNameByID( _sectionID ){
            for( var i=0; i<$scope.SECTIONS_ARRAY.length; i++ ){
                if( $scope.SECTIONS_ARRAY[i].id == _sectionID )
                    return $scope.SECTIONS_ARRAY[i].section;
            }
        }

        function getMouseIndexBySectionName(_sectionName) {
            if (_sectionName === "SECTION_MAIN") {
                return GRID_MAIN.getMouseIndex();
            } else {
                return GRID_PRODUCT.getMouseIndex();
            }
        }

        function getMouseMaxBySectionName(_sectionName) {
            if (_sectionName === "SECTION_MAIN") {
                return GRID_MAIN.getMouseMax();
            } else {
                return GRID_PRODUCT.getMouseMax();
            }
        }

        //MAIN ANIMATION LOOP - ALL OTHER SECTION/PIXI LOOPS SHOULD BE ROUTED VIA THIS requestAnimationFrame handler
        function animate() {

            requestAnimFrame( animate );

            if(GRID_MAIN) {
                GRID_MAIN.renderGrid();
            }

            if(GRID_PRODUCT) {
                GRID_PRODUCT.renderGrid();
            }

            if(FIVE_LOGO) {
                FIVE_LOGO.renderGrid();
            }

            //UPDTE PIXI RENDERER - DO NOT DELETE
            FivePixi.renderer.render( FivePixi.stage );

            //STATS.JS UPDATER - !!!DELETE ON LAUNCH!!!
            updateStats();
        }

        //-------------------------------------------------------------------------------------------------------------------------------------------
        // INTERACTIONS ------------------------------------------------------------------------------------------------------------------------------
        // -------------------------------------------------------------------------------------------------------------------------------------------

        $(document).mouseenter(function(){
            mouseData.inWindow = true;
        });

        $(document).mouseleave(function(){
            mouseData.inWindow = false;
            TweenMax.to( $("#main canvas") , .25, { rotationY: 0});
        });

        $(document).mousemove( function(e){

            mouseData.mouseX = e.pageX;
            mouseData.mouseY = e.pageY;

            $rootScope.mouseMidPercent =  ( mouseData.mouseX / ( -$(window).width() / 2 ) ) + 1;
            TweenMax.to( $("#main canvas"), .25, { rotationY: $rootScope.mouseMidPercent * 10 });

        });

        if( IS_DEVICE ) {
            var IS_TOUCH=false;
            $(document).swipe( {

                swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData) {
                    if(phase==$.fn.swipe.phases.PHASE_START) {
                        IS_TOUCH=true;
                    }
                    if(phase==$.fn.swipe.phases.PHASE_END) {
                        IS_TOUCH=false;
                    }

                },

                //Generic swipe handler for all directions
                swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
                    swipeData = { event: event, direction: direction, distance: distance, fingerCount: fingerCount, fingerData: fingerData  };

                    if( $rootScope.CURRENT_SECTION == "SECTION_FIVE"){

                        if( direction == "up" ){
                            //console.log("SWIPE", direction);
                            autoAnimateToSection( 1 );
                        }
                    }else{

                        if( GRID_MAIN ) {
                            GRID_MAIN.swipeUpdate();
                        }

                        if( GRID_PRODUCT ) {
                            GRID_PRODUCT.swipeUpdate();
                        }
                    }
                }
            });
        }

        //USE A DEBOUNCE FUNTION TO  HANDLE TOUCH SCROLL
        $('#main').click(function(){
            if( $rootScope.CURRENT_SECTION == "SECTION_FIVE" ) {
                //console.log("MAIN CLICK THINKS IT'S IN SECTION: " + $rootScope.CURRENT_SECTION);

                $state.go('main', { directory: 'content' });
                autoAnimateToSection( 1 );
            }
        });

        $('#intro-arrow').on({
            click: function(){
                if( $rootScope.CURRENT_SECTION == "SECTION_FIVE" )
                    $state.go('main', { directory: 'content' });
                autoAnimateToSection( 1 );
            }
        });

        $(document).on('mousewheel', function(event) {
            //event.preventDefault();
            if ( (status == 401) || (status == 403) || (status == 404) || (status == 500)) {
                $rootScope.CURRENT_SECTION = "SECTION_ERROR";
            }
            updateMouse( event );
        });

        var updateMouse = _.debounce( function(event) {

            mouseData = event;

            if( $rootScope.CURRENT_SECTION == "SECTION_FIVE"){

                if( mouseData.deltaY < 0 && $rootScope.CURRENT_SECTION == "SECTION_FIVE" )
                    autoAnimateToSection( 1 );

            }else{

                if(FIVE_LOGO && $rootScope.CURRENT_SECTION == "SECTION_FIVE" )
                    FIVE_LOGO.mouseWheelUpdate();

                if(GRID_MAIN && $rootScope.CURRENT_SECTION == "SECTION_MAIN" )
                    GRID_MAIN.mouseWheelUpdate();

                if(GRID_PRODUCT && $rootScope.CURRENT_SECTION == "SECTION_PRODUCT" )
                    GRID_PRODUCT.mouseWheelUpdate();
            }
            updateMouse.cancel();

        }, 150, true );



        $( document ).keydown(function( event ) {
            if( $rootScope.CURRENT_SECTION == "SECTION_FIVE"){
                if (event.which == "40") {
                    autoAnimateToSection(1);
                }
            } else if ($rootScope.CURRENT_SECTION == "SECTION_MAIN") {
                if( event.which == "38" ){
                    $scope.goUpOneContent();
                } else if( event.which == "40" ){
                    $scope.goDownOneContent();
                }
            } else if ($rootScope.CURRENT_SECTION == "SECTION_PRODUCT") {
                if( event.which == "38" ){
                    $scope.goUpOneProduct();
                } else if( event.which == "40" ){
                    $scope.goDownOneProduct();
                }
            }
        });



        //UTILITIES -------------------------------------------------------------------------------------------------------------------------------------------

        function initWindowHandler(){
            window.addEventListener( 'resize', rendererResize );
            window.addEventListener('deviceOrientation', rendererResize);
        }

        function debounce(func, wait, immediate) {
            var timeout;
            return function() {
                var context = this, args = arguments;
                var later = function() {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        }

        var killbounce = function(_func, _wait){

            var wheel = 0,
                oldDate = new Date(),
                scrollPos = 0;

            return function() {

                var context         =   this,
                    args            =   arguments,
                    event           =   args[0],
                    getDeltaY       =   event.deltaY,
                    newDate         =   new Date(),
                    newTime         =   newDate.getTime(),
                    oldTime         =   oldDate.getTime(),
                    scrollAllowed   =   true;


                if( wheel < 10 && (newTime-oldTime) < _wait ) {
                    scrollPos -= getDeltaY*(10-wheel);
                    wheel++;
                }
                else {
                    if( (newTime-oldTime) > _wait ) {
                        wheel = 0;
                        scrollPos -= getDeltaY*60;
                    }
                    else {
                        scrollAllowed = false;
                    }
                }
                oldDate = new Date();
                if( scrollAllowed ) {
                    _func.apply(context, args);
                }
            }
        };

        var rendererResize = function (init) {

            var width = window.innerWidth;
            var height = window.innerHeight;
            var targetScale;

            //Set the canvas size and display size
            if ($(window).width() > 930) {
              $("#main canvas").width( width * window.devicePixelRatio );
              $("#main canvas").height( height * window.devicePixelRatio );
              $("#main canvas")[0].style.marginLeft = '0px';
              $("#main canvas")[0].style.marginTop = '0px';
              $("#main canvas")[0].style.width = width + 'px';
              $("#main canvas")[0].style.height = height + 'px';

            //Resize the PIXI renderer
              FivePixi.renderer.resize(  $("#main canvas").width(),  $("#main canvas").height() );
            } else if ($(window).width() > 700) {
              $("#main canvas")[0].style.height = '550px';
              $("#main canvas")[0].style.marginLeft = '40px';
              $("#main canvas")[0].style.marginTop = '40px';
              $("#main canvas")[0].style.width = '800px';
              if (init === 'load') {
                FivePixi.renderer.resize($("#main canvas").height(),  $("#main canvas").height() );
                rendererResize();
              }
            } else {
              $("#main canvas")[0].style.height = '500px';
              $("#main canvas")[0].style.marginLeft = '20px';
              $("#main canvas")[0].style.marginTop = '20px';
              $("#main canvas")[0].style.width = '700px';
              if (init === 'load') {
                FivePixi.renderer.resize($("#main canvas").height(),  $("#main canvas").height() );
                rendererResize();
              }
            }

            /**
             * Scale the canvas horizontally and vertically keeping in mind the screen estate we have
             * at our disposal. This keeps the relative game dimensions in place.
             */

            if (height / targetHeight < FivePixi.stage / targetWidth) {
                FivePixi.stage.scale.x =  FivePixi.stage.scale.y = height / targetHeight;
                FivePixi.ratio = height / targetHeight;
            } else {
                FivePixi.stage.scale.x = FivePixi.stage.scale.y = width / targetWidth;
                FivePixi.ratio = width / targetWidth;
            }

            //fiveLogoDisplayObject.scale.x = fiveLogoDisplayObject.scale.y = FivePixi.stage.scale.x;
            //mainDisplayObject.scale.x = mainDisplayObject.scale.y = mainDisplayObject.scale.x;


            /**
             * Some sugar
             * Set the x horizontal center point of the canvas after resizing.
             * This should be used for engines which calculate object position from anchor 0.5/0.5
             */
            FivePixi.stage.pivot.x = -( width * ( 1 / FivePixi.stage.scale.x) / 2 ) * window.devicePixelRatio;
            FivePixi.stage.pivot.y = -( width * ( 1 / FivePixi.stage.scale.y) / 2 ) * window.devicePixelRatio;


            /**
             * iOS likes to scroll when rotating - fix that
             */
            window.scrollTo(0, 0);


            //CALL RESIZE HANDLERS FOR EACH OBJECT
            if(GRID_MAIN)
                GRID_MAIN.resize();

            if(GRID_PRODUCT)
                GRID_PRODUCT.resize();

            if(FIVE_LOGO)
                FIVE_LOGO.resize();


        };

        var stats;
        function initStats(){
            stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms

            // align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.body.appendChild( stats.domElement );

            //requestAnimationFrame( update );
        }

        var updateStats = function () {
            stats.begin();
            // monitored code goes here
            stats.end();
            //requestAnimationFrame( updateStats );
        };

        function _getCurrentSection(){
            return $rootScope.CURRENT_SECTION;
        }

        //GETTERS/SETTERS
        function _getWindowData(){ return windowData; }
        function _getMouseData(){ return mouseData; }
        function _getSwipeData(){ return swipeData; }
        function _getPixiObj(){ return FivePixi; }
        function _setPixiObj( val ){ FivePixi.stageObjects.push( val ); }
        function _checkDevice(){ return IS_DEVICE }

        // ============================================
        //
        // FROM FiveGrid.js (ui folder)
        //
        // ** NOTE **
        // PLACED IN MAIN.JS TO ACCESS $state, $scope
        // AND VIEWS
        //
        // ============================================

        var FiveGrid = function(){

            function FiveGrid( _instanceContainer, _data, _section ){
                var logoItem;
                this.assetsLoader;
                this.fivegridTempContainer;

                this.instanceContainer = _instanceContainer;

                //GRID LAYOUT VARS
                this.ACROSS_SUM = 0;
                this.DOWN_INDEX = 0;
                this.DOWN_SUM = 0;
                //this.BASE_CARD_WIDTH = this.BASE_CARD_HEIGHT = ( _checkDevice() ) ? 150 : 223;
                this.BASE_CARD_WIDTH = this.BASE_CARD_HEIGHT = ( _checkDevice() ) ? 100 : 223;
                this.GUTTER = ( _checkDevice() ) ? 5 : 10;
                this.MOBILE_BUFFER = 0;
                this.INDENT = 75;
                this.IS_FIRST_ROW=true;
                this.MOUSE_THRESHOLD_COUNT=0;
                this.MOUSE_THRESHOLD_MAX=2;
                this.verticalGridStack = 0;

                this.discoveryText;

                this.JSONData = _data;
                this.gridType = _section;

                //MOUSEWHEEL VARS
                this.MOUSE_INDEX=0;
                this.MOUSE_MIN=0;
                this.MOUSE_MAX = this.JSONData.length - 1;

                this.blurFilter = new PIXI.BlurFilter();
                this.glitchFilter = new PIXI.FiveGlitch();
                this.dotFilter = new PIXI.DotScreenFilter();
                this.grayFilter = new PIXI.GrayFilter();
                this.rgbSplit = new PIXI.RGBSplitFilter();
                this.rgbSplit.red.x = 0;
                this.rgbSplit.red.y = 0;
                this.rgbSplit.green.x = 0;
                this.rgbSplit.green.y = 0;
                this.rgbSplit.blue.x = 0;
                this.rgbSplit.blue.y = 0;

                this.paths=[];
                this.gridBlockArray = new Array();
                this.gridItemArray = new Array();
                this.gridGlitchObject;

                this.debounceLastVal=0;

                this.testCount=0;
                this.isReached=false;

                this.init();
            }

            FiveGrid.prototype.init = function(){
                this.preloadAssets();
            };

            FiveGrid.prototype.preloadAssets = function(){

                this.fivegridTempContainer = new PIXI.DisplayObjectContainer();
                this.gridGlitchObject = new FiveGlitchEffect( _getPixiObj().stage, _getPixiObj().renderer, _getMouseData() );


                //add assets to loader
                for(var i=0; i<this.JSONData.length; i++){

                    for(var j=0; j<this.JSONData[i].Section.length; j++){
                        if (this.JSONData[i].Section[j].ImgPath) {
                            var imgPath = this.JSONData[i].Section[j].ImgPath;
                            this.paths.push( imgPath );
                        }
                    }
                }

                this.item_social_vine = "img/logo_vi.png";
                this.item_social_twitter = "img/logo_tw.png";
                this.item_social_youtube = "img/logo_yt.png";
                this.item_social_instagram = "img/logo_ig.png";
                this.item_play_instagram = "img/ico-play.png";
                this.item_plusitem = "img/plus_item.png";
                this.paths.push( this.item_social_vine, this.item_social_twitter, this.item_social_youtube, this.item_social_instagram, this.item_plusitem, this.item_play_instagram );

                //loadASsets
                this.assetsLoader = new PIXI.AssetLoader( this.paths );

                if( _checkDevice() ){
                    //had to bind an onComplete handler to proxy the scopeobject into buildscene function
                    this.assetsLoader.addEventListener('onComplete', this.buildMobileScene.bind(this) );
                }else{
                    //had to bind an onComplete handler to proxy the scopeobject into buildscene function
                    this.assetsLoader.addEventListener('onComplete', this.buildScene.bind(this) );
                }
                this.assetsLoader.load(); //begin load
            };



            FiveGrid.prototype.buildMobileScene = function(){
                var typeOfGrid = this.gridType;

                var lastHeight=0;
                var isTwo=false;

                for(var i=0; i<this.JSONData.length; i++){

                    var gridBlock = new PIXI.DisplayObjectContainer();
                    gridBlock.name = "section" + i;

                    //RESET VARS FOR EACH GRID BLOCK
                    this.ACROSS_SUM=0;
                    this.DOWN_INDEX=0;
                    this.DOWN_SUM=0;
                    this.COLUMN = 0; //for mobile should be 0 or 1 (left or right respectively)

                    for(var j=0; j<this.JSONData[i].Section.length; j++){

                        //Detrmine the max width for layout breakpoint based on number of items in each block
                        var MAX_BREAK_WIDTH = this.determineMobileMaxBreakWidth( this.JSONData[i].Section.length );

                        //CREATE PIXI SPRITE OBJECT

                        if( this.JSONData[i].Section[j].Type == "text" ){

                            var itemObj = new PIXI.DisplayObjectContainer();

                            var alignment = (j==0) ? "right" : "left";

                            var txt1 = new PIXI.Text( this.JSONData[i].Section[j].Text,     {
                                wordWrap: "true",
                                wordWrapWidth: this.BASE_CARD_WIDTH ,
                                font: "16px FFDINWebProCondBoldItalic",
                                fill: "#ffffff",
                                align: this.JSONData[i].Section[j].Alignment,
                                stroke: 'rgba(255,0,0,0)',
                                strokeThickness: 0,
                                ease: Ease.easNone
                            });

                            txt1.y = 20;


                            var bgShape = new PIXI.Graphics();
                            bgShape.beginFill(0x000000);
                            bgShape.drawRect( 0, 0, this.BASE_CARD_WIDTH, this.BASE_CARD_HEIGHT );
                            itemObj.addChild( bgShape );

                            itemObj.width = this.BASE_CARD_WIDTH;
                            itemObj.height = this.BASE_CARD_HEIGHT;
                            itemObj.addChild( txt1 );
                            itemObj.desc="single";

                        }else if( this.JSONData[i].Section[j].Type == "text" ){
                            itemObj.defaultCursor = "default";
                        }else{
                            itemObj = PIXI.Sprite.fromImage( this.JSONData[i].Section[j].ImgPath );

                            if( itemObj.width >= 233 ){
                                var ratio = itemObj.height/itemObj.width;
                                itemObj.width = ( this.BASE_CARD_WIDTH * 2 ) + this.GUTTER;
                                itemObj.height = itemObj.width * ratio;
                                itemObj.desc="double";
                            }else{
                                itemObj.width = this.BASE_CARD_WIDTH;
                                itemObj.height = this.BASE_CARD_HEIGHT;
                                itemObj.desc="single";
                            }
                            itemObj.defaultCursor = "pointer";
                        }

                        //NEED TO SET FIRST HEIGHT IN ORDER FOR THE GRID STACK TO PLACE CORRECTLY
                        if(j==0){ lastHeight = itemObj.height; }

                        itemObj.interactive=true;
                        itemObj.buttonMode=true;

                        var parentScope = this;
                        itemObj.id = this.JSONData[i].Section[j].Id;



                        //if ACROSS_SUM exceeds MAX BREAK WIDTH then add the linebreak
                        if( itemObj.width > this.BASE_CARD_WIDTH  && j!=0 ){
                            this.ACROSS_SUM=0;
                            this.DOWN_SUM+=(lastHeight+this.GUTTER);
                            lastHeight=itemObj.height;
                        }

                        //if ACROSS_SUM exceeds MAX BREAK WIDTH then add the linebreak
                        if( this.ACROSS_SUM > MAX_BREAK_WIDTH ){
                            this.ACROSS_SUM=0;
                            this.DOWN_SUM+=(lastHeight+this.GUTTER);
                            lastHeight=itemObj.height;
                        }



                        itemObj.x = this.ACROSS_SUM;
                        itemObj.y = this.DOWN_SUM;

                        itemObj.dx = itemObj.x;
                        itemObj.dy = itemObj.y;


                        //INCREMENT ACROSS SUM
                        this.ACROSS_SUM += ( itemObj.width + this.GUTTER );

                        //ADD TO repectful stage CONTIAINER
                        gridBlock.addChild( itemObj );

                        //ADD TO GIRD ITEM CONTAINER
                        this.gridItemArray.push( itemObj );

                        //ADD EVENT HANDLERS
                        itemObj.id = this.JSONData[i].Section[j].Id;
                        itemObj.section = this.JSONData[i].Id;
                        itemObj.click = function( e ) {
                            // *** INITIATE CONTENT / PRODUCT INDIVIDUAL VIEW *** - MEMO R.
                            if (e.target.id) {
                                if (typeOfGrid === 'main') {
                                    $state.go('expanded', {section: e.target.section, id: e.target.id});
                                    ga('send', 'event', 'Content Gallery', 'Click', 'Click_' + e.target.id);
                                } else {
                                    // Add click event for product (if grid click handlers need to be added)
                                    //window.open( "http://www.wrigley.com/global/brands.aspx" , "_blank");
                                    $state.go('expandedProduct', {product: e.target.section, productId: e.target.id});
                                    ga('send', 'event', 'Global Flavor', 'Click', 'Detail_' + e.target.id);
                                }
                            }
                        };

                        itemObj.mouseover = function( e ){
                            //e.target.alpha =.85;
                            TweenMax.to( e.target, .25, { alpha:.75 } );

                            //var rgbDeviation = Math.random() * 8 + 5;
                            TweenMax.to( parentScope.rgbSplit.red, .25, { x: -5 });
                            TweenMax.to( parentScope.rgbSplit.blue, .25, { x: 5 });
                            e.target.filters = [ parentScope.rgbSplit    ];

                            //gridGlitchObject.glitch( e.target, e.target );
                        };

                        itemObj.mouseout = function( e ){
                            //e.target.alpha=1;
                            TweenMax.to( e.target, .25, { alpha: 1 } );
                            //TweenMax.to( parentScope.rgbSplit.red, .15, { x: 0 });
                            //TweenMax.to( parentScope.rgbSplit.blue, .15, { x: 0, onComplete: clearFilter, onCompleteParams: [e.target]  });

                            clearFilter( e.target )

                            function clearFilter(obj){
                                obj.filters = null;
                            }

                            //console.log("out", e.target )
                        };

                        itemObj.tap = function( e ) {
                            // *** INITIATE CONTENT / PRODUCT INDIVIDUAL VIEW *** - MEMO R.
                            if (e.target.id) {
                                if (typeOfGrid === 'main') {
                                    $state.go('expanded', {section: e.target.section, id: e.target.id});
                                } else {
                                    // Add click event for product (if grid click handlers need to be added)
                                    //window.open( "http://www.wrigley.com/global/brands.aspx" , "_blank");
                                    $state.go('expandedProduct', {product: e.target.section, productId: e.target.id});
                                }
                            }
                        };
                    }

                    //adjusted with pivot point offset
                    gridBlock.x = ( $(window).width() / 2 );
                    gridBlock.y = ( $(window).height() / 2 ); //vertically centered

                    gridBlock.dx = gridBlock.x;
                    gridBlock.dy = gridBlock.y;

                    this.verticalGridStack += (gridBlock.height + 50);

                    //TEMP
                    if(i==0){
                        gridBlock.alpha=1;
                    }else{
                        gridBlock.alpha=0;
                        gridBlock.visible=false;
                    }
                    //TEMP

                    gridBlock.pivot.x = gridBlock.width/2;
                    gridBlock.pivot.y = (gridBlock.height/2);

                    this.fivegridTempContainer.addChild( gridBlock );
                    this.gridBlockArray.push( gridBlock );
                }

                this.instanceContainer.addChild( this.fivegridTempContainer );

                this.gridGlitchObject.createGlitchGrid( this.fivegridTempContainer );


                //DISCOVERY LINKE HERE
                //if product section then add discovery link

                this.discoveryText = new PIXI.Text(
                    " >",
                    {
                        //wordWrap: "false",
                        //wordWrapWidth: this.BASE_CARD_WIDTH + this.GUTTER + 0,
                        font: "14px FFDINWebProCondBoldItalic",
                        fill: "#bbb",
                        align: "left",
                        stroke: 'rgba(255,0,0,0)',
                        strokeThickness: 0
                    }
                );

                this.discoveryText.defaultCursor = "pointer";
                this.discoveryText.x = ( $(window).width()/2 + -100 );
                this.discoveryText.y = this.gridBlockArray[0].y + 200
                this.fivegridTempContainer.addChild( this.discoveryText );

                this.discoveryText.interactive=true;
                this.discoveryText.buttonMode=true;
                this.discoveryText.visible=false;
                this.discoveryText.click = this.discoveryText.tap  = function(e){
                    window.open( "http://www.wrigley.com/global/brands.aspx" , "_blank");

                }


                if( $rootScope.CURRENT_SECTION == "SECTION_PRODUCT" ){
                    this.discoveryText.visible=true;
                }



            };







            FiveGrid.prototype.buildScene = function(){

                var typeOfGrid = this.gridType;

                for(var i=0; i<this.JSONData.length; i++){

                    var gridBlock = new PIXI.DisplayObjectContainer();
                    gridBlock.name = "section" + i;

                    //RESET VARS FOR EACH GRID BLOCK
                    this.ACROSS_SUM=0;
                    this.DOWN_INDEX=0;
                    this.IS_FIRST_ROW=true;

                    for(var j=0; j<this.JSONData[i].Section.length; j++){

                        //Detrmine the max width for layout breakpoint based on number of items in each block
                        var MAX_BREAK_WIDTH = this.determineMaxBreakWidth( this.JSONData[i].Section.length );

                        //CREATE PIXI SPRITE OBJECT
                        var itemObj;
                        itemObj = new PIXI.DisplayObjectContainer();
                        itemObj.objectType = this.JSONData[i].Section[j].Type;

                        if( this.JSONData[i].Section[j].Type == "text" ){

                            itemObj.width = this.BASE_CARD_WIDTH;
                            itemObj.height = this.BASE_CARD_HEIGHT;

                            //var alignment = (j==0) ? alignment = "right" : alignment = "left";

                            var maskshape = new PIXI.Graphics();
                            maskshape.beginFill(0x000000);
                            maskshape.drawRect( 0, 0, this.BASE_CARD_WIDTH, this.BASE_CARD_HEIGHT );
                            itemObj.addChild( maskshape );

                            var txt1 = new PIXI.Text( this.JSONData[i].Section[j].Text,     {
                                wordWrap: "true",
                                wordWrapWidth: this.BASE_CARD_WIDTH + this.GUTTER + 50,
                                font: "28px FFDINWebProCondBoldItalic",
                                fill: "#ffffff",
                                align: this.JSONData[i].Section[j].Alignment,
                                stroke: 'rgba(255,0,0,0)',
                                strokeThickness: 0
                            });

                            if(this.JSONData[i].Section[j].Alignment == "right"){
                                txt1.x = (this.BASE_CARD_WIDTH, this.BASE_CARD_HEIGHT) - txt1.width;
                            }else{
                                txt1.x = 0;
                            }

                            txt1.y = 70;
                            itemObj.buttonMode=false;
                            itemObj.addChild( txt1 );


                        }else if( this.JSONData[i].Section[j].Type == "some other type" ){

                            itemObj.defaultCursor = "default";

                        }else{


                            var itemObjImage = PIXI.Sprite.fromImage( this.JSONData[i].Section[j].ImgPath );
                            itemObj.addChild( itemObjImage );

                            //console.log( itemObj.x, itemObj.y );
                            itemObj.defaultCursor = "pointer";
                            itemObj.buttonMode=true;

                        }

                        itemObj.interactive=true;


                        //!!!! NEW ADDITION !!!
                        //ADD INFORMATION FOR BLOCKS
                        var typeImg="", playImg="", category="";
                        if( itemObj.objectType == "vine" ){
                            typeImg = this.item_social_vine;
                            category="video";
                        }else if( itemObj.objectType == "twitter" ){
                            typeImg = this.item_social_twitter;
                            category="image";
                        }else if( itemObj.objectType == "youtube" ){
                            typeImg = this.item_social_youtube;
                            category="video";
                        }else if( itemObj.objectType == "instagram" ){
                            typeImg = this.item_social_instagram;
                            category="image";
                        }else if( itemObj.objectType == "instagramvideo" ){
                            typeImg = this.item_social_instagram;
                            playImg = this.item_play_instagram;
                            category="video";
                        }else if( itemObj.objectType == "localvideo" ){
                            playImg = this.item_play_instagram;
                            category="video";
                        }else{
                            typeImg = "other"
                            category="";
                        }

                        //creeate rollover item block
                        var rolloverBlock = new PIXI.DisplayObjectContainer();
                        rolloverBlock.alpha=0;

                        var colorBlock = new PIXI.Graphics();
                        colorBlock.beginFill(0x1ca9e5);
                        colorBlock.drawRect( 0,0, itemObj.width, itemObj.height );
                        colorBlock.alpha = .6;
                        rolloverBlock.addChild( colorBlock );

                        var rolloverPlus = new PIXI.Sprite.fromImage( this.item_plusitem );
                        rolloverPlus.x = itemObj.width/2 - rolloverPlus.width/2;
                        rolloverPlus.y = itemObj.height/2 - rolloverPlus.height/2 - 10;
                        rolloverBlock.addChild( rolloverPlus );

                        var rolloveverTxt = new PIXI.Text( "VIEW FULL " + category.toUpperCase(),     {
                            wordWrap: "false",
                            font: "14px FFDINWebProCondBoldItalic",
                            fill: "#ffffff",
                            align: this.JSONData[i].Section[j].Alignment,
                            stroke: 'rgba(255,0,0,0)',
                            strokeThickness: 0
                        });

                        rolloveverTxt.x = itemObj.width/2 - rolloveverTxt.width/2;
                        rolloveverTxt.y = itemObj.height/2 - rolloveverTxt.height/2 + 10;
                        rolloverBlock.addChild( rolloveverTxt );


                        itemObj.addChild( rolloverBlock );


                        var usernameTxt = new PIXI.Text( this.JSONData[i].Section[j].UserName || "",     {
                            wordWrap: "false",
                            font: "16px FFDINWebProCondBoldItalic",
                            fill: "#ffffff",
                            align: this.JSONData[i].Section[j].Alignment,
                            stroke: 'rgba(255,0,0,0)',
                            strokeThickness: 0
                        });

                        usernameTxt.x = 5;
                        usernameTxt.y = itemObj.height - usernameTxt.height;

                        itemObj.addChild( usernameTxt );



                        if( itemObj.objectType != undefined && itemObj.objectType != "text" ){
                            var addLogo = PIXI.Sprite.fromImage( typeImg );
                            addLogo.x = itemObj.width - addLogo.width;
                            addLogo.y = itemObj.height - addLogo.height;
                            itemObj.addChild( addLogo );
                        }

                        if (itemObj.objectType == 'instagramvideo' || itemObj.objectType == 'localvideo') {
                            var addPlay = PIXI.Sprite.fromImage( playImg );
                            addPlay.x = itemObj.width - addPlay.width - 4;
                            addPlay.y = 6;
                            itemObj.addChild( addPlay );
                        }



                        var parentScope = this;

                        itemObj.id = this.JSONData[i].Section[j].Id;
                        itemObj.section = this.JSONData[i].Id;
                        if (this.JSONData[i].Section[j].Type === 'cta') {
                            itemObj.click = function( e ) {
                              document.location = '/en-us/promos/truth-or-dare';
                            };
                        } else if (this.JSONData[i].Section[j].Type !== 'text') {
                            itemObj.click = function( e ) {
                                // *** INITIATE CONTENT / PRODUCT INDIVIDUAL VIEW *** - MEMO R.
                                if (e.target.id) {
                                    if (typeOfGrid === 'main') {
                                        $state.go('expanded', {section: e.target.section, id: e.target.id});
                                        ga('send', 'event', 'Content Gallery', 'Click', 'Click_' + e.target.id);
                                    } else {
                                        // Add click event for product (if grid click handlers need to be added)
                                        //window.open( "http://www.wrigley.com/global/brands.aspx" , "_blank");
                                        $state.go('expandedProduct', {product: e.target.section, productId: e.target.id});
                                        ga('send', 'event', 'Global Flavor', 'Click', e.target.id);
                                    }
                                }
                            };
                        }

                        itemObj.mouseover = function( e ){

                            if( e.target.objectType == "text" || e.target.objectType === 'cta'){

                            }else{
                                //TweenMax.to( e.target, .25, { alpha:.75 } );
                                TweenMax.to( e.target.children[1], .25, { alpha: 1 } ); //rollover obj
                                TweenMax.to( parentScope.rgbSplit.red, .25, { x: -10 });
                                TweenMax.to( parentScope.rgbSplit.blue, .25, { x: 10 });
                                e.target.children[0].filters = [ parentScope.rgbSplit ];
                            }

                        };

                        itemObj.mouseout = function( e ){

                            if( e.target.objectType == "text" || e.target.objectType === 'cta'){

                            }else{
                                //TweenMax.to( e.target, .25, { alpha: 1 } );
                                TweenMax.to( e.target.children[1], .25, { alpha:0 } );
                                clearFilter( e.target.children[0] )
                            }

                            function clearFilter(obj){
                                obj.filters = null;
                            }

                        };

                        itemObj.tap = function( e ) {
                            //Display the hover texture
                            //alert(  e.target.id )
                            if (e.target.id) {
                                // *** INITIATE CONTENT / PRODUCT INDIVIDUAL VIEW *** - MEMO R.
                                if (e.target.id) {
                                    if (typeOfGrid === 'main') {
                                        $state.go('expanded', {section: e.target.section, id: e.target.id});
                                    } else {
                                        // Add click event for product (if grid click handlers need to be added)
                                        //window.open( "http://www.wrigley.com/global/brands.aspx" , "_blank");
                                        $state.go('expandedProduct', {product: e.target.section, productId: e.target.id});
                                    }
                                }
                            }
                        };

                        //if ACROSS_SUM exceeds MAX BREAK WIDTH then add the linebreak
                        if( this.ACROSS_SUM > MAX_BREAK_WIDTH ){//464
                            this.ACROSS_SUM=0;
                            this.DOWN_INDEX++;
                            this.IS_FIRST_ROW=false;
                        }

                        //determine the items Y offset
                        var offsetY = 0;
                        if( this.IS_FIRST_ROW && itemObj.height > this.BASE_CARD_HEIGHT ){
                            offsetY = -(itemObj.height - this.BASE_CARD_HEIGHT);
                        }

                        //LAYOUT THE ITEMS
                        if(this.IS_FIRST_ROW){
                            itemObj.x = this.ACROSS_SUM;
                            itemObj.y = ( this.DOWN_INDEX * this.BASE_CARD_HEIGHT ) + offsetY;
                        }else{
                            itemObj.x = this.ACROSS_SUM + this.INDENT;
                            itemObj.y = ( this.DOWN_INDEX * this.BASE_CARD_HEIGHT ) + offsetY + this.GUTTER;
                        }


                        itemObj.dx = itemObj.x;
                        itemObj.dy = itemObj.y;



                        //INCREMENT ACROSS SUM
                        this.ACROSS_SUM += ( ( itemObj.width ) + this.GUTTER );

                        //ADD TO repectful stage CONTIAINER
                        gridBlock.addChild( itemObj );

                        //ADD TO GIRD ITEM CONTAINER
                        this.gridItemArray.push( itemObj );
                    }

                    //adjusted with pivot point offset
                    gridBlock.x = ( $(window).width() / 2 );
                    gridBlock.y = ( $(window).height() / 2 ); //vertically centered

                    gridBlock.dx = gridBlock.x;
                    gridBlock.dy = gridBlock.y;

                    this.verticalGridStack += (gridBlock.height + 50);

                    //TEMP

                    if(i==0){
                        gridBlock.alpha=1;
                    }else{
                        gridBlock.alpha=0;
                        gridBlock.visible=false;
                    }
                    //TEMP

                    gridBlock.pivot.x = gridBlock.width/2;
                    gridBlock.pivot.y = (gridBlock.height/2);

                    this.fivegridTempContainer.addChild( gridBlock );
                    this.gridBlockArray.push( gridBlock );
                }

                this.instanceContainer.addChild( this.fivegridTempContainer );

                this.gridGlitchObject.createGlitchGrid( this.fivegridTempContainer );



                //DISCOVERY LINKE HERE
                //if product section then add discovery link


                this.discoveryText = new PIXI.Text(
                    " >",
                    {
                        //wordWrap: "false",
                        //wordWrapWidth: this.BASE_CARD_WIDTH + this.GUTTER + 0,
                        font: "14px FFDINWebProCondBoldItalic",
                        fill: "#bbb",
                        align: "left",
                        stroke: 'rgba(255,0,0,0)',
                        strokeThickness: 0
                    }
                );

                this.discoveryText.defaultCursor = "pointer";
                this.discoveryText.x = ( $(window).width()/2 + 150 );
                this.discoveryText.y = this.gridBlockArray[0].y + 280
                this.fivegridTempContainer.addChild( this.discoveryText );

                this.discoveryText.interactive=true;
                this.discoveryText.buttonMode=true;
                this.discoveryText.visible=false;
                this.discoveryText.click = this.discoveryText.tap  = function(e){
                    window.open( "http://www.wrigley.com/global/brands.aspx" , "_blank");

                }


                if( $rootScope.CURRENT_SECTION == "SECTION_PRODUCT" ){
                    this.discoveryText.visible=true;
                }

                //this.transitionGridIn( 0 );
            };

            FiveGrid.prototype.transitionGridIn = function( gridBlockID ){
                for( var i=0; i<this.gridBlockArray[ gridBlockID ].children.length; i++ ){
                    TweenMax.fromTo( this.gridBlockArray[ gridBlockID ].children[i].position, .5, { y: 1000 },{ y: this.gridBlockArray[ gridBlockID ].children[i].dy, delay: i * .1 } );
                }
            };

            FiveGrid.prototype.transitionGridOut =  function( gridBlockID ){

            };

            FiveGrid.prototype.resetGrid = function(){
                if(this.MOUSE_INDEX != 0 ){
                    this.MOUSE_INDEX=0;
                    this.forceGridChange( 0 );
                }
            };

            FiveGrid.prototype.forceGridChange = function( _gridID ){

                this.MOUSE_INDEX = _gridID;

                for( var i=0; i<this.gridBlockArray.length; i++){
                    if(i==_gridID){
                        this.gridBlockArray[i].renderable=true;
                        this.gridBlockArray[i].visible=true;
                        this.gridBlockArray[i].y = this.gridBlockArray[i].dy;
                        this.gridBlockArray[i].alpha=1;
                    }else{
                        this.gridBlockArray[i].renderable=false;
                        this.gridBlockArray[i].visible=false;
                        this.gridBlockArray[i].y = this.gridBlockArray[i].dy+600;
                        this.gridBlockArray[i].alpha=0;
                    }
                }
            };

            FiveGrid.prototype.forceGridChangeToIndex = function( _destination ){
                var numberOfPages = this.MOUSE_INDEX - _destination;
                this.moveItemOut(numberOfPages);
                this.MOUSE_INDEX = _destination;
                if ($rootScope.CURRENT_SECTION == "SECTION_PRODUCT") {
                    $scope.currentProductIndex = _destination;
                }
                this.updateItems(numberOfPages);

                this.gridGlitchObject.glitch( this.fivegridTempContainer, this.instanceContainer);
            };

            // INSERTED UP / DOWN PROTOTYPE FUNCTIONS FOR ARROWS ON CONTENT PAGE

            FiveGrid.prototype.forceGridChangeUpOne = function(){
                if (this.MOUSE_INDEX > this.MOUSE_MIN) {
                    this.moveItemOut(1);
                    ( this.MOUSE_INDEX > this.MOUSE_MIN ) ? this.MOUSE_INDEX-- : this.MOUSE_INDEX = this.MOUSE_MIN;
                    this.updateItems(1);

                    this.gridGlitchObject.glitch( this.fivegridTempContainer, this.instanceContainer);
                } else {
                    this.MOUSE_INDEX = this.MOUSE_MIN;
                }
            };

            FiveGrid.prototype.forceGridChangeDownOne = function(){
                if (this.MOUSE_INDEX < this.MOUSE_MAX) {
                    this.moveItemOut(-1);
                    ( this.MOUSE_INDEX < this.MOUSE_MAX ) ? this.MOUSE_INDEX++ : this.MOUSE_INDEX = this.MOUSE_MAX;
                    this.updateItems(-1);

                    this.gridGlitchObject.glitch( this.fivegridTempContainer, this.instanceContainer);
                } else {
                    this.MOUSE_INDEX = this.MOUSE_MAX;
                }
            };

            //this is to change grid and animate in
            FiveGrid.prototype.gotoGridBlock = function( _gridID, _doGlitch ){

                var doGlitch = ( doGlitch != undefined ) ? true : false;

                if(doGlitch)
                    this.gridGlitchObject.glitch( this.fivegridTempContainer, this.fivegridTempContainer );

                if( _gridID < this.MOUSE_INDEX ){

                    this.moveItemOut(-1, 0, 0);
                    this.MOUSE_INDEX = _gridID;
                    this.updateItems(-1, 0, 0);

                }else{

                    this.moveItemOut(1, 0, 0);
                    this.MOUSE_INDEX = _gridID;
                    this.updateItems(1, 0, 0);

                }

            };

            /*
             FiveGrid.prototype.determineMobileMaxBreakWidth = function( numberOfItems ){

             var maxBreakWidth = 0;
             if( numberOfItems == 6 ){
             maxBreakWidth=233;
             }else if( numberOfItems == 5 ){
             maxBreakWidth=300;
             }else if( numberOfItems == 4 ){
             maxBreakWidth=300;
             }else if( numberOfItems == 3 ){
             maxBreakWidth=140;
             }else{
             maxBreakWidth=300;
             }



             return maxBreakWidth;

             };
             */

            FiveGrid.prototype.determineMobileMaxBreakWidth = function( numberOfItems ){

                var maxBreakWidth = 0;
                if( numberOfItems == 6 ){
                    maxBreakWidth=140;
                }else if( numberOfItems == 5 ){
                    maxBreakWidth=140;
                }else if( numberOfItems == 4 ){
                    maxBreakWidth=200;
                }else if( numberOfItems == 3 ){
                    maxBreakWidth=100;
                }else{
                    maxBreakWidth=100;
                }

                return maxBreakWidth;

            };


            FiveGrid.prototype.determineMaxBreakWidth = function( numberOfItems ){

                var maxBreakWidth = 0;
                if( numberOfItems == 6 ){
                    maxBreakWidth=800;
                }else if( numberOfItems == 5 ){
                    maxBreakWidth=600;
                }else if( numberOfItems == 4 ){
                    maxBreakWidth=700;
                }else if( numberOfItems == 3 ){
                    maxBreakWidth=900;
                }else if( numberOfItems == 2 ){
                    maxBreakWidth=900;
                }else{
                    maxBreakWidth=464;
                }

                return maxBreakWidth;
            };

            var t=0, glitchDuration=1000;

            FiveGrid.prototype.renderGrid = function() {

                t++;
                if(t%glitchDuration == 0){
                    glitchDuration=randomizer(250, 1000);
                    //gridGlitchObject.glitch( this.fivegridTempContainer, this.fivegridTempContainer );
                }
                //!!! Call render function in the FiveEffect prototype class
                this.gridGlitchObject.renderGlitchFilters( _getPixiObj().stage );
                //this.gridGlitchObject.renderGlitchFilters( this.fivegridTempContainer );

                if(this.discoveryText && $rootScope.CURRENT_SECTION == "SECTION_PRODUCT"){
                    if(  this.discoveryText )
                        this.discoveryText.visible=true;
                }else{
                    if( this.discoveryText )
                        this.discoveryText.visible=false;
                }


                // console.log(    this.gridBlockArray[0].x )



                if($rootScope.mouseMidPercent){
                    for( var i=0; i<this.gridItemArray.length; i++ ){


                        //var offsetVal =  ( $rootScope.mouseMidPercent * 35 );
                        //using the rotation MAX VAL to compensate for grid rotation/hitArea deviation
                        //if(i==0)
                        //console.log( offsetVal )
                        //this.gridItemArray[i].hitArea = new PIXI.Rectangle( offsetVal, 0, this.gridItemArray[i].width, this.gridItemArray[i].height );
                        //this.gridItemArray[i].children[0].x = offsetVal;
                    }
                }


            };


            FiveGrid.prototype.mouseWheelUpdate = function(){

                this.MOUSE_MAX = this.JSONData.length-1;


                if( this.MOUSE_MAX > 0 ){

                    if( _getMouseData().deltaY < 0 ){

                        if( this.MOUSE_INDEX < this.MOUSE_MAX ){

                            this.moveItemOut(-1);
                            ( this.MOUSE_INDEX < this.MOUSE_MAX ) ? this.MOUSE_INDEX++ : this.MOUSE_INDEX = this.MOUSE_MAX;
                            this.updateItems(-1);

                            // ADD BLUE PILL CLASS TO PAGINATION - MEMO
                            this.mouseWheelPillIndex = this.MOUSE_INDEX + 1;
                            if ($rootScope.CURRENT_SECTION == "SECTION_PRODUCT") {
                                $scope.currentProductIndex = this.MOUSE_INDEX;
                            }

                            if (this.mouseWheelPillIndex === 1) {
                                $("li.blue-link").removeClass("blue-link");
                                $("li.gray-link").removeClass("gray-link");
                                $scope.$apply(function() {
                                    $scope.firstPage = true;
                                    $scope.lastPage = false;
                                });
                            } else {
                                $("li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                                $(".content-pagination ul li:nth-child("+ this.mouseWheelPillIndex + ")").addClass("blue-link");
                                if (this.MOUSE_INDEX == this.MOUSE_MAX) {
                                    $scope.$apply(function() {
                                        $scope.lastPage = true;
                                        $scope.firstPage = false;
                                    });
                                } else {
                                    $scope.$apply(function() {
                                        $scope.lastPage = false;
                                        $scope.firstPage = false;
                                    });
                                }
                            }

                            //this.gridGlitchObject.glitch( this.fivegridTempContainer, this.instanceContainer);
                            this.gridGlitchObject.glitch( _getPixiObj().stage, this.fivegridTempContainer, true );

                            // CHANGE STATE BASED ON PRODUCT SLUG
                            if ($rootScope.CURRENT_SECTION == "SECTION_PRODUCT" && !$state.params.productId) {
                                $scope.updateUrlBasedOnState();
                            }
                            // CHANGE STATE BASED ON CONTENT SLUG
                            else if ($rootScope.CURRENT_SECTION == "SECTION_MAIN" && !$state.params.id) {
                                $scope.updateUrlBasedOnState();
                            }


                        }else{

                            TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX], .1, { y: ( this.gridBlockArray[this.MOUSE_INDEX].dy - 20) });
                            TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX], .3, { y: ( this.gridBlockArray[this.MOUSE_INDEX].dy), delay: .1 });

                        }

                        this.MOUSE_THRESHOLD_COUNT=0;

                    }else{

                        if( this.MOUSE_INDEX > this.MOUSE_MIN ){

                            this.moveItemOut(1);
                            ( this.MOUSE_INDEX > this.MOUSE_MIN ) ? this.MOUSE_INDEX-- : this.MOUSE_INDEX = this.MOUSE_MIN;
                            this.updateItems(1);

                            // ADD BLUE PILL CLASS TO PAGINATION - MEMO
                            this.mouseWheelPillIndex = this.MOUSE_INDEX + 1;
                            if ($rootScope.CURRENT_SECTION == "SECTION_PRODUCT") {
                                $scope.currentProductIndex = this.MOUSE_INDEX;
                            }

                            if (this.mouseWheelPillIndex === 1) {
                                $("li.blue-link").removeClass("blue-link");
                                $("li.gray-link").removeClass("gray-link");
                                $scope.$apply(function() {
                                    $scope.firstPage = true;
                                    $scope.lastPage = false;
                                });
                            } else {
                                $("li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                                $(".content-pagination ul li:nth-child("+ this.mouseWheelPillIndex + ")").addClass("blue-link");
                                if (this.MOUSE_INDEX == this.MOUSE_MAX) {
                                    $scope.$apply(function() {
                                        $scope.lastPage = true;
                                        $scope.firstPage = false;
                                    });
                                } else {
                                    $scope.$apply(function() {
                                        $scope.lastPage = false;
                                        $scope.firstPage = false;
                                    });
                                }
                            }

                            //this.gridGlitchObject.glitch( this.fivegridTempContainer, this.instanceContainer);
                            this.gridGlitchObject.glitch( _getPixiObj().stage, this.fivegridTempContainer, true );

                            // CHANGE STATE BASED ON PRODUCT SLUG
                            if ($rootScope.CURRENT_SECTION == "SECTION_PRODUCT" && !$state.params.productId) {
                                $scope.updateUrlBasedOnState();
                            }
                            // CHANGE STATE BASED ON CONTENT SLUG
                            else if ($rootScope.CURRENT_SECTION == "SECTION_MAIN" && !$state.params.id) {
                                $scope.updateUrlBasedOnState();
                            }

                        }else if( this.MOUSE_INDEX == 0 ){
                            if ($rootScope.CURRENT_SECTION == "SECTION_PRODUCT") {
                                $scope.currentProductIndex = this.MOUSE_INDEX;
                            }

                            //if grid hits the top make it bounce
                            TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX], .1, { y: ( this.gridBlockArray[this.MOUSE_INDEX].dy + 20) });
                            TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX], .3, { y: ( this.gridBlockArray[this.MOUSE_INDEX].dy), delay: .1 });

                            if( _getMouseData().deltaY <= 4 && _getCurrentSection() == "SECTION_MAIN" ){
                                //check update
                                if( this.MOUSE_THRESHOLD_COUNT < this.MOUSE_THRESHOLD_MAX ){
                                    this.MOUSE_THRESHOLD_COUNT++;
                                } else {
                                    this.MOUSE_THRESHOLD_COUNT=0;
                                    _gotoFiveLogo();
                                }
                            }
                        }
                    }

                }
            };

            FiveGrid.prototype.checkForTransition = debounce( function() {
                //console.log( this.MOUSE_THRESHOLD_COUNT )
                //console.log( this.MOUSE_INDEX, this.isReached)

                //check update
                if( this.MOUSE_THRESHOLD_COUNT < this.MOUSE_THRESHOLD_MAX ){
                    this.MOUSE_THRESHOLD_COUNT++;
                } else {
                    this.isReached=true;
                    //this.MOUSE_THRESHOLD_COUNT=0;
                    //_gotoFiveLogo();
                }

                if( this.isReached ){
                    _gotoFiveLogo();
                    this.isReached=false;
                }

            }, 50, false );


            function debounce(func, wait, immediate) {
                var timeout;
                return function() {
                    var context = this, args = arguments;
                    var later = function() {
                        timeout = null;
                        if (!immediate) {
                            func.apply(context, args);
                        }
                    };
                    var callNow = immediate && !timeout;
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                    if (callNow) func.apply(context, args);
                };
            }



            FiveGrid.prototype.glitchTheGrid = function( _intervalDuration, _iterations ){

                clearInterval( this.tempID );

                var intervalDuration = _intervalDuration || 50;
                var iterations = _iterations || 3;

                //glitch repeat and transition in
                this.tempID=0; this.tempCount=0; this.iterations=iterations;
                this.tempID = setInterval( function( obj ){
                    repeater( obj );
                }, intervalDuration, this );

                function repeater( obj ){

                    if( obj.gridGlitchObject) {
                        obj.gridGlitchObject.glitch( obj.fivegridTempContainer, obj.instanceContainer);
                    }

                    ( obj.tempCount < obj.iterations ) ? obj.tempCount++ : clearInterval( obj.tempID );

                }

            };

            function randomizer(min, max){
                return Math.floor(Math.random()*(max-min+1)+min);
            }

            FiveGrid.prototype.swipeUpdate = function(){

                this.MOUSE_MAX = this.JSONData.length-1;

                if( _getSwipeData().direction == "up" ) {

                    if( this.MOUSE_INDEX < this.MOUSE_MAX ) {
                        this.moveItemOut(-1);
                        ( this.MOUSE_INDEX < this.MOUSE_MAX ) ? this.MOUSE_INDEX++ : this.MOUSE_INDEX = this.MOUSE_MAX;
                        this.updateItems(-1);

                        // ADD BLUE PILL CLASS TO PAGINATION - MEMO
                        this.mouseWheelPillIndex = this.MOUSE_INDEX + 1;

                        if (this.mouseWheelPillIndex === 1) {
                            $("li.blue-link").removeClass("blue-link");
                            $("li.gray-link").removeClass("gray-link");
                            $scope.$apply(function() {
                                $scope.firstPage = true;
                                $scope.lastPage = false;
                            });
                        } else {
                            $("li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                            $(".content-pagination ul li:nth-child("+ this.mouseWheelPillIndex + ")").addClass("blue-link");
                            if (this.MOUSE_INDEX == this.MOUSE_MAX) {
                                $scope.$apply(function() {
                                    $scope.lastPage = true;
                                    $scope.firstPage = false;
                                });
                            } else {
                                $scope.$apply(function() {
                                    $scope.lastPage = false;
                                    $scope.firstPage = false;
                                });
                            }
                        }
                    }

                } else if( _getSwipeData().direction == "down" ) {

                    if( this.MOUSE_INDEX > this.MOUSE_MIN ){
                        this.moveItemOut(1);
                        ( this.MOUSE_INDEX > this.MOUSE_MIN ) ? this.MOUSE_INDEX-- : this.MOUSE_INDEX = this.MOUSE_MIN;
                        this.updateItems(1);

                        // ADD BLUE PILL CLASS TO PAGINATION - MEMO
                        this.mouseWheelPillIndex = this.MOUSE_INDEX + 1;

                        if (this.mouseWheelPillIndex === 1) {
                            $("li.blue-link").removeClass("blue-link");
                            $("li.gray-link").removeClass("gray-link");
                            $scope.$apply(function() {
                                $scope.firstPage = true;
                                $scope.lastPage = false;
                            });
                        } else {
                            $("li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                            $(".content-pagination ul li:nth-child("+ this.mouseWheelPillIndex + ")").addClass("blue-link");
                            if (this.MOUSE_INDEX == this.MOUSE_MAX) {
                                $scope.$apply(function() {
                                    $scope.lastPage = true;
                                    $scope.firstPage = false;
                                });
                            } else {
                                $scope.$apply(function() {
                                    $scope.lastPage = false;
                                    $scope.firstPage = false;
                                });
                            }
                        }
                    }
                }

                //this.gridGlitchObject.glitch( this.fivegridTempContainer, this.instanceContainer );
                this.gridGlitchObject.glitch( _getPixiObj().stage, this.fivegridTempContainer );
            };

            /*
             FiveGrid.prototype.moveItemOut = function( dir, _duration, _delay ){

             var duration = (_duration != undefined ) ? _duration : .25;
             var delay = (_delay != undefined) ? _delay: .05;

             //MOVE CURRENT ITEM OUT
             if( this.gridBlockArray[ this.MOUSE_INDEX ] )
             if( dir>0 ){
             TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX], duration, { y: ( this.gridBlockArray[this.MOUSE_INDEX].dy+250), alpha: 0 });
             TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX].scale, duration, { x: .5 , y: 0, delay: delay, onComplete: this.visibility, onCompleteParams:[ this.gridBlockArray[this.MOUSE_INDEX], false ] });
             }else{
             TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX], duration, { y: ( this.gridBlockArray[this.MOUSE_INDEX].dy-200), alpha: 0 });
             TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX].scale, duration, { x: .5 , y: 0, delay: delay, onComplete: this.visibility, onCompleteParams:[ this.gridBlockArray[this.MOUSE_INDEX], false ] });
             }
             };

             FiveGrid.prototype.updateItems = function( dir, _duration, _delay ){

             var duration = (_duration != undefined ) ? _duration : .25;
             var delay = (_delay != undefined) ? _delay: .05;

             //MOVE CURRENT ITEM IN
             if( this.gridBlockArray[this.MOUSE_INDEX] )
             if( dir > 0 ){
             TweenMax.fromTo( this.gridBlockArray[this.MOUSE_INDEX], duration,{ delay: .1, y: this.gridBlockArray[this.MOUSE_INDEX].dy - 250, alpha: 0  }, { y: this.gridBlockArray[this.MOUSE_INDEX].dy, alpha: 1, onStart: visibility, onStartParams:[ this.gridBlockArray[this.MOUSE_INDEX], true ] });
             TweenMax.fromTo( this.gridBlockArray[this.MOUSE_INDEX].scale, duration, { x: .5 , y: 0},{ x: 1 , y: 1, delay: delay });
             }else{
             TweenMax.fromTo( this.gridBlockArray[this.MOUSE_INDEX], duration,{ delay: .1, y: this.gridBlockArray[this.MOUSE_INDEX].dy + 250, alpha: 0  }, { y: this.gridBlockArray[this.MOUSE_INDEX].dy, alpha: 1, onStart: visibility, onStartParams:[ this.gridBlockArray[this.MOUSE_INDEX], true ] });
             TweenMax.fromTo( this.gridBlockArray[this.MOUSE_INDEX].scale, duration, { x: .5 , y: 0},{ x: 1 , y: 1, delay: delay});
             }
             };
             */

            FiveGrid.prototype.moveItemOut = function( dir, _duration, _delay ){

                var duration = (_duration != undefined ) ? _duration : .5;
                var delay = (_delay != undefined) ? _delay: .05;

                //MOVE CURRENT ITEM OUT
                if( this.gridBlockArray[ this.MOUSE_INDEX ] ) {
                    if( dir>0 ){
                        TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX], duration, { y: ( this.gridBlockArray[this.MOUSE_INDEX].dy+600), alpha: 0, ease: Quint.easeOut });
                    }else{
                        TweenMax.to( this.gridBlockArray[this.MOUSE_INDEX], duration, { y: ( this.gridBlockArray[this.MOUSE_INDEX].dy-600), alpha: 0, ease: Quint.easeOut });
                    }
                }
            };

            FiveGrid.prototype.updateItems = function( dir, _duration, _delay ){

                var duration = (_duration != undefined ) ? _duration : .5;
                var delay = (_delay != undefined) ? _delay: .05;

                //MOVE CURRENT ITEM IN
                if( this.gridBlockArray[this.MOUSE_INDEX] ) {
                    if( dir > 0 ){
                        TweenMax.fromTo( this.gridBlockArray[this.MOUSE_INDEX], duration,{ delay: .1, y: this.gridBlockArray[this.MOUSE_INDEX].dy - 600, alpha: 0  }, { y: this.gridBlockArray[this.MOUSE_INDEX].dy, alpha: 1, onStart: visibility, onStartParams:[ this.gridBlockArray[this.MOUSE_INDEX], true ], ease: Quint.easeOut });
                    }else{
                        TweenMax.fromTo( this.gridBlockArray[this.MOUSE_INDEX], duration,{ delay: .1, y: this.gridBlockArray[this.MOUSE_INDEX].dy + 600, alpha: 0  }, { y: this.gridBlockArray[this.MOUSE_INDEX].dy, alpha: 1, onStart: visibility, onStartParams:[ this.gridBlockArray[this.MOUSE_INDEX], true ], ease: Quint.easeOut });
                    }
                }
            };

            function visibility( obj, visible ){
                if(visible==undefined) { visible=true; }
                obj.visible=visible;
            }

            FiveGrid.prototype.resize = function( ratio ){

                for( var i=0; i<this.gridBlockArray.length; i++ ){
                    this.gridBlockArray[i].x = ( $(window).width() / 2 );
                    this.gridBlockArray[i].y = ( $(window).height() / 2 );
                    this.gridBlockArray[i].dx = this.gridBlockArray[i].x;
                    this.gridBlockArray[i].dy = this.gridBlockArray[i].y;
                }


                if(this.discoveryText){
                    this.discoveryText.x = ( $(window).width()/2 + 150 );
                    this.discoveryText.y = this.gridBlockArray[0].y + 280
                }

            };

            FiveGrid.prototype.getMouseIndex = function() {
                return this.MOUSE_INDEX;
            };

            FiveGrid.prototype.getMouseMax = function() {
                return this.MOUSE_MAX;
            };

            return FiveGrid;

        }();

        // ============================================
        //
        // FROM FiveGlitchEffect.js (ui folder)
        //
        // ** NOTE **
        // PLACED IN MAIN.JS TO ACCESS $state, $scope
        // AND VIEWS
        //
        // ============================================


        var FiveGlitchEffect = function(){

            function FiveGlitchEffect( _targetContainer, _pixiObjRenderer ){
                //main
                this.mainContainer = _targetContainer;

                //buffer array of allshape elements
                this.glitchElementArray = [];

                //snapshot vars
                this.snapshotTexture = new PIXI.RenderTexture( $(window).width(), $(window).height() );
                this.tempSprite = new PIXI.Sprite( this.snapshotTexture );
                this.maskContainer = new PIXI.DisplayObjectContainer();

                this.glitchFilter = new PIXI.FiveGlitch();
                this.dotFilter = new PIXI.DotScreenFilter();
                this.grayFilter = new PIXI.GrayFilter();
                this.rgbSplit = new PIXI.RGBSplitFilter();
                this.rgbSplit.red.x = -10;
                this.rgbSplit.red.y = 0;
                this.rgbSplit.green.x = 0;
                this.rgbSplit.green.y = 0;
                this.rgbSplit.blue.x = 10;
                this.rgbSplit.blue.y = 0;

                // SET METHODS TO ELIMINATE CIRCULAR REFERENCE
                this._pixiObjRenderer = _pixiObjRenderer;
                this._getMouseData = _getMouseData;

                this.glitchFilterSwitch = [ false, false, false, false ];
                this.glitchFiltersArray = [ this.glitchFilter, this.dotFilter, this.grayFilter, this.rgbSplit ];
                //console.log( this.glitchFilter  )
            }

            FiveGlitchEffect.prototype.renderGlitchFilters = function( _target ){

                if( this._pixiObjRenderer instanceof PIXI.CanvasRenderer) {
                    //canvas renderer
                    //console.log( "canvas" )
                } else {
                    //webgl renderer
                    //console.log( "webgl" )

                    var filtersToApply = [];
                    for (var i = 0; i < this.glitchFilterSwitch.length; i++) {
                        if( this.glitchFilterSwitch[i] )
                            filtersToApply.push( this.glitchFiltersArray[i] );
                    }

                    _target.filters = filtersToApply.length > 0 ? filtersToApply : null;
                    this.maskContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
                    this.mainContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
                    //this.mainContainer
                }
            };

            var viewTestGrid=0;
            FiveGlitchEffect.prototype.createGlitchGrid = function( _container ){

                //map to container or else fall back to the default parent (this.mainContainer)
                this.theContainer = _container || this.mainContainer;

                var gridsAcross = 8, gridsDown = 30;
                var count=0, across=300, down=0;

                for( var i=0; i<1000; i++){

                    /*
                     var maskWidth = Math.ceil( Math.random() * 100 ) + 10,
                     //maskHeight = Math.ceil( Math.random() * 15 ) + 5, //100
                     //maskHeight = Math.ceil( Math.random() * 25 ) + 15, //100
                     maskHeight = Math.ceil( Math.random() * 100 ) + 15, //100
                     */


                    var sizeFactor = Math.ceil( Math.random() * 35 ) + 10;

                    var maskWidth = sizeFactor,
                    //maskHeight = Math.ceil( Math.random() * 15 ) + 5, //100
                    //maskHeight = Math.ceil( Math.random() * 25 ) + 15, //100
                        maskHeight = sizeFactor; //100

                    var gutter = 0;
                    var tx = across;
                    var ty = ( down * ( sizeFactor + 2 ) ) + 150;
                    //var ty = ( down * ( 20 + 2 ) ) + 150;

                    //Handle bound contraint issue -
                    if( tx > this.snapshotTexture.width-maskWidth )
                        tx = this.snapshotTexture.width-maskWidth;
                    if( ty > this.snapshotTexture.height-maskHeight )
                        ty = this.snapshotTexture.height-maskHeight;

                    //create the new texture
                    var glitchTexture = new PIXI.Texture( this.snapshotTexture, new PIXI.Rectangle( tx, ty, maskWidth, maskHeight));
                    glitchTexture._updateUvs();

                    //create the new sprite using the newly created texture
                    var croppedSprite = new PIXI.Sprite( glitchTexture );
                    croppedSprite.x = tx;
                    croppedSprite.y = ty;
                    croppedSprite.dx = tx;
                    croppedSprite.dy = ty;

                    //croppedSprite.visible = ( randomizer( 0, 5 ) == 0 ) ? 0 : 1;
                    croppedSprite.visible  = 0; //default as invisible

                    //IMPORTANT! increment the grid stack
                    across += ( maskWidth + gutter );

                    //breakpoint for glitch
                    if( across > $(window).width() ){
                        var rndIndent = Math.floor( Math.random() * 100 );
                        across = rndIndent;
                        down++;
                    }

                    //add sprite element to buffer array
                    this.glitchElementArray.push( croppedSprite );

                    //add this to the
                    this.maskContainer.addChild( croppedSprite );

                    //This is a test grid to visualize the glitch shapes
                    if( viewTestGrid ){
                        var maskshape = new PIXI.Graphics();
                        maskshape.beginFill(0xFFFFFF);
                        maskshape.drawRect( tx, ty, maskWidth, maskHeight );
                        this.mainContainer.addChild( maskshape );
                    }
                    //counter to keep track of element count
                    count++;
                }
                this.mainContainer.addChild( this.maskContainer );

            };


            FiveGlitchEffect.prototype.glitch = function( _container, _objectToCapture, _direction ){

                var direction = _direction || false;

                //map to container or else fall back to the default parent (this.mainContainer)
                this.theContainer = _container || this.mainContainer;

                //declare object to capture pixel data - if not delared then default to the main displayobject (this.mainContainer)
                this.objectToCapture = _objectToCapture || this.mainContainer;


                //take snapshot of new displayobject - update the texture
                this.snapshot( _container, _objectToCapture );

                /**/
                //GLITCH PLACEMENT
                for( var i=0; i<this.glitchElementArray.length; i++){

                    this.glitchElementArray[i].visible = ( randomizer( 0, 2 ) == 0 ) ? 0 : 1;
                    this.glitchElementArray[i].alpha = randomizer( 0, 1 ); //1

                    this.glitchElementArray[i].position.x = randomizer( this.glitchElementArray[i].dx - randomizer( 50, 75 ),  this.glitchElementArray[i].dx + randomizer( 50, 75 ) );
                    this.glitchElementArray[i].position.y = randomizer( this.glitchElementArray[i].dy - randomizer( 50, 75 ),  this.glitchElementArray[i].dy + randomizer( 50, 75 ));

                    //this.glitchElementArray[i].x = randomizer( this.glitchElementArray[i].dx - 10, this.glitchElementArray[i].dx + 10 );
                    //this.glitchElementArray[i].y = randomizer( 0, this.glitchElementArray[i].dy + 20 );
                }

                this.glitchFilterSwitch[0]=randomizer(0,1); //glitch filter

                if( randomizer(0, 2) == 0 ) {
                    this.glitchFilterSwitch[1]=1; //dot filter
                }

                this.glitchFilterSwitch[2]=randomizer(0,1); //gray
                this.glitchFilterSwitch[3]=1;//randomizer(0,1); //rgbfilter

                //if(_container)
                //_container.visible=false;

                if(direction){
                    TweenMax.delayedCall( .075, resetGlitchWithDirection,  [ this.glitchElementArray, this.glitchFilterSwitch, direction ] ); //.075
                }else{
                    TweenMax.delayedCall( .075, resetGlitch,  [ this.glitchElementArray, this.glitchFilterSwitch ] ); //.075
                }

                function resetGlitch( dataObj, filtersArray ){
                    //if(_container)
                    //_container.visible = true;

                    for( var i=0; i<filtersArray.length; i++){
                        filtersArray[i]=false;
                    }

                    for( var i=0; i<dataObj.length; i++){
                        TweenMax.to( dataObj[i], 0, { visible:false, alpha: 0, delay: Math.random() * .2 });
                    }
                }

                var obj = this;

                function resetGlitchWithDirection( dataObj, filtersArray, direction ){


                    //if(_container)
                    //_container.visible = true;

                    for( var i=0; i<filtersArray.length; i++){
                        filtersArray[i]=false;
                    }

                    for( var i=0; i<dataObj.length; i++){

                        TweenMax.to( dataObj[i], 0, { visible:false, alpha: 0, delay: /* i*.005*/ Math.random() * .4 });

                        if(direction){

                            if( _getMouseData().deltaY>0 ){
                                TweenMax.to( dataObj[i], Math.random() * .2 + .1, {  y: dataObj[i].dy+300, onComplete: hide, onCompleteParams: [ dataObj[i] ], delay: Math.random() * .15, ease: Quint.easeOut });
                            }else{
                                TweenMax.to( dataObj[i], Math.random() * .2 + .1, {  y: dataObj[i].dy-300, onComplete: hide, onCompleteParams: [ dataObj[i] ], delay: Math.random() * .15, ease: Quint.easeOut });
                            }

                        }

                    }

                    function hide( obj ){
                        obj.visible = false;
                        obj.y=obj.dy;
                    }
                }
            };

            FiveGlitchEffect.prototype.snapshot = function( _container, _objectToCapture ){

                this.theContainer = _container || this.mainContainer;
                this.objectToCapture = _objectToCapture || this.mainContainer;

                this.tempSprite = new PIXI.Sprite( this.snapshotTexture );
                this.snapshotTexture.clear();
                this.snapshotTexture.render( _objectToCapture );
                this.tempSprite.texture = this.snapshotTexture;

                //this is a good test to see the entire snapshot of the texture area that was copied
                //this.mainContainer.addChild( this.tempSprite );

            };

            function randomizer(min, max){
                return Math.floor(Math.random()*(max-min+1)+min);
            }

            function debouncer( func , timeout ) {
                var timeoutID , timeout = timeout || 200;
                return function () {
                    var scope = this , args = arguments;
                    clearTimeout( timeoutID );
                    timeoutID = setTimeout( function () {
                        func.apply( scope , Array.prototype.slice.call( args ) );
                    } , timeout );
                }
            }

            return FiveGlitchEffect;

        }();

        // ============================================
        //
        // FROM FiveLOGOGlitchEffect.js (ui folder)
        //
        // ** NOTE **
        // Seperate glitch function just for the FIVE LOGO
        // PLACED IN MAIN.JS TO ACCESS $state, $scope
        // AND VIEWS
        //
        // ============================================


        var FiveLOGOGlitchEffect = function(){

            function FiveLOGOGlitchEffect( _targetContainer, _pixiObjRenderer ){
                //main
                this.mainContainer = _targetContainer;

                //buffer array of allshape elements
                this.glitchElementArray = [];

                //snapshot vars
                this.snapshotTexture = new PIXI.RenderTexture( $(window).width(), $(window).height() );
                this.tempSprite = new PIXI.Sprite( this.snapshotTexture );
                this.maskContainer = new PIXI.DisplayObjectContainer();

                this.glitchFilter = new PIXI.FiveGlitch();
                this.dotFilter = new PIXI.DotScreenFilter();
                this.grayFilter = new PIXI.GrayFilter();
                this.rgbSplit = new PIXI.RGBSplitFilter();
                this.rgbSplit.red.x = -10;
                this.rgbSplit.red.y = 0;
                this.rgbSplit.green.x = 0;
                this.rgbSplit.green.y = 0;
                this.rgbSplit.blue.x = 10;
                this.rgbSplit.blue.y = 0;

                // SET METHODS TO ELIMINATE CIRCULAR REFERENCE
                this._pixiObjRenderer = _pixiObjRenderer;
                this._getMouseData = _getMouseData;

                this.glitchFilterSwitch = [ false, false, false, false ];
                this.glitchFiltersArray = [ this.glitchFilter, this.dotFilter, this.grayFilter, this.rgbSplit ];
                //console.log( this.glitchFilter  )
            }


            var viewTestGrid=0;
            FiveLOGOGlitchEffect.prototype.createGlitchGrid = function( _container ){

                //map to container or else fall back to the default parent (this.mainContainer)
                this.theContainer = _container || this.mainContainer;

                var gridsAcross = 8, gridsDown = 30;
                var count=0, across=300, down=0;

                for( var i=0; i<800; i++){

                    /*
                     var maskWidth = Math.ceil( Math.random() * 100 ) + 10,
                     maskHeight = Math.ceil( Math.random() * 15 ) + 5, //100
                     maskHeight = Math.ceil( Math.random() * 25 ) + 15 //100
                     //maskHeight = Math.ceil( Math.random() * 100 ) + 15, //100
                     //sizeFactor = 100
                     */

                    var sizeFactor = Math.ceil( Math.random() * 35 ) + 10;
                    var maskWidth = sizeFactor,
                    //maskHeight = Math.ceil( Math.random() * 15 ) + 5, //100
                    //maskHeight = Math.ceil( Math.random() * 25 ) + 15, //100
                        maskHeight = sizeFactor; //100


                    var gutter = 0;
                    var tx = across;
                    var ty = ( down * ( sizeFactor + 2 ) ) + 150;
                    //var ty = ( down * ( 20 + 2 ) ) + 150;

                    //Handle bound contraint issue -
                    if( tx > this.snapshotTexture.width-maskWidth )
                        tx = this.snapshotTexture.width-maskWidth;
                    if( ty > this.snapshotTexture.height-maskHeight )
                        ty = this.snapshotTexture.height-maskHeight;



                    //create the new texture
                    var glitchTexture = new PIXI.Texture( this.snapshotTexture, new PIXI.Rectangle( tx, ty, maskWidth, maskHeight) );
                    glitchTexture._updateUvs();

                    //create the new sprite using the newly created texture
                    var croppedSprite = new PIXI.Sprite( glitchTexture );
                    croppedSprite.x = tx;
                    croppedSprite.y = ty;
                    croppedSprite.dx = tx;
                    croppedSprite.dy = ty;

                    //croppedSprite.visible = ( randomizer( 0, 5 ) == 0 ) ? 0 : 1;
                    croppedSprite.visible  = 0; //default as invisible

                    //IMPORTANT! increment the grid stack
                    across += ( maskWidth + gutter );

                    //breakpoint for glitch
                    if( across > $(window).width() ){
                        var rndIndent = Math.floor( Math.random() * 100 );
                        across = rndIndent;
                        down++;
                    }

                    //add sprite element to buffer array
                    this.glitchElementArray.push( croppedSprite );

                    //add this to the
                    this.maskContainer.addChild( croppedSprite );

                    //This is a test grid to visualize the glitch shapes
                    if( viewTestGrid ){
                        var maskshape = new PIXI.Graphics();
                        maskshape.beginFill(0xFFFF00);
                        maskshape.drawRect( tx, ty, maskWidth, maskHeight );
                        this.mainContainer.addChild( maskshape );
                    }
                    //counter to keep track of element count
                    count++;
                }
                this.mainContainer.addChild( this.maskContainer );

            };


            FiveLOGOGlitchEffect.prototype.glitch = function( _container, _objectToCapture, _direction ){

                var direction = _direction || false;

                //map to container or else fall back to the default parent (this.mainContainer)
                this.theContainer = _container || this.mainContainer;

                //declare object to capture pixel data - if not delared then default to the main displayobject (this.mainContainer)
                this.objectToCapture = _objectToCapture || this.mainContainer;


                //take snapshot of new displayobject - update the texture
                this.snapshot( _container, _objectToCapture );

                /**/
                //GLITCH PLACEMENT
                for( var i=0; i<this.glitchElementArray.length; i++){

                    this.glitchElementArray[i].visible = ( randomizer( 0, 2 ) == 0 ) ? 0 : 1;
                    this.glitchElementArray[i].alpha = 1//randomizer( 0, 1 ); //1

                    this.glitchElementArray[i].position.x = randomizer( this.glitchElementArray[i].dx - 75,  this.glitchElementArray[i].dx + 75 ) - 35;
                    this.glitchElementArray[i].position.y = randomizer( this.glitchElementArray[i].dy - 75,  this.glitchElementArray[i].dy + 75 ) - 20;
                }

                this.glitchFilterSwitch[0]=1//randomizer(0,1); //glitch filter

                //if( randomizer(0, 2) == 0 ) {
                this.glitchFilterSwitch[1]=1; //dot filter
                //}

                this.glitchFilterSwitch[2]=randomizer(0,1); //gray
                this.glitchFilterSwitch[3]=1;//randomizer(0,1); //rgbfilter

                //if(_container)
                _container.visible=false;

                if(direction){
                    TweenMax.delayedCall( .075, resetGlitchWithDirection,  [ this.glitchElementArray, this.glitchFilterSwitch, direction ] ); //.075
                }else{
                    TweenMax.delayedCall( .1, resetGlitch,  [ this.glitchElementArray, this.glitchFilterSwitch ] ); //.075
                }


                function resetGlitch( dataObj, filtersArray ){
                    //if(_container)
                    _container.visible = true;

                    for( var i=0; i<filtersArray.length; i++){
                        filtersArray[i]=false;
                    }

                    for( var i=0; i<dataObj.length; i++){
                        TweenMax.to( dataObj[i], 0, { visible:false, alpha: 0, delay: Math.random() * .2 });
                    }
                }

                var obj = this;

                function resetGlitchWithDirection( dataObj, filtersArray, direction ){


                    //if(_container)
                    //_container.visible = true;

                    for( var i=0; i<filtersArray.length; i++){
                        filtersArray[i]=false;
                    }

                    for( var i=0; i<dataObj.length; i++){

                        TweenMax.to( dataObj[i], 0, { visible:false, alpha: 0, delay: /* i*.005*/ Math.random() * .4 });

                        if(direction){

                            if( _getMouseData().deltaY>0 ){
                                TweenMax.to( dataObj[i], Math.random() * .2 + .1, {  y: dataObj[i].dy+300, onComplete: hide, onCompleteParams: [ dataObj[i] ], delay: Math.random() * .15, ease: Quint.easeOut });
                            }else{
                                TweenMax.to( dataObj[i], Math.random() * .2 + .1, {  y: dataObj[i].dy-300, onComplete: hide, onCompleteParams: [ dataObj[i] ], delay: Math.random() * .15, ease: Quint.easeOut });
                            }

                        }

                    }

                    function hide( obj ){
                        obj.visible = false;
                        obj.y=obj.dy;
                    }
                }
            };

            FiveLOGOGlitchEffect.prototype.renderGlitchFilters = function( _target ){

                if( this._pixiObjRenderer instanceof PIXI.CanvasRenderer) {
                    //canvas renderer
                    //console.log( "canvas" )
                } else {
                    //webgl renderer
                    //console.log( "webgl" )

                    var filtersToApply = [];
                    for (var i = 0; i < this.glitchFilterSwitch.length; i++) {
                        if( this.glitchFilterSwitch[i] )
                            filtersToApply.push( this.glitchFiltersArray[i] );
                    }

                    _target.filters = filtersToApply.length > 0 ? filtersToApply : null;
                    this.maskContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
                    this.mainContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
                    //this.mainContainer
                }
            };

            FiveLOGOGlitchEffect.prototype.snapshot = function( _container, _objectToCapture ){

                this.theContainer = _container || this.mainContainer;
                this.objectToCapture = _objectToCapture || this.mainContainer;

                this.tempSprite = new PIXI.Sprite( this.snapshotTexture );
                this.snapshotTexture.clear();
                this.snapshotTexture.render( _objectToCapture );//_objectToCapture
                this.tempSprite.texture = this.snapshotTexture;


                //this is a good test to see the entire snapshot of the texture area that was copied
                //this.mainContainer.addChild( this.tempSprite );

            };

            function randomizer(min, max){
                return Math.floor(Math.random()*(max-min+1)+min);
            }


            return FiveLOGOGlitchEffect;

        }();



        // ============================================
        //
        // FROM FiveLogo.js (ui folder)
        //
        // ** NOTE **
        // PLACED IN MAIN.JS TO ACCESS $state, $scope
        // AND VIEWS
        //
        // ============================================

        var FiveLogo = function(){

            function FiveLogo( _instanceContainer, _isDeepLink ){

                //set base displayObject
                this.instanceContainer = _instanceContainer;

                // SET BOOLEAN VALUE TO START OR STOP FIVE COUNT ANIMATION (STOP ON DEEP LINKS)
                this.isDeepLink = _isDeepLink;

                //main container to hold the major elements: Stage > mainContainer > Nth element
                this.fiveLogoTempContainer =new PIXI.DisplayObjectContainer();

                //BUILD A LOGO OBJECT CONTAINER
                this.logoDisplayObject = new PIXI.DisplayObjectContainer();

                this.contentContainerObject = new PIXI.DisplayObjectContainer();

                this.logoItem;
                this.logoGlitchFilterObject;
                this.logoParticles = [];
                this.assetsLoader;

                this.ACROSS_SUM = 0;
                this.DOWN_INDEX = 0;
                this.BASE_CARD_WIDTH = this.BASE_CARD_HEIGHT = 223;
                this.GUTTER = 10;
                this.INDENT = 75;

                //mousewheel vars
                this.LOGO_MOUSE_INDEX=0;
                this.LOGO_MOUSE_MIN=0;
                this.LOGO_MOUSE_MAX=0;

                this.partDir=0;


                var paths=[];
                var gridBlockArray = [], gridItemArray = [];
                var gridGlitchObject;
                this.introCountContainer;
                this.introIntervalID = 0;
                this.introCount = 1;

                this.glitchFilter = new PIXI.FiveGlitch();
                this.dotFilter = new PIXI.DotScreenFilter();
                this.glitchObjectList = [];

                this.logoGlitchObject;

                this.itemTracker=[];

                this.messageItem;

                this.init(this.isDeepLink);
            }

            FiveLogo.prototype.init = function(_deepLink){
                this.preloadAssets(_deepLink);
            };

            FiveLogo.prototype.preloadAssets = function(_deepLink){
                if(_deepLink) {
                    this.fiveLogoTempContainer.addChild( this.contentContainerObject );

                    this.instanceContainer.addChild( this.fiveLogoTempContainer  );
                    //_getPixiObj().stage.addChild( this.fiveLogoTempContainer  );

                    // TODO: CHANGE lifehappens.png BASED ON LANGUAGE
                    this.assetsLoader = new PIXI.AssetLoader( ['img/en-us/logo_main.png', 'img/en-us/life_happens.png', 'img/logo_1.png', 'img/logo_2.png', 'img/logo_3.png', 'img/logo_4.png']);
                    //had to bind an onComplete handler to proxy the scopeobject into buildscene function
                    this.assetsLoader.addEventListener('onComplete', this.buildSceneDeepLink.bind(this) );
                    this.assetsLoader.load(); //begin load
                } else {
                    this.fiveLogoTempContainer.addChild( this.contentContainerObject );

                    this.instanceContainer.addChild( this.fiveLogoTempContainer  );
                    //_getPixiObj().stage.addChild( this.fiveLogoTempContainer  );

                    this.assetsLoader = new PIXI.AssetLoader( ['img/en-us/logo_main.png', 'img/en-us/life_happens.png', 'img/logo_1.png', 'img/logo_2.png', 'img/logo_3.png', 'img/logo_4.png']);
                    //had to bind an onComplete handler to proxy the scopeobject into buildscene function
                    this.assetsLoader.addEventListener('onComplete', this.buildScene.bind(this) );
                    this.assetsLoader.load(); //begin load
                }
            };

            FiveLogo.prototype.buildSceneDeepLink = function(){

                this.countGlitchObject = new FiveLOGOGlitchEffect( this.instanceContainer, _getPixiObj().renderer, _getMouseData() );
                this.logoGlitchObject = new FiveGlitchEffect( _getPixiObj().stage, _getPixiObj().renderer, _getMouseData() );

                this.introCountContainer = new PIXI.DisplayObjectContainer();
                this.introCountContainer.x = 0;
                this.introCountContainer.y = 0;

                //MESSAGING
                this.messageItem = PIXI.Sprite.fromImage( this.assetsLoader.assetURLs[1] );
                this.messageItem.offsetX = -( this.messageItem.width + 65 );
                this.messageItem.dx = 0//$(window).width() / 2 + this.messageItem.offsetX;
                this.messageItem.dy = 200//$(window).height() / 2;

                this.messageItem.x = this.messageItem.dx;
                this.messageItem.y = this.messageItem.dy;
                this.messageItem.alpha=0;

                this.logoDisplayObject.addChild( this.messageItem );

                this.buildCount();
                //this.buildMainLogo();
            };


            FiveLogo.prototype.buildScene = function(){

                //this.logoGlitchObject = new FiveLOGOGlitchEffect( _getPixiObj().stage, _getPixiObj().renderer, _getMouseData() );
                this.countGlitchObject = new FiveLOGOGlitchEffect( this.instanceContainer, _getPixiObj().renderer, _getMouseData() );
                this.logoGlitchObject = new FiveGlitchEffect( this.instanceContainer, _getPixiObj().renderer, _getMouseData() );


                this.introCountContainer = new PIXI.DisplayObjectContainer();
                this.introCountContainer.x = 0;
                this.introCountContainer.y = 0;

                //MESSAGING
                this.messageItem = PIXI.Sprite.fromImage( this.assetsLoader.assetURLs[1] );
                this.messageItem.offsetX = -( this.messageItem.width + 65 );
                this.messageItem.dx = 0//$(window).width() / 2 + this.messageItem.offsetX;
                this.messageItem.dy = 200//$(window).height() / 2;

                this.messageItem.x = this.messageItem.dx;
                this.messageItem.y = this.messageItem.dy;
                this.messageItem.alpha=0;

                this.logoDisplayObject.addChild( this.messageItem );
                this.contentContainerObject.addChild( this.logoDisplayObject );

                this.buildCount();
                //this.buildMainLogo();

            };




            FiveLogo.prototype.buildMainLogo = function(){
                //ADD NEW OBJECT INTO MAINDISPLAYCONTAINER
                this.contentContainerObject.addChild( this.logoDisplayObject );

                this.logoItem = PIXI.Sprite.fromImage( this.assetsLoader.assetURLs[0] );

                this.logoItem.x = this.messageItem.width + 70//( $(window).width()/2) - this.logoItem.width;

                if( _checkDevice() ){
                    this.logoItem.y = ( $(window).height()/2 )+30; //vertically centered
                }else{
                    this.logoItem.y = this.logoItem.height/2; //vertically centered
                }

                this.logoItem.dx = this.logoItem.x;
                this.logoItem.dy = this.logoItem.y;
                this.logoItem.pivot.x = this.logoItem.width/2;
                this.logoItem.pivot.y = (this.logoItem.height/2);
                this.logoItem.alpha=0;
                this.logoDisplayObject.addChild( this.logoItem );

                if( _checkDevice() ){
                    this.logoDisplayObject.scale.x = this.logoDisplayObject.scale.y = .45;
                    this.logoDisplayObject.x = $(window).width()/2;
                    this.logoDisplayObject.y = $(window).height()/2 - this.logoDisplayObject.width/2;
                }else{
                    //this.createLogoGrid();
                }

                TweenMax.to( this.logoItem, .25, { alpha: 1, delay: .25 } )


            };

            FiveLogo.prototype.createLogoGrid = function(){

                var leftOffset = 0, across = 0, down=0;
                var maskWidth = 50, maskHeight = 15, gutter = 0;

                leftOffset = this.logoItem.position.x - ( this.logoItem.width / 2 )
                across = leftOffset;
                var maxVal = leftOffset + this.logoItem.width;

                var snapshotTexture = new PIXI.RenderTexture( $(window).width(), $(window).height() );
                snapshotTexture.render( this.fiveLogoTempContainer );

                //remove the logo image item
                this.logoDisplayObject.removeChild( this.logoItem );

                for( var i=0; i<240; i++){

                    var tx =  across;
                    var ty = ( this.logoItem.position.y - this.logoItem.height/2 ) + ( down * ( maskHeight + gutter ) );

                    if( tx > snapshotTexture.width-maskWidth ) {
                        tx = snapshotTexture.width-maskWidth;
                    }

                    if( ty > snapshotTexture.height-maskHeight ) {
                        ty = snapshotTexture.height-maskHeight;
                    }

                    var logoTexture = new PIXI.Texture( snapshotTexture, new PIXI.Rectangle( tx, ty, maskWidth, maskHeight ) );
                    logoTexture._updateUvs();

                    //create the new sprite using the newly created texture
                    var croppedSprite = new PIXI.Sprite( logoTexture );



                    croppedSprite.pivot.x = croppedSprite.width/2;
                    croppedSprite.pivot.y = croppedSprite.height/2;
                    croppedSprite.dx = tx + croppedSprite.width/2;
                    croppedSprite.dy = ty + croppedSprite.height/2;
                    croppedSprite.dw = croppedSprite.width;
                    croppedSprite.dh = croppedSprite.height;
                    croppedSprite.x = croppedSprite.dx + Math.random() * 250 - 125;
                    croppedSprite.y = croppedSprite.dy + Math.random() * 250 - 125;

                    croppedSprite.alpha = 0;
                    croppedSprite.scale.x = 0;
                    croppedSprite.scale.y = 0;


                    this.logoDisplayObject.addChild( croppedSprite );

                    this.logoParticles.push( croppedSprite );

                    //imcrement
                    across += ( maskWidth + gutter );

                    //breakpoint for glitch
                    if( across > maxVal ){
                        var rndIndent = leftOffset + Math.floor( Math.random() * 100 );
                        rndIndent=leftOffset;//temp
                        across = rndIndent;
                        down++;
                    }

                }



                this.itemTracker.push(this.logoDisplayObject);





                //instantiate glitch for 5
                this.logoDisplayObject.glitchObject = new FiveLogoGlitchEffect( this.logoDisplayObject, this.logoItem, _getPixiObj().renderer  );
                this.logoDisplayObject.glitchObject.createGlitchGrid();
                this.glitchTheFive();

                //this.logoParticles.reverse();//change direction


                //this.fiveLogoTempContainer.y = $(window).width/2;
                //this.contentContainerObject.x = ( $(window).width() / 2 ) - ( this.contentContainerObject.width / 2);
                //this.contentContainerObject.y = ( $(window).height() / 2 ) - ( this.contentContainerObject.height / 2);

                this.transitionLogoIn();
            };








            FiveLogo.prototype.createMessaging = function(){

                this.logoGlitchObject = new FiveGlitchEffect( _getPixiObj().stage, this.instanceContainer, _getPixiObj().renderer  );
                this.logoGlitchObject.createGlitchGrid();
                this.glitchTheFive();

                TweenMax.fromTo( this.messageItem, .5, { x: this.messageItem.dx+20, alpha: 0}, { x: this.messageItem.dx, alpha: 1 });
                this.logoGlitchObject.glitch(  this.instanceContainer, this.messageItem );

                this.buildMainLogo();

            };







            FiveLogo.prototype.glitchTheFive = function(){
                //glitch repeat and transition in

                clearInterval( this.tempID )

                this.tempID=0; this.tempCount=0;
                this.tempID = setInterval( function( obj ){

                    //obj.logoGlitchObject.glitch( obj.fivegridTempContainer, obj.logoDisplayObject ); //add this if you want transition glitch
                    obj.logoGlitchObject.glitch( obj.instanceContainer, obj.instanceContainer ); //add this if you want transition glitch


                    repeater( obj );
                }, 150, this );

                function repeater( obj ){
                    if( obj.logoDisplayObject.glitchObject )
                        obj.logoDisplayObject.glitchObject.glitch( 25, 25, .1);
                    obj.glitchOnDemand();
                    ( obj.tempCount < 3) ? obj.tempCount++ : clearInterval( obj.tempID );
                }
            };

            FiveLogo.prototype.glitchOnDemand = function(){

                var _fragmentDistanceX = 50, _fragmentDistanceY = 10;

                for( var i=0; i<this.logoParticles.length; i++){
                    this.logoParticles[i].visible = ( randomizer( 0, 5 ) == 0 ) ? 1 : 0;
                    this.logoParticles[i].alpha = randomizer(0,1);
                    this.logoParticles[i].position.x = randomizer( this.logoParticles[i].dx - _fragmentDistanceX,  this.logoParticles[i].dx + _fragmentDistanceX );
                    this.logoParticles[i].position.y = randomizer( this.logoParticles[i].dy - _fragmentDistanceY,  this.logoParticles[i].dy + _fragmentDistanceY );
                    this.logoParticles[i].width=Math.random()*150;
                    this.logoParticles[i].height=Math.random()*50;
                }

                if(this.logoDisplayObject.glitchObject) {
                    this.logoDisplayObject.glitchObject.glitch( 25, 25, .1);
                }

                TweenMax.delayedCall( .1, resetGlitch,  [ this.logoParticles ] );

                function resetGlitch( particles  ){

                    for( var i=0; i<particles.length; i++){
                        var rv = Math.random() * .1;
                        //TweenMax.to( particles[i], 0, { visible:false, alpha: 0, delay: Math.random() * .15 });
                        TweenMax.to( particles[i], .05, { visible:true, alpha: 1, delay: rv, width: particles[i].dw, height: particles[i].dh });
                        TweenMax.to( particles[i].position, .05, { x: particles[i].dx, y:  particles[i].dy, delay: rv });
                    }
                }
            };


            FiveLogo.prototype.mouseWheelUpdate = function(){

                this.glitchOnDemand();
                if(this.logoDisplayObject.glitchObject) {
                    this.logoDisplayObject.glitchObject.glitch( 25, 25, .1);
                }

            };


            var t=0, glitchDuration=0;
            FiveLogo.prototype.renderGrid = function() {

                t++;
                if(t%glitchDuration == 0){
                    glitchDuration=randomizer(250, 1000);
                    //this.logoDisplayObject.glitchObject.glitch( this.fivegridTempContainer, this.fivegridTempContainer );
                }

                //!!! Call render function in the FiveEffect prototype class
                if(this.logoDisplayObject.glitchObject)
                    this.logoDisplayObject.glitchObject.renderGlitchFilters( this.fiveLogoTempContainer );
                //this.logoDisplayObject.glitchObject.renderGlitchFilters( _getPixiObj().stage );

                if(this.logoGlitchObject) {
                    this.logoGlitchObject.renderGlitchFilters( _getPixiObj().stage );
                }

                this.contentContainerObject.x = $(window).width() / 2 - this.contentContainerObject.width /2;
                this.contentContainerObject.y = $(window).height() / 2 - this.contentContainerObject.height /2;





            };



            FiveLogo.prototype.buildCount = function( callback ){
                //alert($rootScope.siteData.User.Version);
                if( _checkDevice() ){
                    this.introCountContainer.scale.x = this.introCountContainer.scale.y = .5;
                }
                if ($rootScope.siteData.User.Name !== "Safari") {
                    this.countGlitchObject.createGlitchGrid( this.instanceContainer );
                }

                //count item offsets
                var offsets = [ {},{},{"x":180, "y": -80}, { "x": 50, "y": 10}, { "x": 190, "y": 0}, { "x": 100, "y": -100} ];

                for( var i=2; i<=5; i++ ){

                    var introCountItem = PIXI.Sprite.fromImage( this.assetsLoader.assetURLs[i] );
                    //introCountItem.visible = (i==1)?true:false;

                    introCountItem.visible = false;
                    introCountItem.type = "countItem";
                    introCountItem.id = "countObject" + i;

                    introCountItem.scale.x = .25;
                    introCountItem.scale.y = .25;

                    //introCountItem.pivot.x = introCountItem.width/2;
                    //introCountItem.pivot.y = introCountItem.height/2;
                    introCountItem.x = offsets[i].x;
                    introCountItem.y = offsets[i].y;
                    this.introCountContainer.addChild( introCountItem );

                }

                this.contentContainerObject.addChild( this.introCountContainer );

                this.startCount();

                if( callback )
                    callback();

            };
            FiveLogo.prototype.startCount = function(){

                var obj = this;

                obj.introIntervalID = setInterval( function( ){

                    if( obj.incrementIntroCount() == 'endCount' ){
                        clearInterval( obj.introIntervalID );
                        //console.log("END OF COUNT")
                        obj.createMessaging();
                        //bypassHomeScreen = setTimeout(function() { $scope.goToContentSection(0); }, 2000);
                    }

                }, 700 );
            };

            FiveLogo.prototype.incrementIntroCount = function(){

                if(this.introCount<=6){

                    this.introCount++;

                    for(var i=0; i<this.introCountContainer.children.length; i++ ){

                        if( this.introCountContainer.children[i].type == "countItem" ) {

                            if(this.introCountContainer.children[i].id=="countObject"+this.introCount){

                                this.introCountContainer.children[i].scale.x += (this.introCount/10);
                                this.introCountContainer.children[i].scale.y += (this.introCount/10);
                                this.introCountContainer.children[i].visible=true;

                                this.countGlitchObject.glitch( this.contentContainerObject, this.instanceContainer  );



                            }else{
                                this.introCountContainer.children[i].visible=false;
                            }
                        }
                    }
                }

                if(this.introCount==6) {
                    return "endCount";
                }

            };

            function countItemObject( id ){
                for(var i=0; i<this.introCountContainer.children.length; i++ ){
                    if( this.introCountContainer.children[i].id == "countObject" + id ){
                        return this.introCountContainer.children[i];
                    }
                }
            }


            function _swipeUpdate(){
                if( _getSwipeData().direction == "up" ){

                }else if( _getSwipeData().direction == "down" ){

                }
            }

            function randomizer(min, max){
                return Math.floor(Math.random()*(max-min+1)+min);
            }

            function visibility( obj, visible ){
                if(visible==undefined) { visible=true; }
                obj.visible=visible;
            }

            FiveLogo.prototype.resize = function(){

                var offset=0;
                for(var i=0; i<this.itemTracker.length; i++){
                    if(i==1){ offset=120; }//offset for 5logo
                    //this.itemTracker[i].x = ( $(window).width() / 2 ) - ( this.itemTracker[i].width / 2) ;
                }

            };

            return FiveLogo;

        }();

        // ============================================
        //
        // INSTANTIATE THE MAIN INIT FUNCTIONS
        //
        // ============================================

        initWindowHandler();
        initPixi();
        rendererResize();


        //REMOVE
        testButtons();
        initStats();

        // ============================================
        //
        // STATE CONTROLLER - WILL CHANGE AND MODIFY
        // VIEWS BASED ON STATE
        //
        // ============================================

        // INSTANTIATE STATE OBJECT
        $scope.urlData = {};

        // STATE EVENT HANDLERS - ERROR HANDLER
        $scope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
            //console.log(error);
        });

        // ========================================================
        //
        // DEEP LINK - ASSIGN APPROPRIATE VIEW BASED ON PARAMETER
        // expanded views are being handled in app.js & expanded.js
        //
        // ========================================================


        if ($state.params.promotionId) {
            ga('send', 'pageview', {'Page' : 'Promotion'});
            $rootScope.CURRENT_SECTION = "SECTION_PROMOTION";
            document.title = '5 Gum Promotion |' + $state.params.promotionId;
        } else if ($state.params.productId) {
            $rootScope.CURRENT_SECTION = "SECTION_GUM";
        } else if ($state.params.product) {
            var productExistsInData = false;
            // CHECK TO SEE IF PRODUCT PARAMETER EXISTS IN DATA - IF NOT, IT'S A 404
            if ($rootScope.productsExist) {
                for (var j = 0; j < $rootScope.product.length; j++) {
                    if ($state.params.product === $rootScope.product[j].Id) {
                        productExistsInData = true;
                    }
                }
            } else {
                for (var j = 0; j < $rootScope.landing.length; j++) {
                    if ($state.params.product === $rootScope.landing[j].Id) {
                        productExistsInData = true;
                    }
                }
            }

            // SET VIEW BASED ON WHETHER PRODUCT EXISTS IN DATA
            if (productExistsInData) {
                ga('send', 'pageview', {'Page' : 'Expanded View: ' + $state.params.id});
                document.title = '5 Gum Gallery | ' + $state.params.id;
                cutToSection(2, false, true);
            } else {
                status = 404;
                $state.go('404');
            }
        } else if ($state.params.id) {
            $rootScope.CURRENT_SECTION = "SECTION_EXPANDED";
            ga('send', 'pageview', {'Page' : 'Expanded View: ' + $state.params.id});
            document.title = '5 Gum Gallery | ' + $state.params.id;
        } else if ($state.params.section) {
            var sectionExistsInData = false;
            // CHECK TO SEE IF PRODUCT PARAMETER EXISTS IN DATA - IF NOT, IT'S A 404
            for (var k = 0; k < $rootScope.content.length; k++) {
                if ($state.params.section === $rootScope.content[k].Id) {
                    sectionExistsInData = true;
                }
            }

            // SET VIEW BASED ON WHETHER PRODUCT EXISTS IN DATA
            if (sectionExistsInData) {
                ga('send', 'pageview', {'Page' : 'Content'});
                document.title = '5 Gum Gallery | ' + $state.params.section;
                cutToSection(1, false, true);
            } else {
                status = 404;
                $state.go('404');
            }
        } else if ($state.params.directory === 'content') {
            $rootScope.currentProductIndex = null;
            $('.accordion__content ul li').removeClass("active-product");
            ga('send', 'pageview', {'Page' : 'Content'});
            cutToSection(1);
            document.title = '5 Gum Gallery';
        } else if ($state.params.directory === 'product') {
            ga('send', 'pageview', {'Page' : 'Product'});
            cutToSection(2);
            document.title = '5 Gum Flavors';
        } else if (!$state.params.directory){
            ga('send', 'pageview', {'Page' : 'Home'});
            cutToSection(0);
        } else {
            ga('send', 'pageview', {'Page' : '404'});
            $state.go('404');
        }

        // ========================================================
        //
        // STATE to STATE - ASSIGN APPROPRIATE VIEW BASED ON OBJECT
        //
        // ========================================================

        $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
            // ASSIGN PARAMETERS FROM STATE JSON OBJECT COMING FROM ANOTHER STATE

            $scope.urlData = toParams;
            $scope.fromUrlData = fromParams;
            $scope.fromState = fromState.name;
            $scope.toState = toState.name;

            // STATE CONDITIONALS ON STATE CHANGE
            if ($state.params.directory === 'promotion') {
                location.assign = $rootScope.promotions.Url;
                ga('send', 'pageview', {'Page' : 'Promotion'});
                $rootScope.CURRENT_SECTION = "SECTION_PROMOTION";
                document.title = '5 Gum Promotion';
            } else if ($state.params.promotionId) {
                ga('send', 'pageview', {'Page' : 'Promotion'});
                $rootScope.CURRENT_SECTION = "SECTION_PROMOTION";
                document.title = '5 Gum Promotion |' + $state.params.promotionId;
            } else if ($state.params.directory === 'content') {
                ga('send', 'pageview', {'Page' : 'Content'});
                cutToSection(1);
                $rootScope.CURRENT_SECTION = "SECTION_MAIN";
                $rootScope.currentProductIndex = null;
                $('.accordion__content ul li').removeClass("active-product");
                $scope.currentIndex = getMouseIndexBySectionName($rootScope.CURRENT_SECTION);
                $scope.goToContentSection($scope.currentIndex);
                document.title = '5 Gum Gallery';
            } else if ($state.params.id) {
                ga('send', 'pageview', {'Page' : 'Expanded View: ' + $state.params.id});
                cutToSection(1);
                $rootScope.CURRENT_SECTION = "SECTION_MAIN";
                $scope.currentIndex = getMouseIndexBySectionName($rootScope.CURRENT_SECTION);
                document.title = '5 Gum Gallery | ' + $state.params.id;
            } else if ($state.params.section) {
                if ($scope.fromState === $scope.toState) {
                    $rootScope.CURRENT_SECTION = "SECTION_MAIN";
                    document.title = '5 Gum Gallery';
                    ga('send', 'pageview', {'Page' : 'Content'});
                    // GET LANDING PAGE PRODUCT VIEWS (GLOBAL SITE - NO PRODUCTS)
                    getIndexBySlug("SECTION_MAIN", $state.params.section, false, function(response) {
                        // GET CURRENT MOUSE_INDEX
                        var currentIndex = getMouseIndexBySectionName("SECTION_MAIN");
                        var maxIndex = getMouseMaxBySectionName("SECTION_MAIN");
                        var nthListItem = currentIndex + 1;

                        if (nthListItem === 1) {
                            $(".content-pagination ul li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li.gray-link").removeClass("gray-link");
                            $scope.firstPage = true;
                            $scope.lastPage = false;
                        } else {
                            $("li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                            $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                            if (currentIndex == maxIndex) {
                                $scope.lastPage = true;
                                $scope.firstPage = false;
                            } else {
                                $scope.lastPage = false;
                                $scope.firstPage = false;
                            }
                        }
                    });
                } else {
                    cutToSection(1);
                    $rootScope.CURRENT_SECTION = "SECTION_MAIN";
                    document.title = '5 Gum Gallery';
                    $rootScope.currentProductIndex = null;
                    $('.accordion__content ul li').removeClass("active-product");
                    ga('send', 'pageview', {'Page' : 'Content'});
                    // GET LANDING PAGE PRODUCT VIEWS (GLOBAL SITE - NO PRODUCTS)
                    getIndexBySlug("SECTION_MAIN", $state.params.section, false, function(response) {
                        var productIndex = response;
                        var individualProductSection = "SECTION_MAIN";
                        cutToGridPageByIndex( individualProductSection, productIndex );
                        // GET CURRENT MOUSE_INDEX
                        var currentIndex = getMouseIndexBySectionName("SECTION_MAIN");
                        var maxIndex = getMouseMaxBySectionName("SECTION_MAIN");
                        var nthListItem = currentIndex + 1;

                        if (nthListItem === 1) {
                            $(".content-pagination ul li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li.gray-link").removeClass("gray-link");
                            $scope.firstPage = true;
                            $scope.lastPage = false;
                        } else {
                            $("li.blue-link").removeClass("blue-link");
                            $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                            $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                            if (currentIndex == maxIndex) {
                                $scope.lastPage = true;
                                $scope.firstPage = false;
                            } else {
                                $scope.lastPage = false;
                                $scope.firstPage = false;
                            }
                        }
                    });
                }
            } else if ($state.params.directory === 'product') {
                cutToSection(2);
                $rootScope.CURRENT_SECTION = "SECTION_PRODUCT";
                document.title = '5 Gum Flavors';
                ga('send', 'pageview', {'Page' : 'Product'});
            } else if ($state.params.product) {
                if ($scope.fromState === $scope.toState) {
                    $rootScope.CURRENT_SECTION = "SECTION_PRODUCT";
                    document.title = '5 Gum Flavors';
                    ga('send', 'pageview', {'Page' : 'Product'});
                    if ($rootScope.productsExist) {
                        // GET PRODUCT PAGE INDIVIDUAL PRODUCT VIEWS
                        getIndexBySlug("SECTION_PRODUCT", $state.params.product, true, function(response) {
                            var productIndex = response;
                            // GET CURRENT MOUSE_INDEX
                            var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
                            var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
                            var nthListItem = currentIndex + 1;

                            if (nthListItem === 1) {
                                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                                $scope.firstPage = true;
                                $scope.lastPage = false;
                            } else {
                                $("li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                                if (currentIndex == maxIndex) {
                                    $scope.lastPage = true;
                                    $scope.firstPage = false;
                                } else {
                                    $scope.lastPage = false;
                                    $scope.firstPage = false;
                                }
                            }
                        });
                    } else {
                        // GET LANDING PAGE PRODUCT VIEWS (GLOBAL SITE - NO PRODUCTS)
                        getIndexBySlug("SECTION_PRODUCT", $state.params.product, false, function(response) {
                            // GET CURRENT MOUSE_INDEX
                            var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
                            var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
                            var nthListItem = currentIndex + 1;

                            if (nthListItem === 1) {
                                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                                $scope.firstPage = true;
                                $scope.lastPage = false;
                            } else {
                                $("li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                                if (currentIndex == maxIndex) {
                                    $scope.lastPage = true;
                                    $scope.firstPage = false;
                                } else {
                                    $scope.lastPage = false;
                                    $scope.firstPage = false;
                                }
                            }
                        });
                    }
                } else {
                    cutToSection(2);
                    $rootScope.CURRENT_SECTION = "SECTION_PRODUCT";
                    document.title = '5 Gum Flavors';
                    ga('send', 'pageview', {'Page' : 'Product'});
                    if ($rootScope.productsExist) {
                        // GET PRODUCT PAGE INDIVIDUAL PRODUCT VIEWS
                        getIndexBySlug("SECTION_PRODUCT", $state.params.product, true, function(response) {
                            var productIndex = response;
                            var individualProductSection = "SECTION_PRODUCT";
                            cutToGridPageByIndex( individualProductSection, productIndex );
                            // GET CURRENT MOUSE_INDEX
                            var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
                            var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
                            var nthListItem = currentIndex + 1;

                            if (nthListItem === 1) {
                                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                                $scope.firstPage = true;
                                $scope.lastPage = false;
                            } else {
                                $("li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                                if (currentIndex == maxIndex) {
                                    $scope.lastPage = true;
                                    $scope.firstPage = false;
                                } else {
                                    $scope.lastPage = false;
                                    $scope.firstPage = false;
                                }
                            }
                        });
                    } else {
                        // GET LANDING PAGE PRODUCT VIEWS (GLOBAL SITE - NO PRODUCTS)
                        getIndexBySlug("SECTION_PRODUCT", $state.params.product, false, function(response) {
                            var productIndex = response;
                            var individualProductSection = "SECTION_PRODUCT";
                            cutToGridPageByIndex( individualProductSection, productIndex );
                            // GET CURRENT MOUSE_INDEX
                            var currentIndex = getMouseIndexBySectionName("SECTION_PRODUCT");
                            var maxIndex = getMouseMaxBySectionName("SECTION_PRODUCT");
                            var nthListItem = currentIndex + 1;

                            if (nthListItem === 1) {
                                $(".content-pagination ul li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li.gray-link").removeClass("gray-link");
                                $scope.firstPage = true;
                                $scope.lastPage = false;
                            } else {
                                $("li.blue-link").removeClass("blue-link");
                                $(".content-pagination ul li:nth-child(1)").addClass("gray-link");
                                $(".content-pagination ul li:nth-child("+ nthListItem + ")").addClass("blue-link");
                                if (currentIndex == maxIndex) {
                                    $scope.lastPage = true;
                                    $scope.firstPage = false;
                                } else {
                                    $scope.lastPage = false;
                                    $scope.firstPage = false;
                                }
                            }
                        });
                    }
                }
            } else if (!$state.params.directory){
                ga('send', 'pageview', {'Page' : 'Home'});
                cutToSection(0);
                $rootScope.CURRENT_SECTION = "SECTION_FIVE";
                document.title = '5 Gum';
            } else {
                ga('send', 'pageview', {'Page' : '404'});
                $rootScope.CURRENT_SECTION = "SECTION_404";
            }
        });

        // PAGINATION BOOLEAN VALUES FOR NG-HIDE
        $scope.introPage = true;
        $scope.contentPage = false;
        $scope.productPage = false;
        $scope.firstPage = true;
        $scope.lastPage = false;

        // APPLY URL AND ASSETS BASED ON MAIN (GALLERY GRID) OR FIVE (FIVE INTRO) USING THE 'CURRENT_SECTION' VARIABLE
        $scope.$watch('CURRENT_SECTION', function() {
            if ($rootScope.CURRENT_SECTION === 'SECTION_FIVE') {
                // ADDED CHECK TO SEE IF ID IS PRESENT (MODAL VIEW) TO CORRECT URL BEHAVIOUR WHEN GOING TO THE 'EXPANDED' STATE
                if(!$state.params.id) {
                    // PAGINATION BOOLEAN VALUES FOR NG-HIDE
                    $scope.introPage = true;
                    $scope.contentPage = false;
                    $scope.productPage = false;
                }
            } else if ($rootScope.CURRENT_SECTION === 'SECTION_MAIN') {
                // ADDED CHECK TO SEE IF ID IS PRESENT (MODAL VIEW) TO CORRECT URL BEHAVIOUR WHEN GOING TO THE 'EXPANDED' STATE
                if(!$state.params.id) {
                    // PAGINATION BOOLEAN VALUES FOR NG-HIDE
                    $scope.introPage = false;
                    $scope.contentPage = true;
                    $scope.productPage = false;
                }
            } else if ($rootScope.CURRENT_SECTION === 'SECTION_PRODUCT') {
                // ADDED CHECK TO SEE IF ID IS PRESENT (MODAL VIEW) TO CORRECT URL BEHAVIOUR WHEN GOING TO THE 'EXPANDED' STATE
                // CHECK IF THERE IS MORE THAN ONE PRODUCT IN LANDING PAGE OR PRODUCT PAGE - IF SO, SHOW ARROWS AND PAGE-PILLS
                if(!$state.params.id) {
                    if ($rootScope.product[1]) {
                        $scope.introPage = false;
                        $scope.contentPage = false;
                        $scope.productPage = true;
                    } else if ($rootScope.landing[1]) {
                        $scope.introPage = false;
                        $scope.contentPage = false;
                        $scope.productPage = true;
                    } else {
                        $scope.introPage = false;
                        $scope.contentPage = false;
                        $scope.productPage = false;
                    }
                }
            }
        });

        // GET NAVIGATION CONTAINER HEIGHT AND SET MARGIN-TOP TO CENTER NAVIGATION ON THE SCREEN
        $scope.navHeight = $('.navigation-container').height();
        $scope.navHeightCopy = $scope.navHeight;
        $scope.halfNavHeight = ($scope.navHeight / 2) + 40;
        $scope.navMarginTop = "-" + $scope.halfNavHeight + "px";
        $scope.navStyle = {'margin-top': $scope.navMarginTop};

        console.log($scope.navHeight);

        $scope.$watch('CURRENT_SECTION', function() {
            // GET NAVIGATION CONTAINER HEIGHT AND SET MARGIN-TOP TO CENTER NAVIGATION ON THE SCREEN
            $scope.navHeight = $('.navigation-container').height();
            console.log($scope.navHeightCopy);
            if ($scope.navHeight === 0) {
                $scope.navHeight = $scope.navHeightCopy;
                $scope.halfNavHeight = ($scope.navHeight / 2) + 40;
                $scope.navMarginTop = "-" + $scope.halfNavHeight + "px";
                $scope.navStyle = {'margin-top': $scope.navMarginTop};
                console.log($scope.navHeight);
            } else {
                $scope.navHeight = $('.navigation-container').height();
                $scope.halfNavHeight = ($scope.navHeight / 2) + 40;
                $scope.navMarginTop = "-" + $scope.halfNavHeight + "px";
                $scope.navStyle = {'margin-top': $scope.navMarginTop};
                console.log($scope.navHeight);
            }
        });
    }]);
    /*
    $(window).resize(function() {
      if ($(window).width() < 600) {
        $("#main canvas").width( width * window.devicePixelRatio );
        $("#main canvas").height( height * window.devicePixelRatio );
        $("#main canvas")[0].style.width = width + 'px';
        $("#main canvas")[0].style.height = height + 'px';

        //Resize the PIXI renderer
        FivePixi.renderer.resize(  $("#main ,  200 );
      }
    });
    */