(function(){

angular.module('iz.image.module', ['ngSanitize',/*'heuer.analyticsTracking'*/])
.directive('izImage',izImageDirective);

izImageDirective.$inject=["$window"];

 function izImageDirective($window){
  return {
	restrict: 'E',
	replace: true,
	scope: {lg:'@',md:'@',sm:'@',xs:'@',source:'@',size:'@',metadata:'@',alt:'@',title:'@'},
	template:function(){
	  return '<img alt="{{alt}}" ng-show="{{show}}" ng-src="{{path}}" title="{{title}}" />';
	},
	controller: izImageController,
	link: function($scope,ele,attr){
	  var _LG_MIN=1170;
	  var _MD_MIN=970;
	  var _SM_MIN=768;
	  
	  var w = angular.element($window);

	  $scope.$watch(function ($event) {
		return {'wth': window.innerWidth};
	  },resizeImgOnWindowResize, true);
	  
	  w.bind('resize', function () {
		$scope.$apply();
	  });
	  
	  function resizeImgOnWindowResize(newValue, oldValue) {
		
		_width=newValue.wth;
		if(_width >= _LG_MIN && $scope.lg){
		  if($scope.lg == 'false'){
			$scope.show=false;
		  }else{
			$scope.path=$scope._getEscalatedSrc($scope.lg);
		  }
		}else if(_width < _LG_MIN && _width >= _MD_MIN && $scope.md){
		  if($scope.md == 'false'){
			$scope.show=false;
		  }else{
			$scope.path=$scope._getEscalatedSrc($scope.md);
		  }
		}else if(_width < _MD_MIN && _width >= _SM_MIN && $scope.sm){
		  if($scope.sm =='false'){
			$scope.show=false;
		  }else{
			$scope.path=$scope._getEscalatedSrc($scope.sm);
		  }
		}else if (_width < _SM_MIN && $scope.xs ){
		  if($scope.xs == 'false'){
			$scope.show=false;
		  } else {
			$scope.path=$scope._getEscalatedSrc($scope.xs);
		  }
		} else if ($scope.size && $scope.size != 'false'){
		  $scope.path=$scope._getEscalatedSrc($scope.size);
		} else {
		// $event.preventDefault();
		$scope.path=$scope._getEscalatedSrc();
		}				
	  }
 	}	
  };

}
 
 function izImageController($scope,$window){
	  //var _width=$window.innerWidth;
	  $scope.show=true;
	  $scope.path="";

	  $scope._getEscalatedSrc=function(size){
		if(!$scope.source) {return;}
		var _escalatedUri=$scope.source;
		
		
		// Grafiken sollen nicht beschnitten werden
		if ($scope.metadata) {
		var metadata = JSON.parse($scope.metadata);
		if(metadata.type && metadata.type.label=='Grafik') {
		  if(size.match(/\d{1,4}xauto/gi) || size.match(/autox\d{1,4}/gi)) {
			// Wenn das size bereits den String auto enthält
		  	return _escalatedUri.replace(/_s:width.*(?=\.)/gi,"_s" + size);
		  } else {
			// Komponenten von size
			var dimensions = size.split('x');
			if(metadata.format == 'vertical') {
			  // Vertikales Bild wird auf die in size vorgegebene Höhe sklaiert
			  return _escalatedUri.replace(/_s:width.*(?=\.)/gi,"_s" + 'autox' + dimensions[1]);
			} else {
			  // Vertikales Bild wird auf die in size vorgegebene Breite sklaiert
			  return _escalatedUri.replace(/_s:width.*(?=\.)/gi,"_s" + dimensions[0] + 'xauto');
			}
		  }
		}
		  
		}
		
		//Case:auto
		if(size.match(/\d{1,4}xauto/gi) || size.match(/autox\d{1,4}/gi)){
		 	return _escalatedUri.replace(/_s:width.*(?=\.)/gi,"_s"+size);
		}
		if(size && !size.match(/^\d{1,4}x\w{1,4}$/gi) && size != 'false'){size="";};
		
		var strCrops="";
		if($scope.metadata)
		{
		  var _metaData=angular.fromJson($scope.metadata);
		  var _bHeight=_metaData.originalHeight;
		  if(_metaData.cropX2 && false){// TODO ??
			_bHeight=_metaData.cropX2 - _metaData.cropX1;
		  }
		  var _bWidth=_metaData.originalWidth;
		  if(_metaData.cropY2 && false){// TODO ??
			_bHeight=_metaData.cropY2 - _metaData.cropY1;
		  }
		  
		  if(size){
			var _bsize=size.split('x');
			var desiredWidth=0;
			if(_bsize[0]!='auto'){
			  var desiredWidth=parseInt(_bsize[0]);
			}
			var desiredHeight=0;
			if(_bsize[1]!='auto'){
			  desiredHeight=parseInt(_bsize[1]);
			}
		
			if(_bHeight > _bWidth && false){ //TODO
			  //vertical pic
			  if(desiredHeight/desiredWidth > 1){/*horizontal*/}
			  if(desiredHeight/desiredWidth < 1){/*vertical*/}
			}else{
			  /*horizental pic*/
			  if(desiredHeight/desiredWidth > 1){/*horizontal*/}
			  if(desiredHeight/desiredWidth < 1){/*vertical*/}
			}

			if(desiredHeight/desiredWidth < _bHeight/_bWidth)
			{ 
			  height=_bHeight-(_bWidth * desiredHeight)/desiredWidth;
			  marginTopBottom=Math.round(height/2);

			  X1=0;Y1=marginTopBottom;X2=_bWidth;Y2=_bHeight-marginTopBottom;
			  //If crops are set ??
			  if(false){
				X1=(_metadata.cropX1)? metadata.cropX1 : 0;
				Y1=(_metadata.cropY1)? marginTopBottom+metadata.cropY1 : marginTopBottom;
				X2=(_metadata.cropX2)? metadata.cropX2 : _bWidth;
				Y2=(_metadata.cropY2)? metadata.cropY2 - marginTopBottom :_bHeight-marginTopBottom;
			  }
			  strCrops='_s'+size+'_c'+X1+'x'+Y1+'_'+X2+'x'+Y2;
			}else{
			  var width=desiredWidth * _bHeight;
			  width=width / desiredHeight;
			  width=_bWidth - width;
			  marginLeftRight=Math.round(width/2);
			  X1=marginLeftRight;Y1=0;X2=_bWidth-marginLeftRight;Y2=_bHeight;
			  //If crops are set ?? 
			  if(false){
				X1=(_metadata.cropX1) ? marginLeftRight+_metadata.cropX1 : marginLeftRight;
				Y1=(_metadata.cropY1) ? _metadata.cropY1 : 0;
				X2=(_metadata.cropX2) ? _metadata.cropX2-marginLeftRight : _bWidth-marginLeftRight;
				Y2=(_metadata.cropY2) ? _metadata.cropY2 : _bHeight;
			  }
			  strCrops='_s'+size+'_c'+X1+'x'+Y1+'_'+X2+'x'+Y2;
			}
		  }
		}
		if($scope.source){
		  if(size){
			if(size.match(/\d{1,4}xauto/gi) || size.match(/autox\d{1,4}/gi) || strCrops==""){
			  return _escalatedUri.replace(/_s:width.*(?=\.)/gi,"_s"+size);
			}
			if(strCrops){
			  return _escalatedUri.replace(/_s:width.*(?=\.)/gi,strCrops);
			}
		  }
		  return _escalatedUri.replace(/_s:width.*(?=\.)/gi,"");
		}else{
		  $scope.show=false;
		}
	  };
  } 
  
}());