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': onllustrationSelected,

  			'object:modified': onllustrationModifield

  		});

  		
  		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 onllustrationModifield(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 onllustrationSelected(options){

  			//console.log(canvas.getActiveObject());
  		}
  		
  		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();

  		}
  
  		// 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'

  		];

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

  	});
  });