var $page, $pane;
var data = {};

jQuery.noConflict();
$j = jQuery;
$j().ready(
  function()
  {
    $page = $j('#page');
    $pane = $j('#pane');
    
    // initialize page position
    var home_pos = $j('#home').position();
    $j('#pane').css({top:'-'+home_pos.top+'px',left:'-'+home_pos.left+'px'});
    
    $j('#home .cel .hotspot').each(
      function()
      {
        var $hotspot = $j(this);
        var $sect = $j( $hotspot.attr('href') );
        $hotspot.click(
          function()
          {
            // make sure about defaults to the manifesto
            if( $j('#about-banner > div').length > 1 ){
              $j('#about-banner > div').removeClass('active').eq(0).addClass('active');
            }
            
            var cur_pos = $pane.position();
            var next_pos = $j( $sect ).position();
            $pane.animate(
              {
                top:'-'+next_pos.top+'px',
                left:'-'+next_pos.left+'px'
              },
              1200,
              'easeInOutQuad',
              function()
              {
                loadSect( $sect );
              }
            );
            return false;
          }
        )
      }
    );
    
    $j('#home .cel').click(
      function()
      {
        $j(this).find('.hotspot:first').click();
      }
    );
    
    // bind all return clicks
    $j('.sect .hotspot').each(
      function()
      {
        var $hotspot = $j(this);
        var $sect = $j( $hotspot.attr('href') );
        
        $hotspot.click(
          function()
          {
            var cur_pos = $pane.position();
            var next_pos = $j( $sect ).position();
            $pane.animate(
              {
                top:'-'+next_pos.top+'px',
                left:'-'+next_pos.left+'px'
              },
              1200,
              'easeInOutQuad',
              function()
              {
              }
            );
            return false;
          }
        )
      }
    );
    
    if( ! $j.browser.mozilla ){
      updateCanvas( $j("#lines") );
    } else {
      $j('#lines').remove();
      $pane.prepend( $j('<div id="lines" />') );
      var canvas_offset = $j('#lines').offset();
      $j('#home .cel .hotspot').each(
        function()
        {
          var $hotspot = $j(this);
          var $sect = $j( '#'+$hotspot.attr('rel') );
          
          var hotspot_offset = $hotspot.offset();
          var hotspot_mid = $hotspot.height()/2;
          
          if( $sect.length ){
            var sect_offset = $sect.offset();
            var sect_mid = $sect.height()/2;
            $j('#lines').append( 
              createLine( 
                hotspot_offset.left - canvas_offset.left + hotspot_mid, 
                hotspot_offset.top - canvas_offset.top + hotspot_mid,
                sect_offset.left - canvas_offset.left + sect_mid, 
                sect_offset.top - canvas_offset.top + sect_mid
              )
            );
          }
        }
      );
    }
    
    // some adjustments are needed for webkit in order to avoid some positioning issues with the hotspots
    if( $j.browser.webkit ){
      $j('#about').css({left:'15px'});
      $j('#hispanic').css({left:'7010px'});
    }
    
    setTimeout( 'rotateHotspots();', 400 );
    
    // enable deep linking
    var deep_link = window.location.hash;
    var arr = deep_link.split('/');
    if( arr.length ){
      var sect = arr[0];
      var $deep = $j('#home .cel .hotspot[href="'+sect+'"]');
      if( arr.length > 1 ){
        var project = arr[1];
        $j('body').bind( 'section_loaded',
          function()
          {
            var p = $j( sect ).find('a[rel="'+project+'"]');
            if( p.length ) p.click();
          }
        );
      }
      $deep.click();
    }    
    
  }
);


// rotate the hotspot arrows
function rotateHotspots()
{
  // homepage
  $j('#home .work .hotspot').rotate(45);
  $j('#home .hispanic .hotspot').rotate(90);
  $j('#home .vsbytes .hotspot').rotate(180);
  $j('#home .inspira .hotspot').rotate(225);
  $j('#home .home .hotspot').rotate(270);
  
  //section hotspots
  $j('#inspira .hotspot').rotate(45);
  $j('#hispanic .hotspot').rotate(270);
  $j('#work .hotspot').rotate(225);
  $j('#people .hotspot').rotate(180);
  $j('#about .hotspot').rotate(90);
}


function updateCanvas( $canvas )
{
  var canvas = $canvas[0];
  canvas.width = $canvas.width();
  canvas.height = $canvas.height();
  var canvas_offset = $canvas.offset();
  
  var ctx = canvas.getContext( '2d' );
  ctx.clearRect( 0, 0, canvas.width, canvas.height );
  ctx.beginPath();
  ctx.strokeStyle = '#ccc';
  
  $j('#home .cel .hotspot').each(
    function()
    {
      var $hotspot = $j(this);
      var $sect = $j( '#'+$hotspot.attr('rel') );
      
      var hotspot_offset = $hotspot.offset();
      var hotspot_mid = $hotspot.height()/2;
      
      if( $sect.length ){
        var sect_offset = $sect.offset();
        var sect_mid = $sect.height()/2;
        
        ctx.moveTo( hotspot_offset.left - canvas_offset.left + hotspot_mid, hotspot_offset.top - canvas_offset.top + hotspot_mid );
        ctx.lineTo( sect_offset.left - canvas_offset.left + sect_mid, sect_offset.top - canvas_offset.top + sect_mid );
      }
    }
  );
  
  ctx.stroke();
  ctx.closePath();
}


function localToGlobal( $el, $par )
{
  var pos = $el.position();
  var left = pos.left + $el.width()/2;
  var top = pos.top + $el.height()/2;
  $el.parents().each(
    function()
    {
      var $this = $j(this);
      pos = $this.position();
      left += pos.left;
      top += pos.top;
      // if we've reached the parent we're done
      if( $this.attr('id') == $par.attr('id') ) return false;
    }
  );
  return { left:left, top:top };
}


function createLine( x1, y1, x2, y2 )
{
  if( x2 < x1 ){
    var temp = x1;
    x1 = x2;
    x2 = temp;
    temp = y1;
    y1 = y2;
    y2 = temp;
  }
  var line = document.createElement("div");
  line.className = "line";
  var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
  line.style.width = length + "px";

  if( $j.browser.msie ){
    line.style.top = (y2 > y1) ? y1 + "px" : y2 + "px";
    line.style.left = x1 + "px";
    var nCos = (x2-x1)/length;
    var nSin = (y2-y1)/length;
    line.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + nCos + ", M12=" + -1*nSin + ", M21=" + nSin + ", M22=" + nCos + ")";
  } else {
    var angle = Math.atan((y2-y1)/(x2-x1));
    line.style.top = y1 + 0.5*length*Math.sin(angle) + "px";
    line.style.left = x1 - 0.5*length*(1 - Math.cos(angle)) + "px";
    line.style.MozTransform = line.style.WebkitTransform = line.style.OTransform= "rotate(" + angle + "rad)";
  }
  return line;
}



//---------------------------------------------------------------------
//  section loading
//---------------------------------------------------------------------
function loadSect( $sect )
{
  var $content = $sect.find('.content');
  var pg = $content.attr('rel');
  if( !$content.hasClass('loaded') ){
    $content.addClass( 'loading' );
    $j.ajax({
      type: "GET",
      url: pg,
      success: function( html )
      {
        $content.removeClass('loading').addClass('loaded');
        $content.html( html );
      },
      error: function( e )
      {
      },
      complete: function( e )
      {
      }
    });
  }
}

function getData( sect )
{
  data[ sect ] = {};
  $j.ajax({
    type: "GET",
    url: "_data/"+sect+".js",
    dataType: "json",
    success: function( d ){
      var items = $j( d.items );
      var markup  = $j( '.hidden li' ).html();
      items.each(
        function()
        {
          var itm = this.item;
          data[ sect ][ itm.id ] = itm;
          
          // update the markup
          var $markup = $j( markup );
          $j( '#'+sect+' .thumbs').append( getThumbMarkup( $markup, itm, sect ) );
          
          // hijack clicks
          $markup.click(
            function()
            {
              detail( $j(this), sect );
              return false;
            }
          )
        }
      );
      // default to the first item
      $j('#'+sect+' .thumbs li:first a').click();
      $j('body').trigger('section_loaded');
    }
  });
}

function detail( $el, sect )
{
  // load the profile
  var itm = data[ sect ][$el.attr('rel')];
  var markup = $j('#'+sect+' .hidden .detail-markup' ).html();
  
  // generate the html
  var $markup = $j( markup );
  $markup = getDetailMarkup( $markup, itm, sect );
  if( $markup.find('.video-player').length > 0 ){
    var $vid_link = $markup.find('.video-player');
    var $vid_url = $vid_link.attr('href');
    var qs = new Querystring( $vid_url.split('?')[1] );
    $vid_link.fancybox({
      hideOnContentClick:false,
      frameHeight:430,
      overlayOpacity:.8,
      onComplete:
        function()
        {
          //if( $j('#vid-player').size()>0 )  loadPlayer( qs.get('asset') );
        }
    });
    $vid_link.eq(0).click();
  }
  
  // animate the transition
  $wrapper = $j('#'+sect+' .detail .detail-wrapper');
  if( $wrapper.size() > 0 ){
    if( $wrapper.size() > 1 ){
      for( var i=$wrapper.size()-1; i>0; i-- ){
        $j('#'+sect+' .detail .detail-wrapper').eq(i).stop().remove();
      }
    }
    
    $j('#'+sect+' .detail .detail-wrapper').before( $markup );
    // close the profile on top
    $j('#'+sect+' .detail .detail-wrapper:last').animate({opacity:0}, 1000,
      function()
      {
        $j(this).remove();
      }
    );
  } else {
    $j('#'+sect+' .detail').append( $markup );
  }    
}


function getThumbMarkup( $markup, itm, sect )
{
  switch( sect ){
    case 'people':
      $markup[0].href = '#'+sect+'/'+itm.id;
      $markup[0].rel = itm.id;
      $markup.find('.img').css({'backgroundImage':'url(/_img/'+sect+'/tn/'+itm.img+')'});
      $markup.find('h4').html( itm.name );
      // her name is too long
      if( itm.id == 'ingrid' ){
        $markup.find('h4').css({'font-size':'10px','font-weight':'normal'});
      }
      $markup.find('p').html( itm.shorttitle );
      var li = $j( '<li />' ).append( $markup );
      return li;
      break;
    case 'work':
      $markup[0].href = '#'+sect+'/'+itm.id;
      $markup[0].rel = itm.id;
      $markup.css({'backgroundImage':'url(/_img/'+sect+'/tn/'+itm.img+')'});
      var li = $j( '<li />' ).append( $markup );
      return li;
      break;
    case 'hispanic':
      $markup[0].href = '#'+sect+'/'+itm.id;
      $markup[0].rel = itm.id;
      $markup.css({'backgroundImage':'url(/_img/'+sect+'/tn/'+itm.img+')'});
      var li = $j( '<li />' ).append( $markup );
      return li;
      break;
    case 'vsbytes':
      $markup[0].href = '#'+sect+'/'+itm.id;
      $markup[0].rel = itm.id;
      $markup.css({'backgroundImage':'url(/_img/'+sect+'/tn/'+itm.img+')'});
      var li = $j( '<li />' ).append( $markup );
      return li;
      break;
  }
}

function getDetailMarkup( $markup, itm, sect )
{
  var process_image_array = true;
  switch( sect ){
    case 'people':
      if( itm.imgs ){
        $markup.find('.detail-details-content').append( getImageNav(itm, sect) );
        $markup.find('.img-nav a:not(".prev,.next"):first').click();
      } else {
        $markup.find('.detail-pic').css({'backgroundImage':'url(/_img/'+sect+'/fs/'+itm.img+')'});
      }
      if( itm.video ){
        $markup.append( $j('<a href="/_frame.php?src='+itm.video+'&width='+itm.width+'&height='+itm.height+'" class="video-player" />') );
      }
      $markup.find('h2').html( itm.name );
      $markup.find('h4').html( itm.title );
      $markup.find('.email').html( itm.email );
      $markup.find('.email')[0].href='mailto:'+itm.email;
      $markup.find('p').html( itm.description );
      return $markup;
      break;
    case 'work':
      if( itm.videos ){
        process_image_array = false;
        $markup.find('.detail-details-content').append( getVideoNav(itm, sect) );
        $markup.find('.img-nav a:not(".prev,.next"):first').click();
      }
      if( itm.video ){
        $markup.append( $j('<a href="/_frame.php?src='+itm.video+'&width='+itm.width+'&height='+itm.height+'" class="video-player" />') );
      }
      if( process_image_array && itm.imgs ){
        $markup.find('.detail-details-content').append( getImageNav(itm, sect) );
        $markup.find('.img-nav a:not(".prev,.next"):first').click();
      } else {
        $markup.find('.detail-pic').css({'backgroundImage':'url(/_img/'+sect+'/fs/'+itm.img+')'});
      }
      $markup.find('.name').html( itm.client );
      if( $j.isArray( itm.project ) ){
        $markup.find('.description').html( itm.project[0] );
      } else {
        $markup.find('.description').html( itm.project );
      }
      return $markup;
      break;
    case 'hispanic':
      if( itm.videos ){
        process_image_array = false;
        $markup.find('.detail-details-content').append( getVideoNav(itm, sect) );
        $markup.find('.img-nav a:not(".prev,.next"):first').click();
      }
      if( itm.video ){
        $markup.append( $j('<a href="/_frame.php?src='+itm.video+'&width='+itm.width+'&height='+itm.height+'" class="video-player" />') );
      }
      if( process_image_array && itm.imgs ){
        $markup.find('.detail-details-content').append( getImageNav(itm, sect) );
        $markup.find('.img-nav a:not(".prev,.next"):first').click();
      } else {
        $markup.find('.detail-pic').css({'backgroundImage':'url(/_img/'+sect+'/fs/'+itm.img+')'});
      }
      $markup.find('.name').html( itm.client );
      if( $j.isArray( itm.project ) ){
        $markup.find('.description').html( itm.project[0] );
      } else {
        $markup.find('.description').html( itm.project );
      }
      return $markup;
      break;
    case 'vsbytes':
      if( itm.imgs ){
        $markup.find('.detail-details-content').append( getImageNav(itm, sect) );
        $markup.find('.img-nav a:not(".prev,.next"):first').click();
      } else {
        $markup.find('.detail-pic').css({'backgroundImage':'url(/_img/'+sect+'/fs/'+itm.img+')'});
      }
      if( itm.video ){
        $markup.append( $j('<a href="/_frame.php?video='+itm.video+'&width='+itm.width+'&height='+itm.height+'" class="video-player" />') );
      }
      $markup.find('.name').html( itm.client );
      if( $j.isArray( itm.project ) ){
        $markup.find('.description').html( itm.project[0] );
      } else {
        $markup.find('.description').html( itm.project );
      }
      return $markup;
      break;
  }
}


function getImageNav( itm, sect )
{
  var $nav = $j( '<span class="img-nav" />' );
  $j(itm.imgs).each(
    function( i, e )
    {
      var $pg = $j('<a class="pg" data-img="'+e+'" data-sect="'+sect+'" data-project="'+escape(itm.project[i])+'">'+(i+1)+'</a>');
      $pg.click(
        function()
        {
          var $this = $j(this);
          $this.siblings().removeClass('active').end().addClass('active');
          var img = $this.attr('data-img');
          var sect = $this.attr('data-sect');
          var description = $this.attr('data-project');
          $this.parents('.detail-wrapper').find('.detail-pic').css({'backgroundImage':'url(/_img/'+sect+'/fs/'+img+')'});
          $this.parents('.detail-wrapper').find('.description').text( unescape(description) );
          return false;
        }
      );
      $nav.append( $pg );
    }
  );
  var $prev = $j( '<a class="prev" data-sect="'+sect+'">&laquo;</a>' );
  $prev.click(
    function()
    {
      var $this = $j(this);
      $this.siblings('.active').prev('a.pg').click();
      return false;
    }
  );
  var $next = $j( '<a class="next" data-sect="'+sect+'">&raquo;</a>' );
  $next.click(
    function()
    {
      var $this = $j(this);
      $this.siblings('.active').next('a.pg').click();
      return false;
    }
  )
  $nav.prepend( $prev );
  $nav.append( $next );
  return $nav;
}


function getVideoNav( itm, sect )
{
  var $nav = $j( '<span class="img-nav" />' );
  $j(itm.videos).each(
    function( i, e )
    {
      var $pg = $j('<a href="/_frame.php?src='+e+'&width='+itm.width+'&height='+itm.height+'" data-project="'+escape(itm.project[i])+'" data-img="'+itm.imgs[i]+'" class="pg video-player" data-sect="'+sect+'">'+(i+1)+'</a>');
      $pg.click(
        function()
        { 
          var $this = $j(this);
          $this.siblings().removeClass('active').end().addClass('active');
          var img = $this.attr('data-img');
          var description = $this.attr('data-project');
          var sect = $this.attr('data-sect');
          $this.parents('.detail-wrapper').find('.detail-pic').css({'backgroundImage':'url(/_img/'+sect+'/fs/'+img+')'});
          $this.parents('.detail-wrapper').find('.description').text( unescape(description) );
          return false;
        }
      );
      $nav.append( $pg );
    }
  );
  var $prev = $j( '<a class="prev" data-sect="'+sect+'">&laquo;</a>' );
  $prev.click(
    function()
    {
      var $this = $j(this);
      $this.siblings('.active').prev('a.pg').click();
      return false;
    }
  );
  var $next = $j( '<a class="next" data-sect="'+sect+'">&raquo;</a>' );
  $next.click(
    function()
    {
      var $this = $j(this);
      $this.siblings('.active').next('a.pg').click();
      return false;
    }
  )
  $nav.prepend( $prev );
  $nav.append( $next );
  return $nav;
}
  
  
  
//---------------------------------------------------------------------
//  client messaging
//---------------------------------------------------------------------
function alrt( msg )
{
  if( $j('body').find('#alrt').length ){
    $j('body').find('#alrt').remove();
    clearTimeout( tymer );
  }
  var bw = $j('body').width();
  $j('body').append( '<div id="alrt"></div>' );
  var aw = $j('#alrt').width();
  var ml = ((bw - aw)/2);
  $j('#alrt').css({marginLeft:ml+'px'});
  var str = '<p>';
      str += msg;
      str += '</p>';
  $j('#alrt').html( str );
  $j('#alrt').append( '<a class="close" onclick="$j(\'#alrt\').remove(); clearTimeout( tymer );"><img src="/_img/btn-alrt-close.png"></a>' );
  $j('#alrt').css({opacity:0,display:"block"});
  $j('#alrt').animate({ opacity: 0.90}, 700 );  
  tymer = window.setTimeout("$j('#alrt').animate({opacity: 0}, 1500, function(){ $j(this).remove() } )",4000);
}



//---------------------------------------------------------------------
//  dbug.log functionality
//---------------------------------------------------------------------
dbug = {
	firebug: false, debug: false, log: function(msg) {},
	enable: function() { if(this.firebug) this.debug = true; dbug.log = console.debug; dbug.log('enabling dbug');	},
	disable: function(){ if(this.firebug) this.debug = false; dbug.log = function(){}; }
}
if( typeof console != "undefined" ){ // safari, firebug
	if( typeof console.debug != "undefined" && ! $j.browser.safari ){ // firebug, skip chrome
		dbug.firebug = true; 
    dbug.enable();
    //if( window.location.href.indexOf("debug=true")>0 ) dbug.enable();
	}
}