var isPlaying = true;

function loaded(){
	$('#loader').animate({opacity: "0"},400, function() {
	    $('#loader').hide();
	});


	$('#opening_quote').delay(1500).fadeOut(1000, function(){
		randomQuote();
		$(this).fadeIn(500, function(){
			$(this).delay(2000).fadeOut(1000, function(){
				animIn();
			});
		});
	});


	//randomizeSong();

      $("#jquery_jplayer").jPlayer( "setMedia", {
        mp3: "audio/empire.mp3", 
	oga: "audio/empire.ogg"
      });

      $("#jquery_jplayer").jPlayer("play");
}

function animIn(){
	$('#wrapper').fadeIn(1000);
	$('#audio_off').toggle(false);
	$('#layer_out').delay(400).fadeIn(1100); 
	$('#left').delay(800).fadeIn(1000); 
	$('#middle').delay(1100).fadeIn(1000); 
	$('#right').delay(1400).fadeIn(1000);
}



function randomQuote(){

        var quoteList = ["undefined", "a pixel pusher",
			"a designer", "a technologist", "a dreamer"];	

	var randNum = randomFromTo(0, quoteList.length-1);
	var htmlStr = "I AM <span class='" + "tint'>" + quoteList[randNum] + "</div>";

	//alert(htmlStr);
	$("#opening_quote").html(htmlStr);
	Cufon.replace('#opening_quote', { fontFamily: 'Avante Garde' });

}

function randomizeSong(){

      var songName;
      var randNum = randomFromTo(0, 10);

      if (randNum >= 5){
         songName = "beastie";
      }
      else{
         songName = "empire";
      }

      $("#jquery_jplayer").jPlayer( "setMedia", {
        mp3: "audio/" + songName + ".mp3", 
	oga: "audio/" + songName + ".ogg"
      });

      $("#jquery_jplayer").jPlayer("play");

}


function soundOn(){
	$("#jquery_jplayer").jPlayer("play");
	isPlaying = true;
	$('#audio_off').toggle('fast');
	$('#audio_on').toggle('fast');
}

function soundOff(){
	$("#jquery_jplayer").jPlayer("pause");
	isPlaying = false;
	$('#audio_off').toggle('fast');
	$('#audio_on').toggle('fast');
}


$(document).ready(function(){


    //preload the bg image
    $.preLoadImages(['images/black.jpg', 'images/thumb1-over.jpg', 'images/thumb2-over.jpg'], function() {
	//alert('here');
	loaded();
   });

	var tipDir = 's';
	if ($.browser.msie){ tipDir = 'n'; }

	$('#fade1').tipsy({gravity: tipDir, fade: true});
	$('#fade2').tipsy({gravity: tipDir, fade: true});
	$('#fade3').tipsy({gravity: tipDir, fade: true});

	$("#jquery_jplayer").jPlayer({
		swfPath: 'js',
		volume: 0.4,
		supplied: "mp3, oga"
         });

       $('.middle_image #image_left1').hover(function(){$(this).stop(true, true).animate({"background-color": "#ffffff", color: "#000"}, 600);
				    }, function() {
				        $(this).stop(true, true).animate({"background-color": "#1e1e1e", color: "#fff"}, 400);
	});

       $('.middle_image #image_left2').hover(function(){$(this).stop(true, true).animate({"background-color": "#ffffff", color: "#000"}, 600);
				    }, function() {
				        $(this).stop(true, true).animate({"background-color": "#1e1e1e", color: "#fff"}, 400);
	});

        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
        
        $('#right_scroll').hover(function(){$(this).stop(true, true).animate({'opacity': 1}, 400);
				    }, function() {
				        $(this).stop(true, true).animate({'opacity': 0.5}, 400);
	});
        
       $('#left_scroll').hover(function(){$(this).animate({'opacity': 1}, 400);
				    }, function() {
				        $(this).stop(true, true).animate({'opacity': 0.5}, 400);
	});

        $('#right_scroll2').hover(function(){$(this).animate({'opacity': 1}, 400);
				    }, function() {
				        $(this).stop(true, true).animate({'opacity': 0.5}, 400);
	});
        
       $('#left_scroll2').hover(function(){$(this).animate({'opacity': 1}, 400);
				    }, function() {
				        $(this).stop(true, true).animate({'opacity': 0.5}, 400);
	});

        //when user clicks the image for sliding right        
        $('#right_scroll img').click(function(){
        
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('#carousel_ul li').outerWidth() + 10;
            
            //calculate the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
            
            //make the sliding effect using jquery's animate function '
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
                
                //and get the left indent to the default
                $('#carousel_ul').css({'left' : '-500px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll img').click(function(){
            
            var item_width = $('#carousel_ul li').outerWidth() + 10;
                        
            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
            
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                        
            $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
                       
            $('#carousel_ul').css({'left' : '-500px'});
            });            
            
        });


	$('#carousel_ul2 li:first').before($('#carousel_ul2 li:last')); 

        //Last.fm carousel
        $('#right_scroll2 img').click(function(){
        
            var item_width = $('#carousel_ul2 li').outerWidth() + 10;            

            var left_indent = parseInt($('#carousel_ul2').css('left')) - item_width;

            $('#carousel_ul2:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                $('#carousel_ul2 li:last').after($('#carousel_ul2 li:first')); 
                                
                $('#carousel_ul2').css({'left' : '-500px'});
            }); 
        });
        
        
        $('#left_scroll2 img').click(function(){
            
            var item_width = $('#carousel_ul2 li').outerWidth() + 10;
                    
            var left_indent = parseInt($('#carousel_ul2').css('left')) + item_width;
            
            $('#carousel_ul2:not(:animated)').animate({'left' : left_indent},500,function(){    
                        
            $('#carousel_ul2 li:first').before($('#carousel_ul2 li:last')); 
                        
            $('#carousel_ul2').css({'left' : '-500px'});
            });
            
            
        });

	$("#audio_control").click( function() {

	    if (isPlaying){
		soundOff();
	    }
	    else{
		soundOn();
	    }
	});


        $('#thumb1').hover(function(){
				      $(this).attr({'src':'images/thumb1-over.jpg'});
				    }, function() {
					$(this).attr({'src':'images/thumb1.jpg'});					
	});

        $('#thumb2').hover(function(){
				      $(this).attr({'src':'images/thumb2-over.jpg'});
				    }, function() {
					$(this).attr({'src':'images/thumb2.jpg'});					
	});

        $('#audio_on').hover(function(){
				      $(this).attr({'src':'images/audio_bar.gif'});
				    }, function() {
					$(this).attr({'src':'images/audio_bar1.gif'});					
	});

/*	$("#reelClick").click( function() {
		$("#overlayPanel").delay(500).fadeIn(500);
		$("#lightboxBG").fadeIn(1000);
		soundOff();
		document.getElementById("myReel").play();
	});
*/

	$("#backTop").click( function() {
		$(window).stop().scrollTo( 0, 800 );
		document.getElementById("myReel").pause();
		soundOn();		
	});



$(".iframe").colorbox({iframe:true, width:"580", height:"370", onOpen:function(){soundOff();},
			onClosed:function(){soundOn();}});

});//end doc ready



//document.addEventListener('DOMContentLoaded', loaded, false);

	Cufon.replace('#left #box_date', { fontFamily: 'Avante Garde' });
	Cufon.replace('#box_middle .middle_title', { fontFamily: 'Avante Garde' });
	Cufon.replace('#opening_quote', { fontFamily: 'Avante Garde' });
	Cufon.replace('.middle_content_box .middle_content_date', { fontFamily: 'Avante Garde' });
//Cufon.replace('.middle_content_title', { fontFamily: 'Helvetica Condensed' });