'use strict';

angular.module('ironridge')
    .controller('ArrayCtrl', function($scope, $rootScope, $timeout, $document) {

        /***************start init*********************/

        //panels may contain many panel
        var panels = $rootScope.panels = [];
        var panelsMetadata = $rootScope.panelsMetadata = [];
        var panel = [];
        var rect = {
            width: 16,
            height: 24
        };
        $scope.hover = {
            row: 0,
            col: 0
        };
        $scope.rect = rect;
        $scope.active = false;
        $scope.scroll = 0;
        var prevPanelData = {};
        $scope.iconPos = {};
        window.panelZindex = 0;

        /***************end init*********************/

        /*****utility functions*****/
        $scope.range = function(n) {
            return new Array(n);
        };
        $scope.hovered = function(i, j) {
            $scope.hover.row = i + 1;
            $scope.hover.col = j + 1;
        };

        /*****drawing panel from number of rows and columns*****/
        $scope.draw = function(row, col) {

            if (row < 1 || col < 1) {
                //return for empty row & col
                return;
            }



            var pos = panels.length;
            var metadata = {};
            $scope.rect = {
                width: rect.width,
                height: rect.height
            };
            metadata = {
                row: row,
                col: col,
                width: (row + 1) * (rect.width + 2),
                height: (col + 1) * (rect.height + 2)
            };

            /***** GET THE POSITION AND WIDTH OF PREVIOUS PANEL *****/

            if (panels.length) {
                //previous panel
                var prevPanel = document.querySelector('#panel' + (panels.length - 1));
                //panels view width
                var parentPanelWidth = document.querySelector('#panels').getBoundingClientRect().width;
                prevPanelData = {
                    top: Number(prevPanel.style.top.replace(/[^\d.-]/g, '')),
                    left: Number(prevPanel.style.left.replace(/[^\d.-]/g, '')),
                    width: prevPanel.getBoundingClientRect().width / window.zoom
                };
                //if the panel will be outside the panels view than replace it to the begin of new line
                if (prevPanelData.left + prevPanelData.width + metadata.width > parentPanelWidth) {
                    prevPanelData = {
                        left: 0,
                        top: 200 * panels.length / 4, //top position increment in each 4 panels
                        width: 0
                    };
                }

            } else {
                prevPanelData = {
                    left: 0,
                    top: 0,
                    width: 0
                };
            }

            /*****start panel painting *****/
            panel = [];
            $scope.show = false;
            for (var i = 0; i <= row; i += 1) {
                for (var j = 0; j <= col; j += 1) {
                    panel.push({
                        x: i * (rect.width + 2) + 1,
                        y: j * (rect.height + 2) + 1,
                        active: true,
                        color: '#4A90E2'
                    });
                }
            }
            /*****end panel painting *****/

            // $scope.panel = panel;
            panelsMetadata[pos] = metadata;
            panels[pos] = panel;


            /***** panel placing *****/
            // if (panels.length > 1) {
            $timeout(function() {
                var thisPanel = document.querySelector('#panel' + (panels.length - 1));
                thisPanel.style.left = (prevPanelData.left + prevPanelData.width + 10) + 'px';
                thisPanel.style.top = prevPanelData.top + 'px';
            }, 30);
            //}

        };

        /*****rotate clicked panel*****/
        $scope.rotate = function(i) {
            console.log('rotate fired');
            var target = document.querySelector('#panel' + i);
            target.classList.toggle('rotate');
        };

        /*****delete clicked panel*****/
        $scope.remove = function(i) {
            var target = document.querySelector('#panel' + i);
            target.classList.add('leave');
            //console.log('remove fired');
            panels.splice(i, 1);
            panelsMetadata.splice(i, 1);
        };
        /*****active or deactive the cells in the panel*****/
        $scope.toggle = function(panelId, i, event) {

            //console.log('toggle fired');
            if (window.moving) {
                return;
            }
            $scope.panels[panelId][i].active = !$scope.panels[panelId][i].active;
            if ($scope.panels[panelId][i].active) {
                $scope.panels[panelId][i].color = '#4A90E2';
            } else {
                $scope.panels[panelId][i].color = 'white';
            }
            event.stopPropagation();
            // console.log($scope.panel);
        };

        /*****activate the clicked panel*****/
        $scope.activate = function(index, event) {
            if (window.moving) {
                return;
            }
            var i = 0,
                length = $scope.panelsMetadata.length;
            for (; i < length; i += 1) {
                $scope.panelsMetadata[i].active = false;
            }
            $scope.panelsMetadata[index].active = true;
            event.stopPropagation();
        };

        /*****deactivate all the panels*****/
        $scope.deactivate = function() {
            if (window.moving) {
                return;
            }
            var i = 0,
                length = $scope.panelsMetadata.length;
            for (; i < length; i += 1) {
                $scope.panelsMetadata[i].active = false;
            }
        };

        /***** watcher*****/
        // Window.on('scroll', $scope.$apply.bind($scope, $scope.iconPosition));

        //deativate all panels when clicking outside
        $document.on('click', $scope.$apply.bind($scope, $scope.deactivate));

        // $document.on('mousemove', $scope.$apply.bind($scope, $scope.iconPosition));

        /*****zoom in and out controle*****/
        var target = document.querySelector('#panels'),
            zoom = {
                step: 0.5,
                max: 4,
                min: 0.5,
                now: 1
            };
        window.zoom = zoom.now;

        $scope.zoomin = function() {
            // console.log('zoomin fired');
            if (target && zoom.now < zoom.max) {
                zoom.now += zoom.step;
                // console.log('zoom.now', zoom.now);

                var cssValue = 'scale(' + zoom.now + ')';
                target.style.transform = cssValue;
                target.style.webkitTransform = cssValue;
                target.style.mozTransform = cssValue;
                target.style.msTransform = cssValue;
                target.style.msTransform = cssValue;
                target.style.oTransform = cssValue;

                window.zoom = zoom.now;
            }
        };
        $scope.zoomout = function() {
            // console.log('zoomout fired');
            if (target && zoom.now > zoom.min) {
                zoom.now -= zoom.step;
                // console.log('zoom.now', zoom.now);

                var cssValue = 'scale(' + zoom.now + ')';
                target.style.transform = cssValue;
                target.style.webkitTransform = cssValue;
                target.style.mozTransform = cssValue;
                target.style.msTransform = cssValue;
                target.style.oTransform = cssValue;

                window.zoom = zoom.now;
            }
        };

    })
    .directive('draggable', ['$document', function($document) {
        return function(scope, element) {

            var startX = 0,
                startY = 0,
                x = element.position().left,
                y = element.position().top;

            // element.css({
            //     cursor: 'pointer'
            // });

            element.on('mousedown', function(event) {

                x = element.position().left;
                y = element.position().top;

                window.moving = false;
                event.preventDefault();
                startX = event.pageX - x;
                startY = event.pageY - y;

                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
                window.panelZindex += 1;
                element.css({
                    zIndex: window.panelZindex
                });
            });

            function mousemove(event) {
                // console.log('drag mousemove fired');
                window.moving = true;
                event.preventDefault();

                y = (event.pageY - startY) / window.zoom;
                x = (event.pageX - startX) / window.zoom;

                element.css({
                    top: y + 'px',
                    left: x + 'px'
                });
            }

            function mouseup() {
                $document.off('mousemove', mousemove);
                $document.off('mouseup', mouseup);
            }
        };
    }]);