var paper; 
var goto = "";

var menuItems = [];


var shadowSize = 3;
var shadowAlpha = 0.3;
var rounded = 8;

var sounds = [];

var birdVolume = 15;
var trainVolume = 50;
var muted = false;


var fontsize_active = 18;
var fontsize_default = 16;
var fontsize_sub = 14;

var menu_center = 100;


$( document ).ready( 
   function() {
   
      
      
      $( "#container" ).corner( "round 24px" );
      $( ".corner" ).corner( "round 12px" );
      
      
      $( ".custom-scroller" ).jScrollPane({
         showArrows: true,
         scrollbarWidth: 10,
         scrollbarMargin: 20,
         dragMaxHeight: 11,
         reinitialiseOnImageLoad: true
      
      });
      setPortfolioThumbnails();
            
            
      //setMenu();
      
      if( want_train ) {
         //initBird();
         //initTrain();
         
      
         //$( window ).blur( mute );
         //$( window ).focus( unmute );
         
      }
      
      
      
      $( ".more-link" ).each(
         function() {
            
            var href = $( this ).attr( "href" ).split( "#" );
            $( this ).attr({ href: href[0] });
         
         }
      );
      
      

      
      var menus = $.makeArray( $( "#menu li" ) );
      var cx = $( "#menu" ).innerWidth() * 0.5;
      
      
      for( var i=0; i<menus.length; i++ ) {
         var m = $( menus[i] );
         
         var isSubmenu = m.parent().hasClass("sub-menu");
         m.children("a").addClass( isSubmenu ? "sub-menu-item" : "first-menu-item" );
         
         var link = m.children( "a:first" ).attr( "href" );
         
         var cat = ( link.split( "cat=" )[1] || -1 ); 
         
         var active = 
         ( document.location.href.indexOf( link ) != -1 && link.indexOf( "?" ) != -1 ) ||
         ( document.location.href == link ) ||
         ( cat != -1 && cat_id == cat );
         
         if( active ) m.addClass( "active-menu-item" );
      
         if( !isSubmenu ) {
            m.children("a")
               .addClass( isSubmenu ? "sub-menu-item" : "first-menu-item" )
               .css({ 
                  left: m.innerWidth() * 0.5 - m.children("a").innerWidth() * 0.5, 
                  "margin-bottom": Math.round( 10 + Math.random() * 5 ) 
               });
            
            if( m.children("ul").length > 0 ) {
            
               m.children("ul").css({ 
                  left: m.innerWidth() * 0.5 - m.children("ul").innerWidth() * 0.5,
                  display: ( 
                     m.hasClass( "current-menu-parent" ) || 
                     m.hasClass( "current-menu-item" ) || 
                     m.hasClass( "active-menu-item" ) || is_portfolio ? "block" : "none" 
                  )
               });
               
               /*
               m.children( "a").click(
                  function() {
                     $( this ).parent().contents("ul").slideDown( 200 );
                     
                     return false;
                  }
               );
               */
                  
            }
            
            m.children( "a:first" ).corner( "round 4px" );
            m.children( "ul:first" ).corner( "round 4px" );
            
            
         }
         else if( active ) {
            m.parent().parent().addClass( "active-menu-item" );
         }
         
         
      }
      
      
      setTimeout( animateMenu2, 1000 );
      
      
      
      Cufon.set('fontFamily', 'Quicksand Bold').replace('.quicksand-bold, h1, h2, #menu a');
      Cufon.set('fontFamily', 'Quicksand Bold').replace('.quicksand-book');
      
      
   }
);



function animateMenu2() {
   var maxAngle = 12;
   var minAngle = 5;
   var angleDiff = maxAngle - minAngle;

   
   var menus = $.makeArray( $( "#menu li" ) );
   var cx = $( "#menu" ).innerWidth() * 0.5;
   
   var angleCounter = 0;
   var randomStart = ( Math.random() > 0.5 ? 1 : 0 );
   
   for( var i=0; i<menus.length; i++ ) {
      
      var m = $( menus[i] );
      
      var isSubmenu = m.parent().hasClass("sub-menu");
      if( !isSubmenu ) {
      
         var aangle = ( angleCounter%2 == randomStart ? 1 : -1 ) * ( minAngle + ( angleDiff * Math.random() ) ) * 0.5;
         angleCounter ++;
         
         m.children("a")
            .animate(
               { rotate: aangle }, 
               800 + 500 * Math.random(), 
               "easeOutBounce" 
            );
         
         
         if( m.children("ul").length > 0 ) {
         
            var ulangle = ( angleCounter%2 == randomStart ? 1 : -1 ) * ( minAngle + ( angleDiff * Math.random() ) ) * 0.3;
            angleCounter ++;
            
            m.children("ul").animate({ rotate: ulangle }, 1000 + 500 * Math.random(), "easeOutBounce" );
         
            
         }
         
         
         
      }
   }


}







/*

*/




function initBird() {
   $( "#bird-player" )
   .jPlayer({
      ready: function () {
	      this.element
	         .jPlayer( "setFile", birdSound )
	         .jPlayer( "play" );
      },
      volume: birdVolume,
      nativeSupport: false,
      oggSupport: false,
      swfPath: path
   })
   .jPlayer("onSoundComplete", function() {
      this.element.jPlayer("play");
   });
   
   $( "#mute-sound").click( 
      function() {
         if( muted ) unmute();
         else mute();
      }
   );
}


function initTrain() {
   $( "#train-player" )
   .jPlayer({
      ready: function() {
         this.element.jPlayer( "setFile", trainSound );
      },
      volume: trainVolume,
      nativeSupport: false, 
      oggSupport: false,
      swfPath: path
   });
   
   setTimeout( 
      function() {
         $( "#train-player" ).jPlayer( "play" );
         
         $( "#train img" ).animate(
            { right: 1000 },
            6000
         );
      },
      6000
      
   );

}

function mute() {

   $("#bird-player").jPlayer( "volumeMin" );
   if( want_train ) $("#train-player").jPlayer( "volumeMin" );
   
   muted = true;
}

function unmute() {
   
   $("#bird-player").jPlayer( "volume", birdVolume );
   if( want_train ) $("#train-player").jPlayer( "volume", trainVolume );
   
   muted = false;
}



function setPortfolioThumbnails() {

   $( ".portfolio-image-toggler" ).click(
      function() {
         
         var index = $( this ).attr( "id" ).split( "_" )[1];
         
         $( ".portfolio-image-toggler" ).removeClass( "active" );
         $( this ).addClass( "active" );
         
         
         $( ".portfolio-images" ).prepend( $( "#portfolio-image_" + index ) );
         $( "#portfolio-image_" + index ).show().css({ height: 0 }).animate( {height: 340}, 1000, "easeOutBounce" );
         
         
         //$( ".portfolio-image" ).slideUp( 400 );
         //$( "#portfolio-image_" + index ).slideDown( 400 );
         
         
         //$( ".portfolio-image" ).animate( { opacity: 0.1 }, 1000 ) ;
         //$( ".portfolio-image" ).animate({ height: 0}, 400 );
         
         //$( ".portfolio-image" ).animate({ height: "1%", overflow: "hidden" }, 400 );
         //$( "#portfolio-image_" + index ).animate({ height: "100%"}, 400 ); //.slideDown( 400, "linear" );
         
         
         //$( ".portfolio-image" ).slideUp( 400, "linear" );
         //$( "#portfolio-image_" + index ).slideDown( 400, "linear" );
         
      }
   );

}































/*


var menus;

function animateMenu3() {
   var maxAngle = 50;
   var minAngle = 15;
   var angleDiff = maxAngle - minAngle;

   
   menus = $.makeArray( $( "#menu li" ) );
   var cx = $( "#menu" ).innerWidth() * 0.5;
   
   var angleCounter = 0;
   var randomStart = ( Math.random() > 0.5 ? 1 : 0 );
   
   for( var i=0; i<menus.length; i++ ) {
      
      var m = $( menus[i] );
      
      var isSubmenu = m.parent().hasClass("sub-menu");
      if( !isSubmenu ) {
      
         var aangle = ( angleCounter%2 == randomStart ? 1 : -1 ) * ( minAngle + ( angleDiff * Math.random() ) );
         angleCounter ++;
         
         m.data({ toAngle: aangle, angle: 0 });
         
         //m.toAngle = aangle;
         //m.angle = 0;
         
         //m.children( "a" ).easyRotate( { degrees: aangle } );
         
         if( m.children("ul").length > 0 ) {
         
            var ulangle = ( angleCounter%2 == randomStart ? 1 : -1 ) * ( minAngle + ( angleDiff * Math.random() ) ) * 0.7;
            angleCounter ++;
            
            m.children( "ul" ).data({ toAngle: ulangle, angle: 0 });
            
            //m.children("ul").animate({ rotate: ulangle }, 1000 + 500 * Math.random(), "easeOutBounce" );
         
         }
         
      }
   }
   
   doTheRotate();
   


}


function doTheRotate() {

   
   var stillAnimating = 0;
   
   for( var i=0; i<menus.length; i++ ) {
      
      var m = $( menus[i] );
      
      var isSubmenu = m.parent().hasClass("sub-menu");
      if( !isSubmenu ) {
      
         //var angle = m.angle; m.data( "angle" );
         //angle += ( m.data( "toAngle" ) - angle ) * 0.5;
         
         m.angle += ( m.toAngle - m.angle ) * 0.1;
         
         console.log( i, m.angle, m.toAngle );
         stillAnimating += ( Math.abs( m.angle ) > 0.1 ? 1 : 0 );
         
         //m.data( "angle", angle );
         
         m.children( "a" ).easyRotate( m.angle );
         
         if( m.children("ul").length > 0 ) {
         
            //m.children("ul").animate({ rotate: ulangle }, 1000 + 500 * Math.random(), "easeOutBounce" );
         
         }
      }
   }
   
   if( stillAnimating > 0 ) {
      setTimeout( doTheRotate, 20 );
   }
   
}







function setMenu() {
   
   paper = Raphael( $( "#menu" )[0], 300, 800 );
   
   var y = 40;
   
   for( var i=0; i<menus.length; i++ ) {
   
      var active = 
         ( document.location.href.indexOf( menus[i].url ) != -1 && menus[i].url.indexOf( "?" ) != -1 ) ||
         ( document.location.href == menus[i].url );
      
      var maxAngle = 10;
      var minAngle = 5;
      var angleDiff = maxAngle - minAngle;
      
      var angle = ( i%2==0 ? 1 : -1 ) * ( minAngle + ( angleDiff * Math.random() ) );
      
      
      if( menus[i].children ) {
         
         var isActive = subMenuIsActive( menus[i].children );
         
         var sAngle = -angle * 0.3;
         var bAngle = angle * 0.4;
         
         var subMenu = addSubMenu( menus[i].children, menu_center, y + fontsize_active * 1.3, sAngle, isActive );
         menuItems.push( subMenu );
         
         
         menuItems.push( addMenuItem( menus[i], menu_center, y, bAngle, isActive, subMenu ) );
         y += ( isActive ? subMenu.getBBox().height : 0 ) + 3 * fontsize_default;
         
      }
      else {
         menuItems.push( addMenuItem( menus[i], menu_center, y, angle, active ) );
         y += 3 * fontsize_default;
      }
      
      
   }
   
   
   setTimeout( 
   
      function() {
      
         for( var i=0; i<menuItems.length; i++ ) {
            menuItems[i].animate( 
               { rotation: menuItems[i].params.angle + " " + menuItems[i].params.x + " " + menuItems[i].params.y }, 
               2000 + 3000 * Math.random(), 
               "elastic" 
            );
         }
      },
      500
   
   );
   
   
   
   
   
   
}



function subMenuIsActive( children ) {
   var parentActive = false;
   for( var i=0; i<children.length; i++ ) {
      var active = ( document.location.href.indexOf( children[i].url ) != -1 );
      parentActive = ( active || parentActive );
   }
   
   return parentActive;
}

function addSubMenu( children, x, y, ang, active ) {
   
   var size = fontsize_sub;
   var space = size * 1.5;
   
   var height = space * ( children.length + 1 );
   
   
   var mShadow = paper.rect( x + shadowSize, y + shadowSize, 0, height, rounded );
   mShadow.attr({ fill: "#000000", "fill-opacity": shadowAlpha, "stroke-width": 0, "stroke-opacity": 0 });
   
   var mBox = paper.rect( x, y, 0, height, rounded );
   mBox.attr({ fill: "#fff", "stroke-width": 0, "stroke-opacity": 0 });
   
   var mSet = paper.set( mBox, mShadow, mHit );
   
   var boxWidth = 0;
   var mItems = [];
   
   
   for( var i=0; i<children.length; i++ ) {
      
      var is_active = ( document.location.href.indexOf( children[i].url ) != -1 );
      
      var ix = x;
      var iy = y + space * ( i + 0.5 );  
      
      var mItem = paper.print( ix, iy, children[i].title, paper.getFont( "Quicksand Bold" ), size );
      
      var itemArgs = { fill: ( is_active ? "#F16C30" : "#ACA71D" ), "fill-opacity": ( is_active ? 1 : 0.7 ) };
      mItem.attr( itemArgs );
      
      var myBoxWidth = ( mItem.getBBox().width + size * 2 );
      boxWidth = Math.max( boxWidth, myBoxWidth );
      
      var mHit = paper.rect( ix, iy + size * 0.5, 0, size * 1.3 );
      mHit.attr({ fill: "#fff", "fill-opacity": 0, "stroke-width": 0, "stroke-opacity": 0 });
      
      mItem.translate( -myBoxWidth * 0.5 + size, +size ); 
      
      mHit.translate( -myBoxWidth * 0.5, 0 ); 
      mHit.attr({ width: myBoxWidth });
      
      
      $( mHit.node )
         .css({ "cursor": "pointer" })
         .data( { link: children[i].url, angle: ang, set: mSet, text: mItem, x: x - size, y: y - size } );
         
      if( !is_active ) {
         $( mHit.node )
            .click( prepareGoto )
            .hover( overMenu, outMenu );
      }
         
      mItems.push( { item: mItem, hit: mHit} );
   }
   
   
   for( var i=0; i<mItems.length; i++ ) {   
   
      //mItems[i].item.translate( -boxWidth * 0.5 + size, +size ); 
      
      //mItems[i].hit.translate( -boxWidth * 0.5, 0 ); 
      //mItems[i].hit.attr({ width: boxWidth });
      
      mSet.push( mItems[i].item, mItems[i].hit );
      
   }
   
   
   mShadow.translate( -boxWidth * 0.5, 0 );
   mBox.translate( -boxWidth * 0.5, 0 );
    
   mBox.attr({ width: boxWidth });
   mShadow.attr({ width: boxWidth });
   
   mSet.params = {
      angle: ang,
      x: x,
      y: y - size
   };
   
   var clipWidth = boxWidth * 1.4;
   var clipHeight = height * 1.2;
   

   
   subMenu = mSet;
   subMenu.clipWidth = clipWidth;
   subMenu.clipHeight = clipHeight;
   
   if( !active ) {
      mSet.attr({ "clip-rect": [ x - clipWidth * 0.5, y, clipWidth, clipHeight ].join( "," ), "translation": "0 -" + ( clipHeight ) });
   }
   
   return mSet;
}



function addMenuItem( data, x, y, ang, active, dropdown ) {
   
   dropdown = ( dropdown || false );
   
   
   var size = ( active ? fontsize_active : fontsize_default );
   
   var mShadow = paper.rect( x + shadowSize, y + shadowSize, 0, ( size )* 2, rounded );
   mShadow.attr({ fill: "#000000", "fill-opacity": shadowAlpha, "stroke-width": 0, "stroke-opacity": 0 });
   
   
   var mBox = paper.rect( x, y, 0, size * 2, rounded );
   mBox.attr({ fill: "#fff", "stroke-width": 0 });
   
   var mItem = paper.print( x, y, data.title, paper.getFont( "Quicksand Bold", 900 ), size );
   var itemArgs = { fill: ( active ? "#F16C30" : "#ACA71D" ), "fill-opacity": ( active ? 1 : 0.7 ) };
   mItem.attr( itemArgs );
   
   var mHit = paper.rect( x, y, 0, size * 2 );
   mHit.attr({ fill: "#fff", "fill-opacity": 0, "stroke-width": 0, "stroke-opacity": 0 });
   
   
   
   var boxWidth = ( mItem.getBBox().width + size * 3 );
   
   mShadow.translate( -boxWidth * 0.5, 0 );
   mBox.translate( -boxWidth * 0.5, 0 );
   mHit.translate( -boxWidth * 0.5, 0 );  
   mItem.translate( -boxWidth * 0.5 + size * 1.5, +size ); 
   
   mBox.attr({ width: boxWidth });
   mShadow.attr({ width: boxWidth });
   mHit.attr({ width: boxWidth });
   
   var mSet = paper.set( mItem, mBox, mShadow, mHit );
      
   $( mHit.node )
      .css({ "cursor": "pointer" })
      .data( { link: data.url, angle: ang, set: mSet, text: mItem, x: x - size, y: y - size, dropdown: dropdown } );
      
   if( !active ){
      $( mHit.node )
         .hover( overMenu, outMenu )
         .click( dropdown ? dropdownMenu : prepareGoto );
   }
   
   mSet.params = {
      angle: ang,
      x: x,
      y: y - size
   };
   
      
   return mSet;
   
}


function overMenu() {
   $( this ).data( "text" ).attr({ "fill-opacity": 1 });
}


function outMenu() {
   $( this ).data( "text" ).attr({ "fill-opacity": 0.7 });
}

function prepareGoto() {
   
   //var time = 2000;
   //animateMenuItem( this, time );
      
   goto = $( this ).data( "link" );

   //setTimeout( function() {  document.location.href = goto; }, time * 0.5 );
   
   
   document.location.href = goto;   
}


function dropdownMenu() {
   

   var subMenu =  $( this ).data( "dropdown" );
   
   if( subMenu ) {
      subMenu.animate( 
         { translation: "0 " + subMenu.clipHeight, rotation: subMenu.params.angle + " " + subMenu.params.x + " " + subMenu.params.y  }, 
         300, 
         "elastic" 
      );
      
      
      for( var i=0; i<menuItems.length; i++ ) {
         
         if( subMenu.getBBox().y + subMenu.getBBox().height < menuItems[i].getBBox().y ) {
            
            menuItems[i].animate( 
               { translation: "0 " + subMenu.clipHeight * 0.8 }, 
               300, 
               "elastic" 
            );
            
         }
         
      }
      
      
      $( this ).data( { dropdown: false } );
   }
}


function animateMenuItem( node, time ) {


   var newAngle = - $( node ).data("angle") * 0.5;         
   var animObject = { rotation: newAngle + " " + $( node ).data("x") + " " + $( node ).data("y") };
   //var animObject = {  };
   
   $( node ).data( "set" ).animate( animObject , time, "<" );   
   
}
*/