$_ = jQuery.noConflict();
$_(document).ready(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);
    };

});

$_(function() {
  
  var read_button = function(class_names) {
    var r = {
      selected: false,
      type: 0
    };
    for (var i=0; i < class_names.length; i++) {
      if (class_names[i].indexOf('selected-') == 0) {
        r.selected = true;
      }
      if (class_names[i].indexOf('segment-') == 0) {
        r.segment = class_names[i].split('-')[1];
      }
    };
    return r;
  };
  
  var determine_sort = function($_buttons) {
    var $_selected = $_buttons.parent().filter('[class*="selected"]');
    return $_selected.find('a').attr('data-value');
  };
  
  var determine_kind = function($_buttons) {
    var $_selected = $_buttons.parent().filter('[class*="selected"]');
    return $_selected.find('a').attr('data-value');
  };
  
  var $_preferences = {
    duration: 800,
    easing: 'easeInOutQuad',
    adjustHeight: false
  };
  
  var $_list = $_('#dataList');
  var $_data = $_list.clone();
  
  var $_controls = $_('#dataFilter');
  
  $_controls.each(function(i) {
    
    var $_control = $_(this);
    var $_buttons = $_control.find('a');
    
    $_buttons.bind('click', function(e) {
      
      var $_button = $_(this);
      var $_button_container = $_button.parent();
      var button_properties = read_button($_button_container.attr('class').split(' '));      
      var selected = button_properties.selected;
      var button_segment = button_properties.segment;

      if (!selected) {
/* // Rmeoved to prevent selected class numbered suffixes "select-0" etc.
        $_buttons.parent().removeClass('selected-0').removeClass('selected-1').removeClass('selected-2');
        $_button_container.addClass('selected-' + button_segment);
        */
		$_buttons.parent().removeClass('selected');
        $_button_container.addClass('selected');
		
        var sorting_type = determine_sort($_controls.eq(1).find('a'));
        var sorting_kind = determine_kind($_controls.eq(0).find('a'));
        
        if (sorting_kind == 'all') {
          var $_filtered_data = $_data.find('li');
        } else {
          var $_filtered_data = $_data.find('li.' + sorting_kind);
        }
        
        if (sorting_type == 'size') {
          var $_sorted_data = $_filtered_data.sorted({
            by: function(v) {
              return parseFloat($_(v).find('span').text());
            }
          });
        } else {
          var $_sorted_data = $_filtered_data.sorted({
            by: function(v) {
              return $_(v).find('strong').text().toLowerCase();
            }
          });
        }
        
        $_list.quicksand($_sorted_data, $_preferences);
        
      }
      
      e.preventDefault();
    });
    
  });
});

/*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Quicksand : Examples : Sorting one set of HTML (cloning)</title>
<link type="text/css" rel="stylesheet" media="all" href="/stylesheets/RTPE_reset.css" />
<link type="text/css" rel="stylesheet" media="all" href="/stylesheets/RTPE_main.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.easing-1.3.pack.js"></script>
<!--<script type="text/javascript" src="/scripts/RTPE_main.js"></script>-->
<script type="text/javascript" src="/scripts/jquery.quicksand-1.2.2.js"></script>
<script type="text/javascript" src="/scripts/jquery.quicksand.cloning.b.js"></script>
</head>
<body>
<div class="page-body test">
  <ul class="splitter">
    <li>Filter by type:
      <ul>
        <li class="segment-1 selected-1"><a href="#" data-value="all">Everything</a></li>
        <li class="segment-0"><a href="#" data-value="aplitape">Aplitape</a></li>
        <li class="segment-2"><a href="#" data-value="conform">Conform</a></li>
        <li class="segment-2"><a href="#" data-value="clear-choice">Clear Choice</a></li>
      </ul>
    </li>
    <li>Sort by:
      <ul>
        <li class="segment-1 selected-1"><a href="#" data-value="name">Name</a></li>
        <li class="segment-2"><a href="#" data-value="size">Size</a></li>
      </ul>
    </li>
  </ul>
  <ul id="dataList" class="image-grid">
    <li data-id="id-1" class="aplitape"><img src="/images/catalog/products/small/15pc-v.jpg" width="128" height="128" alt="" /><strong>Activity Monitor</strong><span>348 KB</span></li>
    <li data-id="id-2" class="conform"><img src="/images/catalog/products/small/2000.jpg" width="128" height="128" alt="" /><strong>Address Book</strong><span>1904 KB</span></li>
    <li data-id="id-3" class="conform"><img src="/images/catalog/products/small/at-75.jpg" width="128" height="128" alt="" /><strong>Finder</strong><span>1337 KB</span></li>
    <li data-id="id-4" class="conform"><img src="/images/catalog/products/small/3pc-v.jpg" width="128" height="128" alt="" /><strong>Front Row</strong><span>401 KB</span></li>
    <li data-id="id-5" class="conform"><img src="/images/catalog/products/small/3pvc-g.jpg" width="128" height="128" alt="" /><strong>Google Pokémon</strong><span>12875 KB</span></li>
    <li data-id="id-6" class="conform"><img src="/images/catalog/products/small/3pvc-l.jpg" width="128" height="128" alt="" /><strong>iCal</strong><span>5273 KB</span></li>
    <li data-id="id-7" class="conform"><img src="/images/catalog/products/small/3pvc-s.jpg" width="128" height="128" alt="" /><strong>iChat</strong><span>5437 KB</span></li>
    <li data-id="id-8" class="conform"><img src="/images/catalog/products/small/4000-rla.jpg" width="128" height="128" alt="" /><strong>Interface Builder</strong><span>2764 KB</span></li>
    <li data-id="id-9" class="conform"><img src="/images/catalog/products/small/3pvc-m.jpg" width="128" height="128" alt="" /><strong>iTuna</strong><span>17612 KB</span></li>
    <li data-id="id-10" class="aplitape"><img src="/images/catalog/products/small/4075.jpg" width="128" height="128" alt="" /><strong>Keychain Access</strong><span>972 KB</span></li>
    <li data-id="id-11" class="aplitape"><img src="/images/catalog/products/small/4076-rla.jpg" width="128" height="128" alt="" /><strong>Network Utility</strong><span>245 KB</span></li>
    <li data-id="id-12" class="aplitape"><img src="/images/catalog/products/small/4076.jpg" width="128" height="128" alt="" /><strong>Sync</strong><span>3788 KB</span></li>
    <li data-id="id-13" class="conform"><img src="/images/catalog/products/small/4083.jpg" width="128" height="128" alt="" /><strong>TextEdit</strong><span>1669 KB</span></li>
    <li data-id="id-14" class="clear-choice"><img src="/images/catalog/products/small/3pvc-m.jpg" width="128" height="128" alt="" /><strong>iTuna</strong><span>17612 KB</span></li>
    <li data-id="id-15" class="clear-choice"><img src="/images/catalog/products/small/4075.jpg" width="128" height="128" alt="" /><strong>Keychain Access</strong><span>972 KB</span></li>
    <li data-id="id-16" class="clear-choice"><img src="/images/catalog/products/small/4076-rla.jpg" width="128" height="128" alt="" /><strong>Network Utility</strong><span>245 KB</span></li>
    <li data-id="id-17" class="clear-choice"><img src="/images/catalog/products/small/4076.jpg" width="128" height="128" alt="" /><strong>Sync</strong><span>3788 KB</span></li>
    <li data-id="id-18" class="clear-choice"><img src="/images/catalog/products/small/4083.jpg" width="128" height="128" alt="" /><strong>TextEdit</strong><span>1669 KB</span></li>
  </ul>
</div>
</body>
</html>
*/
