(function($) {

    $.fn.fiClients = function(options) {
        options = $.extend({
            animateDuration: 8
        }, options || {});

        var self = this;

        var clients = this.find('li');
        clients.each(function() {
            var el = $(this);
            var img = el.find('img');            
            var imageHeight = img.length ? img[0].height : 0;
            var listHeight = parseInt(el.css('height'));
            img.css({
                top: Math.floor((listHeight - imageHeight)/2)
            });

            el.append('<div class="client-modal"><span class="client-name">'+el.find('img').attr('alt')+'</span></div>');

            el.hover(function() {
                $(this).find('.client-modal').fadeIn(300);
                $(this).find('.client-logo').animate({
                    opacity: .2
                },
                300);
            },
            function() {
                $(this).find('.client-modal').fadeOut(300);
                $(this).find('.client-logo').animate({
                    opacity: 1
                },
                300);
            });
        });
    };

    $.fn.simpleGallery = function(options) {
		var defaults = {
			duration: 8000,
			speed: 1000
		};
        options = $.extend(defaults, options);

        var curIdx = 0, animInterval = null;
        var totalItems = $('.featured-list:first li').length;
        var container = $('.featured-work');

        var navigation = '<ul class="featured-list-nav">';
		for (var i = 0; i < totalItems; i++) {
			navigation += '<li><a rel="'+i+'" class="'+(i == curIdx ? 'selected' : '')+'"></a></li>';
		}

		navigation += '</ul>';
		container.append(navigation);
        navigation = $('.featured-list-nav');
        navigation.css('left', Math.floor((container.width() - navigation.width())/2));

        navigation.find('a').click(function() {
			var idx = $(this).attr('rel');
            if (idx == curIdx) {
                return false;
            }
            
            animate(curIdx, idx, true);
			curIdx = idx;
            
			window.clearInterval(animInterval);
			startInterval();
			return false;
		});

        function animate(startIndex, nextIndex, clicked) {
            setTimeout(function() {
                navigation.find('li:eq('+startIndex+') a').removeClass('selected');
                navigation.find('li:eq('+nextIndex+') a').addClass('selected');
            },
            clicked ? 0 : options.speed);

            $('.work-info-list li:eq('+startIndex+')').fadeOut(options.speed);
            $('.work-info-list li:eq('+nextIndex+')').fadeIn(options.speed);

            $('.featured-list.work').each(function(i) {
                var el = $(this);
                setTimeout(function() {
                    el.find('li:eq('+startIndex+')').fadeOut(options.speed);
                    el.find('li:eq('+nextIndex+')').fadeIn(options.speed);
                },
                i*200);
            });
        }

        function startInterval() {
			animInterval = window.setInterval(function() {
                var startIndex = curIdx;
                curIdx++;
                if (curIdx >= totalItems) {
                    curIdx = 0;
                }

                animate(startIndex, curIdx, false);
			},
			options.duration);
		}

        startInterval();
	};

    $('.clients-list').fiClients();
    if ($('.gallery-item').length <= 1 && $('.home').length == 0) {
    	$('.carousel-nav').remove();
    }
    else {
    	$().simpleGallery();
	}
    $('a[rel=external]').click(function() {
        $(this).attr('target', '_blank');
    });

    var totalItems = $('.carousel li').length;
    $('.summary .total-screen').text(totalItems);
    
    $('.carousel').jCarouselLite({
        btnNext: '.next',
        btnPrev: '.prev',
        speed: 500,
        circular: true,
        visible: 1,
        afterEnd: function(carousel, idx) {
            if (idx > totalItems) {
                idx = idx%totalItems;
            }
            $('.summary .current-screen').text(idx);
        }
    });
    
    $('.post-column .post-inner').hover(function() {
    	var el = $(this);
    	el.animate({
    		height: '377px'
    	},
    	300);
    	
    	el.next('.post-shadow').fadeIn(300);
    },
    function() {
    	var el = $(this);
    	el.animate({
    		height: '176px'
    	},
    	300);
    	
    	el.next('.post-shadow').fadeOut(300);
    });
})(jQuery);