// modified Isotope methods for gutters in masonry
  jQuery.Isotope.prototype._getMasonryGutterColumns = function() {
    var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
        containerWidth = this.element.width();
  
    this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there's no items, use size of container
                  containerWidth;

    this.masonry.columnWidth += gutter;

    this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
    this.masonry.cols = Math.max( this.masonry.cols, 1 );
  };

  jQuery.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getMasonryGutterColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
      this.masonry.colYs.push( 0 );
    }
  };

  jQuery.Isotope.prototype._masonryResizeChanged = function() {
    var prevSegments = this.masonry.cols;
    // update cols/rows
    this._getMasonryGutterColumns();
    // return if updated cols/rows is not equal to previous
    return ( this.masonry.cols !== prevSegments );
  };

jQuery( document ).ready(function( $ ){ 

//jQuery(window).load(function($) {
	
	
	
	if ($().isotope) {
		
		var $win = $(window);
		var $imgs = $("img.lazyimage");
		var $container = $('.view-display-id-portfolio_view .view-content');
		var $controlsContainer = $('.view-portfolio-filter');
		
		var filters = {};
		var isotopeOptions = {};
          // defaults, used if not explicitly set in hash
        var defaultOptions = {
           itemSelector : '.view-portfolio .views-row',
		        masonry: {
					columnWidth: 300,
					gutterWidth: 20
				},
			animationOptions: {
			  	animationEngine : 'best-available',
	     		duration: 750,
	     		easing: 'linear',
	    		queue: true
	  		}		    
	  	};
	  	
        var $optionSets = $controlsContainer.find('.filter');
             
        var isOptionLinkClicked = false;
       
       				
		function initIsotope(customoptions){
								
			$ww = $(window).width();
			
			//define dimensions according to browser width 
			var gridSize; 
			var gutterSize;
			  
			if($ww < 960 && $ww >= 767 ){	gridSize = 236; gutterSize = 20; }
			else if($ww < 767){				gridSize = 200;	gutterSize = 20; }
			else{						 	gridSize = 300;	gutterSize = 20; }
	
			//Options
			var setupOptions = $.extend( {}, defaultOptions, {
		        itemSelector : '.view-portfolio .views-row',
		        masonry: {
					columnWidth: gridSize,
					gutterWidth: gutterSize
				},
				animationOptions: {
				  	animationEngine : 'best-available',
	     			duration: 750,
	     			easing: 'linear',
	    			queue: true
	  			},
	  			onLayout: function() {
		  			$win.trigger("scroll");
		  			//console.log("onlaoyout");
		  		}		    
	  		});
  			
	  		options = $.extend( {}, setupOptions, customoptions);	

	  		// set up Isotope
	  		$container.isotope( options );	
	  					
		}
					
		
			
	  
	      // switches selected class on buttons
	      function changeSelectedLink( $elem ) {
	        console.log($elem);
	       
	       	$('.filter').removeClass("filter_active");
	        // remove selected class on previous item
	        $optionSets.find('.filter_active').removeClass('filter_active');
	        // set selected class on new item
	        $elem.addClass('filter_active');
	        
	        
	       			       
	        
	      }
	  
	  
	  
	 						
			$('.filter').click(function(event){
				
				event.preventDefault();
				var $this = $(this);
				
				 // don't proceed if already selected
		        if ( $this.hasClass('filter_active') ) {
		          return;
		        }
		        else{
			        $('.view-portfolio-filter .view-content').addClass("visible");
		        }
		        
		        if ( $this.hasClass('remove_filter') ) {
		        	$container.isotope({ filter: '' });
					$(this).addClass("hidden");
					$('.filterlabel').removeClass("hidden");
					$('.filter').removeClass("filter_active");		
					
					$('.view-portfolio-filter .view-content').removeClass("visible");
					$.bbq.removeState();

					return;
		        }
		        		        
				
				var selector = $(this).attr('data-filter-value');
				// get href attr, remove leading #
		        var href = $this.attr('href').replace( /^#/, '' );
		        console.log(href);
		        changeSelectedLink($this);
		        
				//console.log(selector);
											
				isOptionLinkClicked = true;
				
				//Hash handling
						   
		        // convert href into object
	            // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
	            option = $.deparam( href, true );
		        // apply new option to previous
		        $.extend( isotopeOptions, option );
		        // set hash, triggers hashchange on window
		        
		        console.log("Option:"+ option);
		        
		        $.bbq.pushState( isotopeOptions );
		       		       				
				//switch leistung
				//$('.view-leist .views-row').css('display','none');
				//$('.view-leist .views-row.'+selector).css('display','block');
				
								//$container.isotope('reloadItems');
				//$container.isotope( 'reLayout' );
				//.isotope('reloadItems');
				// set sort back to symbol for inserting
				//.isotope('option', { sortBy: 'symbol' })
				//.isotope({ filter: selector });
				//$container.isotope({ filter: selector });
				//$container.isotope( 'reLayout' );	
					
				//$container.isotope({ filter: selector }).isotope( 'reLayout');
			
					$(".remove_filter").removeClass("hidden");
					$('.filterlabel').addClass("hidden");
			
				
			});
									
						
			
			var hashChanged = false;

		      $(window).bind( 'hashchange', function( event ){
		      
		      	console.log("Hash detected");
		      
		        // get options object from hash
		        var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {};

		        // do not animate first call
		        //aniEngine = hashChanged ? 'best-available' : 'none',
		        // apply defaults where no option was specified
		       // options = $.extend( {}, defaultOptions, hashOptions, { animationEngine: aniEngine } );
		        // apply options from hash
		       		        
		        initIsotope(hashOptions);		
		        // save options
		        isotopeOptions = hashOptions;
		    
		        // if option link was not clicked
		        // then we'll need to update selected links
		        if ( !isOptionLinkClicked ) {
		          // iterate over options
		          var hrefObj, hrefValue, $selectedLink;
		          for ( var key in options ) {
		            hrefObj = {};
		            hrefObj[ key ] = options[ key ];
		            // convert object into parameter string
		            // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition'
		            hrefValue = $.param( hrefObj );
		            // get matching link
		            $selectedLink = $('.filter[href="#' + hrefValue + '"]');
		            changeSelectedLink( $selectedLink );
		          }
		        }
		    
		        isOptionLinkClicked = false;
		        hashChanged = true;
		      })
		        // trigger hashchange to capture any hash data on init
		        .trigger('hashchange');
			
			//Lazy loading
			
			$imgs.lazyload({
		        effect: "fadeIn",
		        failure_limit: Math.max($imgs.length - 1, 0)
		    });
			
			// Resizing
			
			var doit;
			$(window).resize(function(){
			  clearTimeout(doit);
			  doit = setTimeout(resizeIsotope, 100);
			});
			
			
			function resizeIsotope(){
					
				console.log("resize");
				initIsotope();
						  
				$container.isotope( 'reLayout');
				 					
			};
		
			$('.isotope').imagesLoaded(function(){  });	
			
			
			$(window).scroll();
	}
	
	
	
	//enablea lazyload for ajax calls
	/*
	$(document).ajaxStop(function(){
		console.log("ajx stop");
		console.log($imgs);
	    $imgs.lazyload({
			effect: "fadeIn",
		    failure_limit: Math.max($imgs.length - 1, 0)
		 });
		 
		 $(window).trigger("scroll"); 
		 $(window).resize();
	});
	
	$(window).trigger("scroll"); 
	$(window).resize();
	*/
	/*
	Drupal.behaviors.YourBehaviour = {
		attach: function(context, settings) {  
		  $('#views-exposed-form-portfolio-archiv-view').ajaxComplete(function(event, xhr, settings) {
		    $imgs.lazyload({
				effect: "fadeIn",
			    failure_limit: Math.max($imgs.length - 1, 0)
			});
			console.log('Drupal behavior fired');
		  });
		 }
	}
	*/
	
	
});