define(['app'], function (app) {
	//'use strict';

	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
		var canvas = new fabric.Canvas('main-design-container');
		fabric.Object.prototype.transparentCorners = false;

		canvas.on('after:render', function() {
		});
		canvas.on({
			'object:added': onIllustrationAdded,
			'object:moving': onIllustrationChange,
			'object:scaling': onIllustrationChange,
			'object:rotating': onIllustrationChange,
			'object:selected': onIllustrationSelected,
			'object:modified': onIllustrationModifield,
			'selected:deselected' : onIllustrationOut,
			//'selected:out'     : onIllustrationOut,
			//'mouse:up' : onIllustrationOut,
		});
		
		var currentObj;
		var listObj = [];
		var stateObj = [];
		var indexCurr = 0;
		var indexCurr2 = 0;
		var actionObj = false;
		var refreshObj = true;
		
		function onIllustrationAdded(options){
			var object = options.target;
		    console.log('object:added');
		
		    if (actionObj === true) {
		        stateObj = [stateObj[indexCurr2]];
		        listObj = [listObj[indexCurr2]];
		
		        actionObj = false;
		        console.log(stateObj);
		        indexCurr = 1;
		    }
		    object.saveState();
		
		    console.log(object.originalState);
		    stateObj[indexCurr] = JSON.stringify(object.originalState);
		    listObj[indexCurr] = object;
		    indexCurr++;
		    indexCurr2 = indexCurr - 1;
		    refreshObj = true;
		}
		
		function onIllustrationModifield(options){
			var objOffset = canvas.getActiveObject().getBoundingRect();
			var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
			//console.log(objOffset,canvas.height,canvas.width);
			if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
				if (confirm('削除してもよろしいですか')){
					canvas.getActiveObject().remove();
				}else{
					undoCanvas();
					return;
				}
			}
			
			var object = options.target;
		    console.log('object:modified');
		    if (actionObj === true) {
		        stateObj = [stateObj[indexCurr2]];
		        listObj = [listObj[indexCurr2]];
		
		        actionObj = false;
		        console.log(stateObj);
		        indexCurr = 1;
		    }
		
		    object.saveState();
		
		    stateObj[indexCurr] = JSON.stringify(object.originalState);
		    listObj[indexCurr] = object;
		    indexCurr++;
		    indexCurr2 = indexCurr - 1;
		    console.log(stateObj);
		    refreshObj = true;
		}
		
		function onIllustrationChange(options) {
			// options.target.setCoords();
			// canvas.forEachObject(function(obj) {
			// if (obj === options.target) return;
			// 	obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
			// });

		}

		function onIllustrationOut() {
			console.log('out object');
		}

		function undoCanvas() {
		    if (indexCurr <= 0) {
		        indexCurr = 0;
		        return;
		    }
		
		    if (refreshObj === true) {
		        indexCurr--;
		        refreshObj = false;
		    }
		
		    console.log('undo');
		
		    indexCurr2 = indexCurr - 1;
		    currentObj = listObj[indexCurr2];
		    if (currentObj){
		    	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
		    }
		
		    indexCurr--;
		    currentObj.setCoords();
		    canvas.renderAll();
		    actionObj = true;
		}
		
		function redoCanvas() {
		    actionObj = true;
		    if (indexCurr >= stateObj.length - 1) {
		        return;
		    }
		
		    console.log('redo');
		
		    indexCurr2 = indexCurr + 1;
		    currentObj = listObj[indexCurr2];
		    currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
		
		    indexCurr++;
		    currentObj.setCoords();
		    canvas.renderAll();
		}
		
		$scope.currentObject = null;
		function onIllustrationSelected(options) {
			var object = options.target;
			$scope.typeObject = object.type;
			switch ($scope.typeObject) {
				case 'i-text' :
					$('#input-design-text').focus();
					$rootScope.isShowLeftPanel = 'text';
					break;

				case 'path-group' :
					$rootScope.isShowLeftPanel = 'illustration';
					break;

				default :
					$rootScope.isShowLeftPanel = 'default';
					break;
			}
			$rootScope.safeApply();
		}

		// Illustration process
		$scope.changeIllustrationCategory = function(currentIllustration){
			$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
			//console.log($scope.currentIllustrationCate);
		};

		$scope.insertSvg = function(item){
			fabric.loadSVGFromURL(item.path, function(objects, options) {
				var shape = fabric.util.groupSVGElements(objects, options);
				// shape.setFill('green');
				canvas.add(shape.scale(0.6));
				shape.set({ left: 150, top: 200 }).setCoords();
				canvas.renderAll();
				canvas.setActiveObject(shape);
			});
		};

		// color pattern
		$scope.changeColorPattern = function(color){
			if (canvas.getActiveObject()){
				canvas.getActiveObject().set("fill", color);
    	        canvas.renderAll();
			}
		};
		$scope.listColorPatterns = [
			'#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
			'#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
			'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
			'#333333'
		];

		$scope.focusInputText = function() {
			if($scope.typeObject != 'i-text')
				$scope.iText = new fabric.IText('');
		};

		//Design text
		$scope.inputText = function(e) {
			var iText = $scope.iText;
			iText.text = e;
			canvas.add(iText);
			canvas.renderAll();
			canvas.setActiveObject(iText);
		};

		//init
		//$scope.showIllustration('default');
	});
});