$(document).ready(function(){

	// ALIGN drag_block IN THE CENTER OF THE SCREEN
	var topY = ($(window).height() - 500) / 2;
	if( topY-50 < 0 ) { topY = 50; }
	else { topY -= 8; }
	
	$('#drag_block').animate({ top: topY + 20 }, 1800);
	$('#return').animate({ top: topY - 25 }, 1800);

	// insert email address
	var emailaddress = 'hello'+'@'+'ifekt.net';
	$('.email').append('<a href="mailto:'+emailaddress+'">'+emailaddress+'</a>');

	// SET WIDTH OF drag_block
	var total = 410 + $('#display').outerWidth();
	$('#drag_block').css({ width : total });


	// IMAGE SLIDESHOWS
	var y = 0; // background position

	var interval; // interval function
	$('.post_block').hover(		
		function() {
			var d = this.id;
			var y = 0;
			y = $( '#'+d+' img.main_pic' ).css('top'); // find the the current position of the image
			//y = 0;
			y = parseFloat(y); // filter out any letters
			y = Math.ceil((y/450)) * 450; // make sure the slide fits exactly in the frame, makes sure it is a factor of 470
			y -= 450; // subtract amount of first move
			var max = -$( '#'+d+' img.main_pic' ).height(); // maximum image movement	
			if( y <= max ) { y = 0; }
			//alert(y);
			//$( '#'+d+' img.main_pic').animate({ top: -400 },400); // slide the background on first entering the frame
			$( '#'+d+' img.main_pic').css({ position: "absolute"}).animate({ top: y },400);
			interval = setInterval( 
				function () {
					y -= 450; // height of one image, background image contains all images stacked
					if( y <= max ) { y = 0; }
					$( '#'+d+' img.main_pic' ).animate({ top: y },400);
				},
				3000 // interval time
			);
		},
		// MOUSEOUT
		// by clearing interval, stops cycle but finishes animation
		function(){ clearInterval(interval); }
	);


	// SHOW post_block INFORMATION
	$('.more').toggle(
		function(){
			var d = $(this).parent().get(0).id;
			//$( '#'+d+' .more' ).attr('src','images/info_less.png');
			var infoY = -$( '#'+d+' .info' ).outerHeight();
			$( '#'+d+' .info' ).css({ top : infoY }).css({ pics_show : 'block' }).animate({ top : '0px' },300);
		},
		function(){
			var d = $(this).parent().get(0).id;
			//$( '#'+d+' .more' ).attr('src','images/info_more.png');
			var infoY = -$( '#'+d+' .info' ).outerHeight();
			$( '#'+d+' .info' ).animate({ top : infoY },300);
		}
	);



	// ----- INTERNAL NAVIGATION

	// Work links, Information
	// scroll to view each post_block, link.className = post_block.idName
	$('.post_title ul li[class!="all"]').click( function() {
		var ele = this.className;
		var p = $('#'+ele).offset();

		// scroll to align post_block center
		var x = $(window).width() - $('#'+ele).width();
		x = Math.ceil( x / 2 );
		x = p.left - x;

		$('#'+ele).fadeTo(500,1).fadeTo(500,0.5).fadeTo(500,1)
		// pics_show POINTERS, do not pics_show on about or inquiry
	
		if(ele != 'inquiry' && ele != 'about') {
			$('html,body').animate({scrollLeft: x}, 1000);
			x = ($('#'+ele).width()/2) + p.left - 15; // 15 is half of the pointer width
			var y = parseFloat( $('#drag_block').css('top') ) - 35; // 25 height of pointer, 10 padding
			var y2 = y + 510 + 35; // y plus drag_block height and padding plus cancel out the y alignment
			$('#pointer').css({top:y}).animate({left:x},1100).fadeIn(1000).fadeTo(500,1.0).fadeOut(1000); // the fadeTo is merely a pause
			$('#pointer2').css({top:y2}).animate({left:x},1100).fadeIn(1000).fadeTo(500,1.0).fadeOut(1000); // the fadeTo is merely a pause
		}
		else if(ele == 'about') {
			$('html,body').animate({scrollLeft: x+37}, 1000);
		}
		else {
			$('html,body').animate({scrollLeft: p.left}, 1000);
		}
	});

	// Browse All
	$('li.all').click( function() {
		var p = $('#drag_block:last').offset(); // detects last post_block in pics_show div
		p = p.left - ($(window).width() - $('#drag_block:last').width()) + 17 + 75; // the end of the pics_show div with padding
		$('html,body').animate({scrollLeft: p}, 28000);
	});

	// return left
	$('#return').hover(
		
		function() { $('#return').stop().fadeTo(100,1.0).animate({ marginRight: -4 },200); },
		function() { $('#return').stop().animate({ marginRight: -70 },200).fadeTo(2500,0.5); }
	);
	$('#return').click( function() {
		$('html,body').stop().animate({scrollLeft: '0'}, 1000);
	});



	// CUSTOM DRAG SCROLLER

	var padding = 110;
	var intX = null;
	var once = 0;
	
	$('#drag_block').mousedown( function( event ) {
		$('html,body').stop(); // for stopping browse animation
		intX = event.pageX;
		return false; // disabled selection
	});

	$(document).mousemove( function( event ) {
		if( intX !== null ) {
			var moveX = $(window).scrollLeft() + -(event.pageX - intX); // scrolling mathematics
			$(window).scrollLeft(moveX); // scroll the site

			// scroll past left edge by moving drag_block
			if($(window).scrollLeft() == 0 ){
				if(!once){
					intX = event.pageX;
					once = 1;
				}
				$('#drag_block').css({ left: padding+-moveX });
			}

			$(this).css({ 'MozUserSelect' : 'none' }); // should disable selection in Firefox Win
			return false; // disables selection in Safari Mac, Firefox Mac, IE7
		}
	});

	$(document).mouseup( function( event ) {
		if( intX !== null ) {
			once = 0;
			intX = null;
			
			// reset drag_block position is it was moved
			if( parseFloat($('#drag_block').css('left')) !== padding ){
				$('#drag_block').animate({ left: padding },500);
			}
			
		}
	});



	// Enable selection of important elements
	// select, option, and button have not been tested
	$('input, select, option, label, textarea, button').mousedown( function(){
		$( this ).focus();
	});


});