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'     : onIllustrationChange,
  			'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 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 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('Do you want to reset design frame ?')){
  				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('file size much be <= 5MB');
  				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');
  		}

  	});
  });