/*ISOTOPE - MULTIPLE FILTER GROUPS*/
$(function(){
	var $container = $('#container'), 
		filters = {},
		// flag if we need to change selected links
		isOptionLinkClicked = false,
		// object that will keep track of options
		$optionSets = $('.option-set'),
		isotopeOptions = {},
		// defaults, used if not explicitly set in hash
		defaultOptions = {
			filter: '*',
			itemSelector : '.element',
			layoutMode : 'straightDown',
			resizable: false // disable normal resizing
		};
			
	function changeSelectedLink( $elem, filter ) {
		var $optionSet = $elem.parents('#options .option-set');
		// change selected class
		
		$optionSet.find('.selected').removeClass('selected');
		$elem.addClass('selected');
		// store filter value in object
		// i.e. filters.color = 'red'
		var group = $optionSet.attr('data-filter-group');
		filters[ group ] = filter;
	}
	
	// filter buttons
	$('.filter a').click(function(){
		var $this = $(this);
	
		// don't proceed if already selected
		if ( $this.hasClass('selected') ) {
			return false;
		}

		// get href attr, remove leading #
		var href = $(this).attr('href').replace( /^#/, '' ),
			// convert href into object
			// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
			option = $.deparam( href, true );

		changeSelectedLink( $this, option.filter );

		
		// convert object into array
		var isoFilters = [];
		for ( var prop in filters ) {
			isoFilters.push( filters[ prop ] )
		}
		var selector = isoFilters.join('');
		
		isOptionLinkClicked = true;
		// set hash, triggers hashchange on window
		$.bbq.pushState({ filter: selector });
		
		return false;
	});
	
	
	$(window).bind( 'hashchange', function( event ){
		// get options object from hash
		var hashOptions = $.deparam.fragment(),
			options = $.extend( {}, defaultOptions, hashOptions );
		// apply options from hash
		$container.isotope( options );
		// change selected links if need be
		if ( !isOptionLinkClicked && hashOptions.filter ) {
			var filters = hashOptions.filter.split('.'),
				$link, filter;
			for (var i=1, len = filters.length; i < len; i++) {
				filter = '.' + filters[i];
				$link = $optionSets.find('a[href="#filter=' + filter + '"]');
				changeSelectedLink( $link, filter );
			}
		}
		isOptionLinkClicked = false;
	})
	// trigger hashchange to capture any hash data on init
	.trigger('hashchange');

	// update columnWidth on window resize
	$(window).smartresize(function(){
	  $container.isotope({
		// update columnWidth to a percentage of container width
		masonry: { columnWidth: $container.width() / 5 }
	  });
	});
});