$(document).ready(function() {
	
/*
 * jQuery SmartyNav v1-b 
 * by Merry
 * http://www.shodaburp.com/
 * email: merry__~__at__~__shodaburp__~__dot__~__com
 *
 * Messy codes, I know. Do pardon cause it's my first time writing javascript.
 * This is still work in progress. My intention is to turn this into a plugin, hopefully sometime in near future.
 * 
 * TERMS OF USE - jQuery SmartyNav
 *
 * Copyright © 2011 Merry Tadjudin
 * All rights reserved.
 *
 * Please notify me by email IF:
 *		1. You want to improve this script and teach me how to do it better (Thorough explanation please!)
 * 		2. You want to use jQuery SmartyNav v1-b for whatever purposes
 * 
 *
*/

$('#masthead').resize(function(e){
	myWidth = $('#masthead').width();
	if (myWidth > 1000){
		h1PadBot = '10px';
		h1Top = 0;
		menuTop = 0;
		h3PadBot = '45px'; 
		h3PadLeft = '240px';
		h3ColorActive = '#50c2e1';
		introTopTop = 400;
		introTopBot = 300;
		contactTopTop = 0;
		contactTopBot = 0;
		aboutTopTop = 0;
		aboutTopBot = 0;
		myTopMinValOffset = 80;
		myTopMaxValOffset = 80;
		introCon2Offset = 0;
	} else if (myWidth > 700 && myWidth < 730 ){
		h1PadBot = '10px';
		h1Top = 0;
		menuTop = 0;
		h3PadBot = '45px'; 
		h3PadLeft = '240px';
		h3ColorActive = '#50c2e1';
		introTopTop = 400;
		introTopBot = 300;
		contactTopTop = 0;
		contactTopBot = 0;
		aboutTopTop = 0;
		aboutTopBot = 0;
		myTopMinValOffset = 80;
		myTopMaxValOffset = 80;
		introCon2Offset = 0;
	} else if (myWidth > 430 && myWidth < 440 ){
		h1PadBot = '30px';
		h1Top = 0;
		menuTop = 20;
		h3PadBot = '30px';
		h3PadLeft = '240px';
		h3ColorActive = '#50c2e1';
		introTopTop = 600;
		introTopBot = 600;
		contactTopTop = 120;
		contactTopBot = 120;
		aboutTopTop = 120;
		aboutTopBot = 120;
		myTopMinValOffset = 80;
		myTopMaxValOffset = 80;
		introCon2Offset = 104;
	} else if (myWidth > 100 && myWidth < 430 ){
		h1PadBot = '30px';
		h1Top = -30;
		menuTop = -10;
		h3PadBot = '45px';
		h3PadLeft = '140px';
		h3ColorActive = '#fff';
		introTopTop = 600;
		introTopBot = 600;
		contactTopTop = 120;
		contactTopBot = 120;
		aboutTopTop = 120;
		aboutTopBot = 120;
		myTopMinValOffset = 80;
		myTopMaxValOffset = 80;
		introCon2Offset = 0;
	} else { 
		h1PadBot = '10px';
		h1Top = 0;
		menuTop = 0;
		h3PadBot = '45px'; 
		h3PadLeft = '240px';
		h3ColorActive = '#50c2e1';
		introTopTop = 400;
		introTopBot = 300;
		contactTopTop = 0;
		contactTopBot = 0;
		aboutTopTop = 0;
		aboutTopBot = 0;
		myTopMinValOffset = 80;
		myTopMaxValOffset = 80;
		introCon2Offset = 0;
	}


(function($) {
    $.fn.moveThem = function() {

        var destAnchor = $(this).attr("href");
        var destPos = $(destAnchor).offset().top;
        var destTargetHeader = destAnchor + ' h3';
        var activeMenu = destAnchor + ' ul li a.active';
        var activeHeader = 'h3.active';
        
        $(destAnchor).data('newPos', destPos);
        foo = $(destAnchor).data('newPos');

        $("#menu-top ul li a.active").removeClass('active');
        $(this).stop().addClass('active');


        $('#more-works a').click(function() {
            $('#nav-portfolio').stop().addClass('active');
        });

        $(activeHeader).removeClass('active').animate({
            'padding-left': '2px'
        }, 2500).dequeue();
        $(destTargetHeader).stop().addClass('active');

        if ($(destTargetHeader).hasClass('active')) {
            $(destTargetHeader).animate({
                'padding-left': h3PadLeft,
				'top' : menuTop
            }, 1500).dequeue();
        }

        $('#menu-top').animate({
            'top': destPos + 15 + menuTop,
            'z-index': '11'
        }, 1500).dequeue();
		
    };
})(jQuery);

$('#menu-top ul li a').data('clicked', 0);
clicked = false;

$('#menu-top ul li a, #more-works a, #your-website a').bind('click', function(event) {
    clicked = true;
    $(this).moveThem();
	
	$('h1').animate({
            'top': (Math.ceil(foo - 20)) + h1Top + 'px',
            'padding-bottom': h1PadBot,
            'z-index': '10'
    }, 1500).dequeue();
		
    $('html, body').stop().animate({
          scrollTop: (Math.ceil(foo - 20)) + 'px'
    }, 500);
    
    $('html, body').queue(function () {
        clicked = false;
        $(this).dequeue();
    });
    
    event.preventDefault();
});

$('h1').bind('click', function(e) {
    $('html, body').stop().animate({
          scrollTop: '0px'
    }, 500);
	e.preventDefault();
});

sections = ['intro', 'portfolio', 'contact-merry', 'about-merry'];

$.each(sections, function(i, val) {
    //Getting each item in the array to be stored in the variable
    myTop = val;
    id = $("#" + val);
    
    //Concatenating string onto each item on the array
    myTopMin = val + 'TopMin';
    myTopMax = val + 'TopMax';
    
    //Calculating the minimum and maximum range of top value
    myTopMinVal = $("#" + val).offset().top;
    myTopMaxVal = $("#" + val).offset().top;
    
    //Storing each item into it's own data
    $("#" + val).data(myTopMin, myTopMinVal);
    $("#" + val).data(myTopMax, myTopMaxVal);
});

var introTopMin = $("#intro").data('introTopMin');
var introTopMax = $("#intro").data('introTopMax');
var portfolioTopMin = $("#portfolio").data('portfolioTopMin');
var portfolioTopMax = $("#portfolio").data('portfolioTopMax');
var contactTopMin = $("#contact-merry").data('contact-merryTopMin');
var contactTopMax = $("#contact-merry").data('contact-merryTopMax');
var aboutTopMin = $("#about-merry").data('about-merryTopMin');
var aboutTopMax = $("#about-merry").data('about-merryTopMax');

(function($) {
    $.fn.gogo = function() {
        $(window).scroll(function() {
            scrollY = $(window).scrollTop();
            
            con3 = clicked === false;
            
            introCon1 = scrollY > (introTopMin - introTopTop);
            introCon2 = scrollY < (introTopMax - introTopBot);
			introCon3 = (scrollY == 0);

            if ( introCon1 && introCon2 && con3 || introCon3) {
                $("#menu-top ul li a.active").removeClass('active');
                $('#menu-top ul li a#nav-intro').stop().addClass('active');
				
                $('#menu-top').stop().animate({
                    'top': '55px',
                    'z-index': '11'
                }, 1500).dequeue();
				
                
                $('h1').animate({
                       'top': '0px',
                       'padding-bottom': '30px',
                       'z-index': '10'
                   }, 1500).dequeue();
                
				
                $('h3.active').removeClass('active').animate({
						'padding-left': '2px'
				}, 2500).dequeue();
				
                $('#intro h3').stop().addClass('active');

                if ($('#intro h3').hasClass('active')) {
                    $('#intro h3').animate({
						'padding-left': '240px'
                    }, 1500).dequeue();
                }
            }
            
			if ($('#portfolio').css('display') === 'none'){
				//Do nothing
			} else {
            portfolioCon1 = scrollY > (portfolioTopMin - myTopMinValOffset);
            portfolioCon2 = scrollY < (portfolioTopMax + myTopMinValOffset);
            if ( portfolioCon1 && portfolioCon2 && con3) {
                $("#menu-top ul li a.active").removeClass('active');
                $('#menu-top ul li a#nav-portfolio').stop().addClass('active');
				
                $('#menu-top').stop().animate({
                    'top': (Math.ceil($('#portfolio').offset().top)) + 15 + menuTop + 'px',
                    'z-index': '11'
                }, 1500).dequeue();
				
                
                $('h1').animate({
                      'top': (Math.ceil($('#portfolio').offset().top)) - 20 + 'px',
                      'padding-bottom': h1PadBot,
                      'z-index': '10'
                  }, 1500).dequeue();

			
                $('h3.active').removeClass('active').animate({
                                                         'padding-left': '0px'
                                                       }, 2500).dequeue();
                 $('#portfolio h3').stop().addClass('active');
				
 
                 if ($('#portfolio h3').hasClass('active')) {
                     $('#portfolio h3').animate({
                                         'padding-left': h3PadLeft
                                     }, 1500).dequeue();
                     }
				
             }
			 };
            
            contactCon1 = scrollY > (contactTopMin - contactTopTop - myTopMinValOffset);
            contactCon2 = scrollY < (contactTopMax - contactTopBot + myTopMaxValOffset);
			//alert(contactTopMin);
 
            if ( contactCon1 && contactCon2 && con3) {
                $("#menu-top ul li a.active").removeClass('active');
                $('#menu-top ul li a#nav-contact-merry').stop().addClass('active');
                $('#menu-top').stop().animate({
                    'top': (Math.ceil($('#contact-merry').offset().top)) + 15 + menuTop + 'px',
                    'z-index': '11'
                }, 1500).dequeue();
                
                $('h1').animate({
                     'top': (Math.ceil($('#contact-merry').offset().top)) - 20 + h1Top + 'px',
                     'padding-bottom': h1PadBot,
                     'z-index': '10'
                 }, 1500).dequeue();
                
                $('h3.active').removeClass('active').animate({
                                                          'padding-left': '2px'
                                                        }, 2500).dequeue();
                  $('#contact-merry h3').stop().addClass('active');
  
                  if ($('#contact-merry h3').hasClass('active')) {
                      $('#contact-merry h3').animate({
                                          'padding-left': h3PadLeft
                                      }, 1500).dequeue();
                      }
            }
            
            aboutCon1 = scrollY > (aboutTopMin - aboutTopTop - myTopMinValOffset);
            aboutCon2 = scrollY < (aboutTopMax - aboutTopBot + myTopMaxValOffset);
			aboutCon3 = scrollY > ($(document).height() - ($('#about-merry').height() * 2.5));
			/*console.log("scrollY is " + scrollY + " aboutCon3 is " + ($(document).height() - ($('#about-merry').height() * 2)));*/
  
            if ( aboutCon1 && aboutCon2 && con3 || aboutCon3 && con3) {
                $("#menu-top ul li a.active").removeClass('active');
                $('#menu-top ul li a#nav-about-merry').stop().addClass('active');
                $('#menu-top').stop().animate({
                    'top': (Math.ceil($('#about-merry').offset().top)) + 15 + menuTop + 'px',
                    'z-index': '11'
                }, 1500).dequeue();
                
                $('h1').animate({
                    'top': (Math.ceil($('#about-merry').offset().top)) - 20 + h1Top + 'px',
                    'padding-bottom': h1PadBot,
                    'z-index': '10'
                }, 1500).dequeue();
                
                $('h3.active').removeClass('active').animate({
                                                          'padding-left': '2px'
                                                        }, 2500).dequeue();
                  $('#about-merry h3').stop().addClass('active');
  
                  if ($('#about-merry h3').hasClass('active')) {
                      $('#about-merry h3').animate({
                                          'padding-left': h3PadLeft
                                      }, 1500).dequeue();
                      }
            }

        }).dequeue();
    };
})(jQuery);

$(this).gogo();
});

$('#masthead').resize();
});