/* Portfolio */

$(function() {
    $('#portfolio_1').after('<div id="port_nav" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav'
    });

	$('#portfolio_2').after('<div id="port_nav2" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav2'
    });

	$('#portfolio_3').after('<div id="port_nav3" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav3'
    });

	$('#portfolio_4').after('<div id="port_nav4" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav4'
    });

	$('#portfolio_5').after('<div id="port_nav5" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav5'
    });

	$('#portfolio_6').after('<div id="port_nav6" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav6'
    });

	$('#portfolio_7').after('<div id="port_nav7" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav7'
    });

	$('#portfolio_8').after('<div id="port_nav8" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav8'
    });

	$('#portfolio_9').after('<div id="port_nav9" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav9'
    });

	$('#portfolio_10').after('<div id="port_nav10" class="portfolio_nav">').cycle({
        fx:     'fade',
        speed:  800,
        timeout: 0,
        pager:  '#port_nav10'
    });
});


/* Navigation Shift */

$(function() {
    $('#navigation li a, a.logo').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500,'easeInOutExpo');

        event.preventDefault();
    });
});


/* About Me Pop Up */

$(document).ready(function(){

	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size

		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value

		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="button_close">Close</a>');

		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;

		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});

		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=60)'}).fadeIn(); //Fade in the fade layer 

		return false;
	});


	//Close Popups and Fade Layer
	$('a.button_close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .aboutme').fadeOut(function() {
			$('#fade, a.button_close').remove();  
	}); //fade them both out

		return false;
	});
});


/* Contact Me Slide Out */

$(function(){
    $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle',                     //class of the element that will become your tab
        tabLocation: 'bottom',                    //side of screen where tab lives, top, right, bottom, or left
        speed: 300,                               //speed of animation
        action: 'click',                          //options: 'click' or 'hover', action to trigger animation
        leftPos: '0px',                           //position from left/ use if tabLocation is bottom or top
        fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
    });
});