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() {
			// console.log('after render');
		});
		canvas.on({
			'object:added'      : onIllustrationAdded,
			'object:moving'     : onIllustrationMoving,
			'object:scaling'    : onIllustrationChange,
			'object:rotating'   : onIllustrationChange,
			'object:selected'   : onObjectSelected,
			'object:modified'   : onIllustrationModifield,
			'selection:cleared' : onObjectOut,
		});
		
		var currentObj;
		var listObj = [];
		var stateObj = [];
		var indexCurr = 0;
		var indexCurr2 = 0;
		var actionObj = false;
		var refreshObj = true;
		var spacingNum = 0;
		
		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 pointer = canvas.getPointer(options.e);
			if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
				canvas.getActiveObject().remove();
				$('.design-content .trash-design').css({'opacity':'1'});
				return;
			}
			
			//
			var objOffset = canvas.getActiveObject().getBoundingRect();
			var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
			//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 onIllustrationMoving(options) {
			var pointer = canvas.getPointer(options.e);
			if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
				$('.design-content .trash-design').css({'opacity':'0.5'});
			}else{
				$('.design-content .trash-design').css({'opacity':'1'});
			}
		}

		function onObjectOut() {
			delete currentObj;
			$scope.designTextValue = '';
		}

		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.canvasClearAll = function(){
			if (confirm('配置されたすべての文字や画像を消去します')){
				canvas.clear();
			}
		}

		function onObjectSelected(options) {
			var currentObj = options.target;
			// console.log(currentObj.text);
			$scope.typeObject = currentObj.type;
			switch ($scope.typeObject) {
				case 'i-text' :
					$rootScope.isShowLeftPanel = 'text';
					var text = currentObj.text;
					if(text != '') {
						$scope.designText = text;
						$scope.designTextValue = text;
					}
					break;

				case 'path-group' :
					$rootScope.isShowLeftPanel = 'illustration';
					break;
					
				case 'image':
					$rootScope.isShowLeftPanel = 'image';
					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.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.changeColorPattern = function(color){
			var obj = canvas.getActiveObject();
			if (!color){
				color = 'none';
			}
			if (obj instanceof fabric.PathGroup) {
			  obj.getObjects().forEach(function(o) {
			  	o.fill = color;
			  });
			}
			else {
			  obj.fill = color;
			}
			canvas.renderAll();
			// if (canvas.getActiveObject()){
			// 	canvas.getActiveObject().set("fill", color);
				// canvas.renderAll();
			// }
		};
		
		//Font
		$scope.listFontFamily = [
			{
				name : 'GN Aki iro Sesami Cookies',
				slug : 'gn_aki_iro_sesami_cookies',
			},
			{
				name : 'GN-Fuyu-iro_Script_Bold',
				slug : 'gn_fuyu_iro_script_bold'
			},
			{
				name : 'GN Killgothic U Kanana',
				slug : 'gn_killgothic_u_kanana'
			},
			{
				name : 'GN-Kin-iro_Alphabet_Cookies',
				slug : 'gn_kin_iro_alphabet_cookies'

			},
			{
				name : 'GN-Kin-iro_SansSerif',
				slug : 'gn_kin_iro_sansserif'

			},
			{
				name : 'GN-Koharuiro_Sunray',
				slug : 'gn_koharuiro_sunray'

			},
			{
				name : 'GN-Kyu-pin',
				slug : 'gn_kyu_pin'
			},
			{
				name : 'gn_natsu_iro_schedule',
				slug : 'gn_natsu_iro_schedule'

			},
			{
				name : 'gnkana_kiniro_sansserif_l',
				slug : 'gnkana_kiniro_sansserif_l'

			},
			{
				name : 'gnkana_kiniro_sansserif_st',
				slug : 'gnkana_kiniro_sansserif_st'
			},
			{
				name : 'gnkana_kon_iro_nightfall',
				slug : 'gnkana_kon_iro_nightfall'

			},
			{
				name : 'ms_gothic',
				slug : 'ms_gothic'

			},
			{
				name : 'msmincho',
				slug : 'msmincho'
			},
			{
				name : 'ufonts_com_ms_pgothic',
				slug : 'ufonts_com_ms_pgothic'
			}
		];
		
		// layer process
		$scope.layerProcess = function(mode) {
			// console.log('layerProcess');
			var activeObject = canvas.getActiveObject();

			console.log(activeObject);

			if (activeObject){
				switch (mode) {
					case 1:
						// canvas.bringForward(activeObject);
						activeObject.bringForward();
						break;
					case 2:
						// canvas.sendBackwards(activeObject);
						activeObject.sendBackwards();
						break;
					case 3:
						// canvas.bringToFront(activeObject);
						activeObject.bringToFront();
						break;
					case 4:
						// canvas.sendToBack(activeObject);
						activeObject.sendToBack();
						break;
				}
				canvas.deactivateAll().renderAll();
			}
		};

		$scope.focusInputText = function(text) {
			currentObj = canvas.getActiveObject();
			if(typeof currentObj == 'undefined' || currentObj == null) {
				$scope.iText = new fabric.IText('', {
					left: 150,
					top: 200,
					fontFamily: 'Arial',
					fontWeight: 'normal',
					textAlign:  'center',
					fontSize: 28,
					fill: 'black'
				});
			} else {
				if(currentObj.type != 'i-text') {
					$scope.iText = new fabric.IText('', {
						left: 150,
						top: 200,
						fontFamily: 'Arial',
						fontWeight: 'normal',
						textAlign:  'center',
						fontSize: 28,
						fill: 'black'
					});
				} else{
					$scope.iText = currentObj;
				}
			}
		};

		//Design text
		$scope.inputText = function(e) {
			if(typeof $scope.iText != "undefined") {
				var iText = $scope.iText;
				iText.text = e;
				canvas.add(iText);
				canvas.renderAll();
				canvas.setActiveObject(iText);
			}
		};
		$scope.setFontFamily = function(font) {
			if(canvas.getActiveObject()) {
				var currentObj = canvas.getActiveObject();
				if(currentObj.type == 'i-text') {
					currentObj.set('fontFamily', font);
					canvas.renderAll();
					canvas.setActiveObject(currentObj);
				}

			}
		};
		//Set letter spacing text
		$scope.setLetterSpacingText = function(e) {
			if(canvas.getActiveObject()) {
				var currentObj = canvas.getActiveObject();
				if(currentObj.type == 'i-text') {
					if(e == 'plus')
						spacingNum = spacingNum + 30;
					else if (spacingNum >= 30){
						spacingNum = spacingNum - 30;
					}
					currentObj.set('charSpacing', spacingNum);
					canvas.renderAll();
					canvas.setActiveObject(currentObj);
				}
			}
		}
		
		
		/**** process insert image */
		$scope.chooseImage = function(e){console.log(e);
			if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
				alert('アップロードできませんでした');
				return;
			}
			var reader = new FileReader();
		    reader.onload = function (event) {
		        var imgObj = new Image();//console.log(event.target);
		        imgObj.src = event.target.result;
		        imgObj.onload = function () {
		            // start fabricJS stuff
		            
		            var image = new fabric.Image(imgObj);
		            image.set({
		                left: 50,
		                top: 50
		            });
		            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
		            image.scaleToWidth(200);
		            canvas.add(image);
		        }
		    }
    		reader.readAsDataURL(e.target.files[0]);
		}
	
		//Traslation text
		$scope.rotateText =  function(style) {
			if(canvas.getActiveObject()) {
				var currentObj = canvas.getActiveObject();
				if(currentObj.type == 'i-text') {
					currentObj.set('rotate', Math.PI / 4);
					canvas.renderAll();
					canvas.setActiveObject(currentObj);
				}
			}
		};
		
		
		/* Process output */
		$scope.outputDesign = function(){
			$rootScope.outputImage = canvas.toDataURL('png');
			// console.log();
			$('#tshirt-design').modal('hide');
		}
	});
});