angular.module('homepage').
directive('financePanel', function () {
	return {
		controller: 'financePanelController',
		restrict: 'E',
		replace: true,
		scope: {
			finance: '='
		},
		templateUrl: 'components/feature-components/finance/finance-panel.html'
	};
}).
controller('financePanelController', function ($scope) {
	function setItem() {
		return {
			title: '',
			amount: '',
			paidby: {
				text: '',
				taglist: [{text: 'Myself'}]
			},
			splitbtw: {
				text: '',
				taglist: [{text: 'Myself'}]
			}
		};
	}

	$scope.finance._.isVisible = {};
	$scope.finance.list = [];
	$scope.finance.list[0] = setItem();

	/**
	 * Remove the item from zeroth index and add it to list end and empty zeroth index
	 */
	$scope.addNewItem = function () {
		var length = $scope.finance.list.length;
		$scope.finance.list[length] = $scope.finance.list[0];
		$scope.finance.list[0] = setItem();
		// Reset view
		$scope.finance._.isVisible = {};
		// Remove class 'chosen'
		var elements = document.querySelectorAll('.input-box-wrapper .finance-panel .chosen');
		for(var i=0;i<elements.length;i++) {
			elements[i].classList.remove('chosen');
		}
	};
});