$(function() {
	$.fn.sorted = function(customOptions) {
		var options = {
			reversed: false,
			by: function(a) {
				return a.text();
			}
		};
		$.extend(options, customOptions);
	
		$data = $(this);
		arr = $data.get();
		arr.sort(function(a, b) {
			
		   	var valA = options.by($(a));
		   	var valB = options.by($(b));
			if (options.reversed) {
				return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;				
			} else {		
				return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;	
			}
		});
		return $(arr);
	};

$("#sort").buttonset();
$("#view").buttonset();
$("#order").buttonset();
$("#view-tab").button( { icons: {primary:'icon-table'} } )
$("#view-thumb").button( { icons: {primary:'icon-thumb'} } )
$("#view-tile").button( { icons: {primary:'icon-tile'} } )
$("#sort-name").button( { icons: {primary:'icon-name'} } )
$("#sort-year").button( { icons: {primary:'icon-year'} } )
$("#order-desc").button( { icons: {primary:'icon-up'} } )
$("#order-asc").button( { icons: {primary:'icon-down'} } )
$('#filterstatus').selectmenu({
	style:'dropdown',
	menuWidth: 150
});
$('#filterwork').selectmenu({
	style:'dropdown',
	menuWidth: 150
});

});



$(function() {

  // bind radiobuttons in the form
  var $sort = $('#viewtoolbar input[name="sort"]');
  var $order = $('#viewtoolbar input[name="order"]');
  var $view = $('#viewtoolbar input[name="view"]');
  var $status = $('#filtertoolbar select[name="status"]');
  var $work = $('#filtertoolbar select[name="work"]');

  // get the first collection
  var $portfolio = $('#portfolio');

  // clone perf to get a second collection
  var $data = $portfolio.clone();
  
  // attempt to call Quicksand on every form change
  $sort.add($status).add($work).add($order).add($view).change(function(e) {
  	//alert ("!!!");
    /*if ($($filterType+':checked').val() == 'all') {
      var $filteredData = $data.find('li');
    } else */
      	$('#portfolio').attr('class', $("form :radio[name=view]:checked").attr('id'));
$('#header').attr('class', $("form :radio[name=view]:checked").attr('id'));
     {
      var $fsort=$("form :radio[name=sort]:checked").attr('id');
      var $forder=$("form :radio[name=order]:checked").attr('id');
      var $fstatus=$("form select[name=status] option:selected").val();
      var $fwork=$("form select[name=work] option:selected").val();
      var $filteredData = $data.find('li[data-status^=s' + $fstatus + '][data-work^=w' + $fwork + ']');
    }
    if ($forder=='order-desc') $rev=true; else $rev=false;
    // if sorted by year
    if ($('form :radio[name="sort"]:checked').attr('id') == "sort-year") {
      var $sortedData = $filteredData.sorted({
      	reversed: $rev,
        by: function(v) {
          return $(v).find('span[data-type=year]').text().toLowerCase();
        }
      });
    } else 
    {
      // if sorted by name
      var $sortedData = $filteredData.sorted({
      	reversed: $rev,
        by: function(v) {
          return $(v).find('strong').text().toLowerCase();
        }
      });
    }   

    // finally, call quicksand
    $portfolio.quicksand($sortedData, {
      duration: 800,
      easing: 'easeInOutQuad'
      //useScaling: true
    });

  });

});
/*
  var high_performance = true;  
  var $performance_container = $('#performance-toggle');
  var $original_html = $performance_container.html();
  
  $performance_container.find('a').live('click', function(e) {
    if (high_performance) {
      $preferences.useScaling = false;
      $performance_container.html('CSS3 scaling turned off. Try the demo again. <a href="#toggle">Reverse</a>.');
      high_performance = false;
    } else {
      $preferences.useScaling = true;
      $performance_container.html($original_html);
      high_performance = true;
    }
    e.preventDefault();
  });*/