/// <reference path="jquery.intellisense.js"/>  
	  
$(document).ready(function(){
//      $('.imgshadow')
//        .before('<div class="tl"><div class="tr"><div class="t"></div></div></div>')
//        .after('<div class="bl"><div class="br"><div class="b"></div></div></div>')
//        .wrap('<div class="l"><div class="r"></div></div>');

  $('#navigation li:last').addClass('nopipe');
      
//      $('#navigation a').click(function(){
//        $('#navigation a').removeClass('current');
//        $(this).addClass('current');
//        $('#showcase-market').text($(this).attr('market'));
//      });
        
  $('#imageslide').serialScroll({
    target:'#showcase',
    items:'li', //selector to the items ( relative to the matched elements, '#sections' in this case )
    prev:'.prev',//selector to the 'prev' button (absolute!, meaning it's relative to the document)
    next:'.next',//selector to the 'next' button (absolute too)
    axis:'xy',//the default is 'y'
    queue:false,//we scroll on both axes, scroll both at the same time.
    event:'click',//on which event to react (click is the default, you probably won't need to specify it)
    stop:false,//each click will stop any previous animations of the target. (false by default)
    lock:true, //ignore events if already animating (true by default)
    duration:700,//length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
    start: 0, //on which element (index) to begin ( 0 is the default, redundant in this case )
    force:true, //force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
    cycle:true,//cycle endlessly ( constant velocity, true is the default )
    step:1, //how many items to scroll each time ( 1 is the default, no need to specify )
    jump:false, //if true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
    lazy:false,//(default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
    interval:false, //it's the number of milliseconds to automatically go to the next
    navigation:'#navigation li',
    constant:true,
    onBefore:function( e, elem, $pane, $items, pos ){
      e.preventDefault();
      if( this.blur )
        this.blur();
    },
    onAfter:function( elem ){
      var id = elem.id;
      
      jQuery.ajax({
        type: 'GET',
        url: 'utils/showcase.aspx?id=' + id,
        dataType: 'xml',
        success: function(xml) {
          var $a = $('#navigation a[id=s' + id + ']');
          $('#navigation a').removeClass('current');
          $a.addClass('current');
          
          var category = $(xml).find('category').text();  
          var subtitle = $(xml).find('subtitle').text();        
          var description = $(xml).find('description').text();        
          var url = $(xml).find('url').text();
          
          $('#showcase-category').fadeOut(200, function(){
            $(this).html(category).fadeIn(300);
          });
          $('#showcase-subtitle').fadeOut(200, function(){
            $(this).html(subtitle).fadeIn(300);
          });
          $('#showcase-description').fadeOut(200, function(){
            $(this).html(description).fadeIn(300);
          });
          $('#showcaseinfo .more').fadeOut(200, function(){
            $(this).attr('href', url).fadeIn(300);
          });
        }
      });
    }
  });
});