/*
	Logic Solution
	WeeeCarbonFootprint
	ui.slider
*/

angular.module('ui.slider', []);

angular.module('ui.slider')
	.controller('sliderCtrl', ['$scope', '$window', function($scope, $window) {
		$scope.slider_content_list = 
				[];
		
	}])
	.directive('slider', [function() {
		return {
			restrict: 'E',
			replace: true,
			scope: {
				height: '@',
			},
			controller: function($scope, $window) {
				$scope.slide_count = 0; // 向左滑動次數
				$scope.slider_content_list = $scope.$parent.slider_content_list;
				var slide_length = $scope.slider_content_list.length;
				var slider_body = $window.document.getElementsByClassName('slider_body')[0];
				$scope.slider_body_wrap_width = document.getElementsByClassName('slider_wrap')[0].clientWidth;
				$scope.wrap_width = $scope.slider_body_wrap_width - $scope.height * 2;
				var wrap_width = $scope.wrap_width;
				$scope.show = 0;
				while (wrap_width > 216) {
				    wrap_width -= 216;
				    $scope.show++;
				}

				if ($scope.show < $scope.slider_content_list.length) {
				    $scope.center = false;
				} else {
				    $scope.center = true;
				}

				$scope.sliderInit = function () {
				    $scope.slider_left_arrow = '../Browser_Local/img/slider_left_arrow.png';
				    $scope.slider_right_arrow = '../Browser_Local/img/slider_right_arrow.png';
				}
				
				$scope.slide = function (n) {
					var wrap_width = $scope.height * 2 + 16;
					if((n - $scope.slide_count) == -1) {
						if($scope.slide_count > ($scope.show - slide_length)) {
							$scope.slide_count--;
						}
					} else if((n - $scope.slide_count) == 1) {
						if($scope.slide_count < 0) {
							$scope.slide_count++;
						}
					}
					slider_body.style.setProperty('left', (wrap_width * $scope.slide_count) + 'px');
				}
			},
			template: 
				'<div class=\"slider_wrap\" ng-style=\"{height: height + \'px\'}\" ng-init=\"sliderInit()\">' +
					'<div class=\"slider_left_arrow\" ng-click=\"slide(slide_count - 1)\"}\" ng-style=\"{width: height + \'px\'}\"' +
                        'ng-mouseenter=\"slider_left_arrow = \'../Browser_Local/img/slider_left_arrow_active.png\'\"' +
                        'ng-mouseleave=\"slider_left_arrow = \'../Browser_Local/img/slider_left_arrow.png\'\">' +
						'<img ng-src=\"{{slider_left_arrow}}\"></img>' +
					'</div>' +
					'<div class=\"slider_body_wrap\" ng-style=\"{width: wrap_width + \'px\'}\">' +
						'<div class=\"slider_body\" ng-style=\"{width: (slider_content_list.length * (height * 2 + 16)) + \'px\', margin: center? \'0 auto\': 0, left: center? \'auto\': \'0px\' }\">' +
							'<div ng-repeat=\"content in slider_content_list\" class=\"slider_content\"' +
                            'ng-style=\"{width: height * 2 + \'px\'}\">' +
								'<img ng-src=\"{{content}}\"></img>' +
							'</div>' +
						'</div>' +
					'</div>' +
					'<div class=\"slider_right_arrow\" ng-click=\"slide(slide_count + 1)\" ng-style=\"{width: height + \'px\'}\"' +
                        'ng-mouseenter=\"slider_right_arrow = \'../Browser_Local/img/slider_right_arrow_active.png\'\"' +
                        'ng-mouseleave=\"slider_right_arrow = \'../Browser_Local/img/slider_right_arrow.png\'\">' +
						'<img ng-src=\"{{slider_right_arrow}}"></img>' +
					'</div>' +
				'</div>'
		}
	}])

function sliderBodyWrap() {
    var domElt = document.getElementsByClassName('slider_body_wrap')[0];
    scope = angular.element(domElt).scope();
    scope.$apply(function () {
        scope.slider_body_wrap_width = window.innerWidth - 40 - parseFloat(scope.height) * 2;
    });
}

window.onresize = sliderBodyWrap;