/* 
 * Kasuri Home Scripts
 *
 * Created by Eli Van Zoeren unless otherwise noted
 * http://elivz.com
 */

$(document).ready(function() {
    
	$('#nav').menuify();
	
	$('#productImage').rotate('#imageSelectorLinks');
	
    $('#wrapper').centerVertical();
	    
	// Show and hide the full-size product images
    $('a.showImages').click(function(){
    	$('#imageWrapper').animate({top: '0%'}, 600);
    	return false;
    });    
    $('a.hideImages').click(function(){
    	$('#imageWrapper').animate({top: '100%'}, 800);
    	return false;
    });
    
});


(function($) {
    // Menuify hides the submenus and shows them
    // when the user clicks a menu item
    $.fn.menuify = function() {
        // Iterate over each element
        return this.each(function() {
            $this = $(this);
            
            // Cache the parent menu items
            var topMenus = $this.children('li:has(ul)');
            
            topMenus.each(function() {
                // Hide the submenu if it's not active
                if ($('.current, .parent_of_current', this).length == 0) {
                    $('ul', this).hide();
                }
                
                // Toggle the submenu when the parent is clicked
                $(this).click(function(e) {
                    if (e.target == this) {
                        $('ul', this).animate({height:'toggle', opacity:'toggle'}, 400);
                        return false;
                    }
                });
            });
        });
    };
})(jQuery);

(function($) {
    // Image rotater
    $.fn.rotate = function(imageLinkContainer) {
        // Iterate over each element
        return this.each(function() {
            $container = $(this);

            // Cache the links
            var imageLinks = $('a', imageLinkContainer);
            
            // Clear out the image container
            $container.empty();            
               
            imageLinks.each(function(i) {
                // Get the url of the each image
                var imageUrl = this.href;
                
                // Load all the images
                $('<div class="imgWrapper"><img src="'+imageUrl+'" alt="Detail photo" /></div>').appendTo($container)
                        .hide()
                        .addClass('rotateImage'+i);
                
                // Set up the click handling
                $(this).click(function() {
                    if (!$(this).hasClass('active')) {
                        $('.rotateImageActive').fadeOut(600).removeClass('rotateImageActive');
                        $('.rotateImage'+i).fadeIn(600).addClass('rotateImageActive');
                        
                        imageLinks.removeClass('active').children('.imgWrapper').stop().fadeTo(400, 1);
                        $(this).addClass('active').children('.imgWrapper').stop().fadeTo(400, 0.8);
                    }
                    
                    return false;
                }).hover(function() {
                    $('img', this).stop().fadeTo(300, 0.8);
                }, function() {
                    if (!$(this).hasClass('active')) {
                        $('img', this).stop().fadeTo(300, 1);
                    }
                });
            }).filter(':first').click();
        });
    };
})(jQuery);

    
(function($) {
    // Center a box within the window
    $.fn.centerVertical = function() {
        // Iterate over each element
        return this.each(function() {
            $this = $(this);

            // Set the height initially on page load
            $.fn.centerVertical.centerIt($this);
            
            // Reset the size when the window is resized
            $(window).resize(function() {$.fn.centerVertical.centerIt($this)});
        });
    };
    
    $.fn.centerVertical.centerIt = function(element) {
        
        // Get the current height of the parent
        var parentHeight = $(window).height();
        // Get the height of the element
        var elementHeight = element.outerHeight();
        
        var topMargin = (parentHeight - elementHeight) / 2;

        topMargin = (topMargin > 0) ? topMargin : 0;
        
        element.css('margin-top', topMargin);        
    };
})(jQuery);