// when a category tab is clicked load the contents via ajax
 $(document).ready(function(){

   //bindable function
   $('a[class="catclips"]').bind('click',showClipsByCategory);

   $('a.oneclip').bind('click',showClip);

   $('#clipsearchtab').bind('click',clickClipSearchTab) ;

   $('#clipsearchbutton').bind('click',clipSearch);

 });



//Bound Functions

function showClipsByCategory() {

   //Click on a category Tab

   $(this).parent().siblings().removeClass('current');
   $(this).parent().addClass('current');

     //make sure the search box is closed
     $('#audbox-search').slideUp();

     // get the target url and amend it so we know it's an ajax call
     var sTarget = $(this).attr('href');
     sTarget = sTarget+'/ajx/true';

     //put up a loading animation
     $('#audbox-clips').html('<div id="audbox-loading" style="width:210px;height:15px;margin:150px auto;"><img src="/img/loadingAnimation.gif" width="208" height="13" alt="{animation:loading}"/></div>');

     //get the clip list
     $.getJSON(sTarget,'',function(data){
       //populate the clips into the panel
       $('#audbox-clips').html(data['audboxClips']);
       clipbinder();
     });

     // unbind and bind all function Bind

     return false;
}


//what about a single clip
function showClip() {

     //scroll to top of screen
     //get y pos of #content-area
     var aPosCA = $('#content').offset()
     var yPos = (aPosCA.top) ? aPosCA.top : 262 ;
     window.scrollTo(0,yPos);


     //put up a loading animation
      $('#one-large-clip').html('<div id="one-large-clip-loading" style="width:210px;height:15px;margin:150px auto;"><img src="/img/loadingAnimation.gif" width="208" height="13" alt="{animation:loading}"/></div>');
      $('#one-large-clip-details').html('<img src="/img/loadingAnimation.gif" width="208" height="13" alt="{animation:loading}" style="margin:3px 100px" />');
      $('#topclipsspanel').html('<div id="top-clips-panel" style="width:210px;height:15px;margin:190px auto;"><img src="/img/loadingAnimation.gif" width="208" height="13" alt="{animation:loading}"/></div>');


       var sVidTarget = $(this).attr('href') ;
       //remove any trailing slash and add on our ajax marker
       sVidTarget = sVidTarget.replace(new RegExp(/\/$/),'');
       sVidTarget = sVidTarget+='/ajx/true' ;

       //get the individual clip AND the related clip list
      $.getJSON(sVidTarget,'',function(data){
       //populate the clips into the panel


         var sHtml = '<a href="'+data['oneclip']['url']+'" ';
         sHtml=sHtml+ 'class="media {params:{allowfullscreen:true},flashvars:{width: 470, height: 360,allowscriptaccess: \'always\', ';
         sHtml=sHtml+ 'usefullscreen:true, ';
         sHtml=sHtml+ 'autostart: false, ';
         sHtml=sHtml+ 'image: \''+data['oneclip']['fullimgurl']+'\'}} ';
         sHtml=sHtml+ '">'+data['oneclip']['title']+'</a>';
//alert(sHtml)
         $('#one-large-clip').html(sHtml)
         //jquery media needs activated on this replaced link
         $('#one-large-clip>a.media').media();

         //now the details for the clips
         var sDetailsHtml = '<h2>'+data['oneclip']['title']+'</h2>'+data['oneclip']['summary']+'' ;
         $('#one-large-clip-details').html(sDetailsHtml) ;

         //now the related clips
         //$('#topclipspanel').html(data['relatedClips']);

         clipbinder();
      });


      return false;
}


function clickClipSearchTab() {

     //toggle the tabs styles
     $(this).parent().siblings().removeClass('current');
     $(this).parent().addClass('current');

     //put up a loading animation
     $('#audbox-clips').html('');
     //slide the search form open
     $('#audbox-search').slideDown();

     clipbinder();
}

function clipSearch() {


      //put up a loading animation
      $('#audbox-clips').html('<div id="audbox-loading" style="width:210px;height:15px;margin:150px auto;"><img src="/img/loadingAnimation.gif" width="208" height="13" alt="{animation:loading}"/></div>');

      var vskValue = $('input[name="vsk"]').val();
      var vscValue = $('select[name="vsc"]').val();
      var sFormTarget = '/audio/ajx/true/';

      //get the clip list
      $.getJSON(sFormTarget,{vsk:vskValue,vsc:vscValue},function(data){
        //populate the clips into the panel
        $('#audbox-clips').html(data['audboxClips']);
        clipbinder();
      });


      return false;

}


function clipbinder() {
     $('a[class="catclips"]').unbind('click',showClipsByCategory);
     $('a[class="catclips"]').bind('click',showClipsByCategory);

     $('a.oneclip').unbind('click',showClip);
     $('a.oneclip').bind('click',showClip);

     $('#clipsearchtab').unbind('click',clickClipSearchTab);
     $('#clipsearchtab').bind('click',clickClipSearchTab);

     $('#clipsearchbutton').unbind('click',clipSearch);
     $('#clipsearchbutton').bind('click',clipSearch);
}