// controller('NTGProductSelectorBuilder', ['$scope', function($scope){
    
//     $scope.$on('LOAD', function($scope){ $scope.loading=true;});
//     $scope.$on('UNLOAD', function($scope){$scope.loading=false});

// }]);

//window.addEventListener('load', function() {


NTGProductSelector = angular.module('neutrogenaProductSelector', ['ngAnimate', 'ui.router']);

/**
 * FACTORY
 * Returns the line and skin ids to be used in the final screen
 * @return { } .linea and .piel
 */
NTGProductSelector.factory('lineSkinFactory', function() {
    return {
        linea: 0,
        piel: 0
    };
});

/**
 * FACTORY
 * Returns the product lines which will be displayed to users
 * @return {[type]} [description]
 */
NTGProductSelector.factory('linesFactory', function() {
    var lines = [{
        id: 0,
        name: 'Quiero la rutina completa',
        color: 'gray'
    }, {
        id: 1,
        name: 'Desmaquillantes',
        color: 'turquoise'
    }, {
        id: 2,
        name: 'Limpieza',
        color: 'orange'
    }, {
        id: 3,
        name: 'Hidratación',
        color: 'blue'
    }, {
        id: 4,
        name: 'Protección solar',
        color: 'yellow'
    },
    // {
    //     id: 5,
    //     name: 'Antiedad',
    //     color: 'violet'
    // }
];

    return lines;
});

/**
 * FACTORY
 * Returns the skin types which will be displayed to users
 * @return {[type]}                  [description]
 */
NTGProductSelector.factory('skinFactory', function() {
    var skin = [{
        id: 1,
        name: 'Mixta a grasa',
        color: 'orange',
        classes: ''
    }, {
        id: 2,
        name: 'Normal a seca',
        color: 'blue',
        classes: 'offset_1'
    }, {
        id: 3,
        name: 'Grasa con tendencia a barritos y/o espinillas',
        color: 'pink',
        classes: ''
    }];

    return skin;
});

/**
 * Load all products
 * @return {[type]} [description]
 */
NTGProductSelector.factory('products', ['$http', function($http) {

    //Question Answers
    var __allProducts = function() {
        return $http.get('/sites/default/files/content-images/marca_neutrogena/ntg-apps/product-selector/products-2020-c.json').then(function(response) {

            return response.data;
        });
    }

    return {
        getProducts: __allProducts
    }


}]);


/**
 * SKIN TEST
 */
NTGProductSelector.factory('answersFactory', ['$filter', '$http', function($filter, $http) {

    //Question Colors
    var __questions = [{
        question: 1,
        color: 'violet',
        text: '¿En qué parte de tu rostro la piel se ve brillante?',
        result: 0
    }, {
        question: 2,
        color: 'orange',
        text: '¿Con qué frecuencia en el día tu rostro se ve brillante?',
        result: 0
    }, {
        question: 3,
        color: 'blue',
        text: '¿Con qué frecuencia te salen granitos y espinillas?',
        result: 0
    }, {
        question: 4,
        color: 'violet',
        text: '¿Cómo se siente tu piel al tacto?',
        result: 0
    }, {
        question: 5,
        color: 'orange',
        text: '¿Cómo son los poros de tu rostro?',
        result: 0
    }];

    //Get Question
    var __getQuestion = function(questionId) {
        var filter = $filter('filter')(__questions, {
            question: questionId
        });

        return filter[0].text;
    }

    //Get Color
    var __getColor = function(questionId) {
        var filter = $filter('filter')(__questions, {
            question: questionId
        });

        return filter[0].color;
    }

    //Question Answers
    var __allAnswers = function() {
        return $http.get('/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/answers.json').then(function(response) {
            return response.data;
        });
    }

    //Set Answer Result in Array
    var __setResult = function(questionId, value) {
        // Get the real id in the array
        questionId -= 1;
        // Set the result
        __questions[questionId].result = value;
    }

    //Get final Results
    var __getResult = function() {

        // Get cantidad de preguntas con respuestas A
        var cantidadA = $filter('filter')(__questions, {
            result: 1
        }).length;
        // Get cantidad de preguntas con respuestas B y C
        var cantidadB = $filter('filter')(__questions, {
            result: 2
        }).length;
         var cantidadC = $filter('filter')(__questions, {
            result: 3
        }).length;

        var userSkinType;

        switch (Math.max(cantidadA, cantidadB, cantidadC)) {
            case cantidadA:
                userSkinType = 0;
                break;
            case cantidadB:
                userSkinType = 1
                break;
                case cantidadC:
                userSkinType = 2;
                break;
        }

        // Return user skin type
        return userSkinType;
    }

    return {
        getQuestion: __getQuestion,
        getAnswers: __allAnswers,
        getColor: __getColor,
        setResult: __setResult,
        getResult: __getResult
    };
}]);

/**
 * CONFIG
 * Configure the app states
 */
NTGProductSelector.config(['$stateProvider', function($stateProvider) {
    $stateProvider

    // STEP ONE =================================
        .state('step-one', {
        templateUrl: '/sites/default/files/content-images/marca_neutrogena/ntg-apps/product-selector/views/step-one-1.html',
        controller: 'stepOneController'
    })

    // STEP TWO =================================
    .state('step-two', {
        templateUrl: '/sites/default/files/content-images/marca_neutrogena/ntg-apps/product-selector/views/step-two.html',
        controller: 'stepTwoController'
    })

    // PRODUCTS =================================
    .state('products', {
        templateUrl: '/sites/default/files/content-images/marca_neutrogena/ntg-apps/product-selector/views/products.html',
        controller: 'productsController'
    })

    // Access to product details
    .state('products-detail', {
        params: {
            tipoDePiel: {}
        },
        templateUrl: '/sites/default/files/content-images/marca_neutrogena/ntg-apps/product-selector/views/products.html',
        controller: 'productsController'
    })

    /** SKIN TEST */
    .state('questions', {
        params: {
            questionId: {}
        },
        templateUrl: '/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/views/questions.html',
        controller: 'QuestionController'
    })

    .state('results_loading', {
        templateUrl: '/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/views/cargando.html',
        controller: 'loadingController'
    })

    .state('results_cover', {
        templateUrl: '/sites/default/files/content-images/marca_neutrogena/ntg-apps/skin-test/views/results.html',
        controller: 'resultController'
    })

}]);

NTGProductSelector.controller('NTGProductSelectorController', ['$scope', '$state', function($scope, $state) {
    $state.go('step-one');

    //Set Background Color
    $scope.backgroundColor = '';

    //Get the background color changer
    $scope.$on('background.color.change', function(event, color) {
        $scope.backgroundColor = 'bg-' + color;
    });

    $scope.goToDetail = function(tipoDePiel) {
        $state.go('products-detail', {
            tipoDePiel: tipoDePiel
        });
    }
}]);

/**
 * CONTROLLER
 * Controls the product line selection
 *
 * @param  {[type]} $scope          [description]
 * @param  {[type]} $filter         [description]
 * @param  {[type]} lineSkinFactory [description]
 * @param  {[type]} linesFactory)   {               $scope.optionButtons [description]
 * @return {[type]}                 [description]
 */
NTGProductSelector.controller('stepOneController', ['$scope', '$filter', '$timeout', 'lineSkinFactory', 'linesFactory', function($scope, $filter, $timeout, lineSkinFactory, linesFactory) {
    $scope.optionButtons = linesFactory;

    $scope.$on('$viewContentLoaded', function(event) {
        $timeout(function() {
            adjustBoxsize(0, 4801);
        }, 0);
    });

    $scope.setLinea = function(id, name) {
        lineSkinFactory.linea = id;
        console.log(lineSkinFactory.linea);

    	//Send result event
        productSelectorSendEvent('InteractivoNTG_PS', 'click', '1_' + name);
    }
   
}]);

/**
 * CONTROLLER
 * Controls the skin type selection
 *
 * @param  {[type]} $scope          [description]
 * @param  {[type]} lineSkinFactory [description]
 * @param  {[type]} skinFactory)    {               $scope.optionButtons [description]
 * @return {[type]}                 [description]
 */
NTGProductSelector.controller('stepTwoController', ['$scope', '$timeout', '$state', 'lineSkinFactory', 'skinFactory', function($scope, $timeout, $state, lineSkinFactory, skinFactory) {
    $scope.optionButtons = skinFactory;

    $scope.$on('$viewContentLoaded', function(event) {
        $timeout(function() {
            adjustBoxsize(0, 4801);
        }, 0);
    });

    $scope.setPiel = function(id, name) {
        lineSkinFactory.piel = id;
        console.log(lineSkinFactory.piel);

    	//Send result event
        productSelectorSendEvent('InteractivoNTG_PS', 'click', '2_' + name);
    }

    $scope.openSkinTest = function() {

    	//Send result event
        productSelectorSendEvent('InteractivoNTG_PS', 'click', '2_SkinTest');

        // Run Product Selector
        $state.go('questions', {
            questionId: 1
        });
    }
}]);


//QUESTION CONTROLLER
NTGProductSelector.controller('QuestionController', ['$scope', '$stateParams', '$filter', '$state', 'answersFactory', function($scope, $stateParams, $filter, $state, answersFactory) {

    //If questionId is an object not a number
    if ($stateParams.questionId instanceof Object) {
        $stateParams.questionId = 1;
    }

    //Get Current question
    $scope.currentQuestion = $stateParams.questionId;

    //Get the question
    $scope.questionText = answersFactory.getQuestion($scope.currentQuestion);

    // Emit an event telling the app that the background must change
    $scope.$emit('background.color.change', answersFactory.getColor($scope.currentQuestion));

    //Get Answers
    answersFactory.getAnswers().then(function(response) {
        $scope.answers = $filter('filter')(response, {
            question: $scope.currentQuestion
        });
    });

    //Set Result
    $scope.setResult = function(answer) {
        answersFactory.setResult($scope.currentQuestion, answer);

        //Send event
        productSelectorSendEvent('InteractivoNTG_PS', 'click', '3_ST_' + $scope.currentQuestion + '_' + answer);

        //Next screen
        nextScreen($scope.currentQuestion);
    }

    // Go to next screen
    var nextScreen = function(currentQuestion) {
        //Convert current state to int
        currentQuestion = parseInt(currentQuestion);

        //If is not the last question
        if (currentQuestion < 5) {
            //Go to next question                        
            $state.go('questions', {
                questionId: currentQuestion + 1
            });
        }

        //If is the last question
        if (currentQuestion == 5) {
            $state.go('results_loading');
        }
    }

    $scope.back = function() {
        //Go to previous question                        
        $state.go('questions', {
            questionId: $scope.currentQuestion - 1
        });
    }

}]);


// CONTROLADOR Cargando
NTGProductSelector.controller('loadingController', ['$scope', '$timeout', '$state', function($scope, $timeout, $state) {

    //emit an event telling the app that the background must change
    $scope.$emit('background.color.change', 'white');

    $timeout(function() {
        $state.go('results_cover');
    }, 1200);
}]);

// CONTROLADOR RESPUESTAS
NTGProductSelector.controller('resultController', ['$scope', '$filter', '$timeout', '$state', 'answersFactory', 'lineSkinFactory', function($scope, $filter, $timeout, $state, answersFactory, lineSkinFactory) {

    $scope.response = '';

    switch (answersFactory.getResult()) {
        case 0:
            //Set skinType
            lineSkinFactory.piel = 2;
            //emit an event telling the app that the background must change
            $scope.$emit('background.color.change', 'blue');
            $scope.response = 'normal a seca';
            break;
        case 1:
            //Set skinType
            lineSkinFactory.piel = 1;
            //emit an event telling the app that the background must change
            $scope.$emit('background.color.change', 'orange');
            $scope.response = 'mixta a grasa';
            break;

              case 2:
            //Set skinType
            lineSkinFactory.piel = 3;
            //emit an event telling the app that the background must change
            $scope.$emit('background.color.change', 'pink');
            $scope.response = 'grasa con tendencia a barritos y/o espinillas';
            break;
    }

    $timeout(function() {

    	//Send result event
        productSelectorSendEvent('InteractivoNTG_PS', 'resultado', '3_ST_' + $scope.response);

        $state.go('products');
    }, 1500);
}]);

/**
 * FILTER
 * [description]
 * @param  {[type]} ) {               return function(input, id) {        var i [description]
 * @return {[type]}   [description]
 */
NTGProductSelector.filter('getById', function() {
    return function(input, id) {
        var i = 0,
            len = input.length;
        for (; i < len; i++) {
            if (+input[i].id == +id) {
                return input[i];
            }
        }
        return null;
    }
});

/**
 * CONTROLLER
 * Controls the products that will be showed to the users by the user selection
 *
 * @param  {[type]} $scope          [description]
 * @param  {[type]} $filter         [description]
 * @param  {[type]} $stateParams    [description]
 * @param  {[type]} lineSkinFactory [description]
 * @param  {[type]} linesFactory    [description]
 * @param  {[type]} skinFactory)    {               var productList [description]
 * @return {[type]}                 [description]
 */
NTGProductSelector.controller('productsController', ['$scope', '$filter', '$timeout', '$stateParams', 'lineSkinFactory', 'linesFactory', 'skinFactory', 'products', function($scope, $filter, $timeout, $stateParams, lineSkinFactory, linesFactory, skinFactory, products) {

    //emit an event telling the app that the background must change
    $scope.$emit('background.color.change', 'white');

    if (lineSkinFactory.linea == 0) {
        lineSkinFactory.linea = '';
    }

    if (lineSkinFactory.piel == 0) {
        lineSkinFactory.piel = $stateParams.tipoDePiel;

        switch ($stateParams.tipoDePiel) {
            case 'mixta-a-grasa':
                lineSkinFactory.piel = 1;
                break;
            case 'normal-a-seca':
                lineSkinFactory.piel = 2;
                break;
                
        }

    }

    //Get Products
    products.getProducts().then(function(response) {
        $scope.showProducts = $filter('filter')(response, lineSkinFactory);


        $timeout(function() {
            adjustBoxsize(45, 4801);
        }, 1000);
    });

    // $scope.showProducts = $filter('filter')(products, lineSkinFactory);

    //Obtenemos los datos de la linea seleccionada
    $scope.linea = $filter('getById')(linesFactory, lineSkinFactory.linea);
    $scope.lineaDeProductos = $scope.linea.name;

    //Obtenemos los datos del tipo de piel seleccionado
    $scope.piel = $filter('getById')(skinFactory, lineSkinFactory.piel);
    $scope.tipoDePiel = $scope.piel.name;
    $scope.pielColor = $scope.piel.color;
    $scope.pielClass = 'bg-' + $scope.piel.color;

    //Titulo de productos
    if (lineSkinFactory.linea == 0) {
        $scope.titleProductos = 'Productos';
    } else {
        $scope.titleProductos = $scope.linea.name;
    }

    $scope.openBox = function(boxId) {
        openTheBox(boxId);

        var element = $('#jnj-tiles-node-' + boxId).find('#goToPorductSelector');
        element.html('Volver a productos');
    }
}]);

//}, false);

function adjustBoxsize(offset, appId) {
    var view = document.querySelector('#jnj-tiles-node-' + appId + ' .theView');
    var viewSize = view.offsetHeight;

    var box = document.querySelector('#jnj-tiles-node-' + appId);
    var boxContainer = document.querySelector('#jnj-tiles-node-' + appId + ' .box-generic-expand-body');

    box.style.height = viewSize + offset + 'px';
    boxContainer.style.height = viewSize + offset + 'px';

    isotopeReLayout();
}

function openTheBox(boxId) {
    var e = $('#jnj-tiles-node-' + boxId);

    jnj_tiles_rating(e);
    var g = e.find('.box-generic-expand').show();
    e.addClass('open');
    e.find('img').trigger("appear");
    if (typeof FB !== 'undefined') FB.XFBML.parse();
    $("div.fb-like").find("span:first").css("width", 124).css("height", 20);
    $("div.fb-like").find("span:first > iframe:first").css("width", 124).css("height", 20);
    setTimeout(function() {
        isotopeReLayout(e, function() {
            scrollToBox(e)
        })
    }, 200);
    g.unbind('click');
    g.find('a.expand-close').click(function() {
        if (g.find('iframe').length) {
            var expandHTML = g.find('.box-generic-expand-content').html();
            g.find('.box-generic-expand-content').html('');
            g.find('.box-generic-expand-content').html(expandHTML)
        };
        e.removeClass('open');
        g.hide();
        isotopeReLayout(undefined, function() {
            scrollToBox(e)
        })
    })
}

function productSelectorSendEvent(category, action, label) {
    if (typeof _gaq != 'undefined') {
        _gaq.push(['_trackEvent', category, action, label]);
    }
}