$(function(){
    
    $('.tabbed').tabify();
    $('input[type=text]').textPlaceholder();
    $('.carousel').carousel();
})

/**
 *Author: Ben Grout
 *Translate regular Typo3 "Images" elements into Carousel
 **/

jQuery.fn.carousel = function () {
    return this.each(function(){

        var slides = [];
        
        var container = $(this);
        
        var currentSlide = 0;
        
        var timer = false;
                        
        var t3slides = container.find('.csc-textpic-imagerow dt a');
        
        if (!t3slides.length) {
            $(this).remove();
            return;
        }
        
        t3slides.each(function(index){
            var slide = {
                link: $(this).attr('href'),
                image: $(this).children('img').attr('src'),
                linkText: $(this).attr('title'),
                title: $(this).parent().next('dd').html()
            }
            slides.push(slide);
        });
        
        container.empty();
        
        var container = $('<div/>')
                            .addClass('carousel-wrap')
                                .appendTo(container);
        
        var slideContainer =  $('<ul/>')
            .attr('id', 'slide-container')
                .appendTo(container);
        
        var pipContainer = $('<div><ul></ul></div>')
            .attr('id', 'pips-container')
                .appendTo(container);
                
        $('<div/>')
            .attr('id', 'carousel-block')
                .appendTo(container);                
                
        for (i in slides) {

            var slide = slides[i];
                        
            var el = '<li style="background-image:url('+slide.image+')">'+
                        '<h2>'+slide.title+'</h2>'+
                        '<a href="'+slide.link+'">'+slide.linkText+'</a>'+
                     '</li>';
            
            var slideEl = $(el)
                .appendTo(slideContainer);
            
            var pip = $('<li>').appendTo($(pipContainer).children('ul'));
            
            if (i == 0) {
                pip.attr('class', 'current');
                slideEl.attr('class', 'current');
            }
        }
        
        startTimer();
                
        function changeSlide(next)
        {
            var current = $('#slide-container li.current');
            
            if (typeof next == "undefined") {
                next = current.index() + 1;
                if (next == $('#slide-container li').length) {
                    next = 0;
                }            
            }
            
            $('#carousel-block').show();
                        
            current.css({"z-index": 1});
            
            changePip(next);            
            $('#slide-container li:eq(' + next + ')').css({"z-index": 2}).fadeIn(1500, function(){
               current.hide();
               current.removeClass('current');
               $(this).addClass('current');
               $('#carousel-block').hide();
            });
        }
        
        function changePip(next)
        {
            $('#pips-container li.current').removeClass('current');
            $('#pips-container li:eq(' + next + ')').addClass('current');
        }
        
        function stopTimer()
        {
            clearInterval(timer);
        }
        
        function startTimer()
        {
            timer = setInterval(function(){
                changeSlide();
            }, 8000);
        }
        
        $('#container').delegate('#pips-container li', 'click', function(){
            if ($(this).hasClass('current')) {
                return false;            
            }
            
            changeSlide($(this).index());
            
        });
        
        $('.carousel').hover(
            function(){
                stopTimer();
            },
            function(){
                startTimer();
            }
        );
        
        
    });
}


/**
 * Author: Ben Grout
 *
 * Example Markup:
 * <ul class="tabs">
 *  <li>
 *    <h2>Tab 1</h2>
 *    <p>Some tab content</p>
 *  </li>
 *  <li>
 *    <h2>Tab 2</h2>
 *    <p>Some more tab content</p>
 *  </li>
 * </ul>
 *
 * Example Usage
 *
 * $('.tabs').tabify();
 */
jQuery.fn.tabify = function () {
    
    return this.each(function(){
        var tabs = [];
        
        var tabContainer = $(this);
        
        var tabMenu = false;
        
        /*
         *  Iterate over each 'li' inside the tab container
         *  Take the first h2 in each li and make them the
         *  tab menu items
         */
        tabContainer.children('li').each(function(index){
            tabs.push($(this));
            
            if (index > 0) {
                $(this).css({"position": "absolute", "left": "-9999em", "top": "0"});
            }
            
            if (index == 0) {
                tabMenu = $('<ul/>')
                    .attr('class', 'ev-tabs clearfix')
                        .insertBefore(tabContainer)
                            .addClass(tabContainer.attr('class'));
            }
            
            var titleId = $(this).children('h2').first().attr('id');
            var title = $(this).children('h2').first().remove().html();
                        
            var tabMenuItem = $('<li/>').html(title).appendTo(tabMenu);
            tabMenuItem.attr('id', titleId);
            
            if (index == 0) {
                tabMenuItem.addClass('active');
            }
        });
        
        /*
         *  Bind the click event on each tab item
        */
        
        $('body').delegate('.ev-tabs li', 'click', function(){
            $('.ev-tabs li.active').removeClass('active');
            $(this).addClass('active');
            
            tabContainer.children('li').css({"position": "absolute", "left": "-9999em", "top": "0"});
            
            tabs[$(this).index()].css({"position": "static", "left": "inherit", "top": "inherit"});           
        });    
    });
    
}

/**
 * @see http://github.com/NV/placeholder.js
 */
jQuery.fn.textPlaceholder = function () {

	return this.each(function(){

		var that = this;

		if (that.placeholder && 'placeholder' in document.createElement(that.tagName)) return;

		var placeholder = that.getAttribute('placeholder');
		var input = jQuery(that);

		if (that.value === '' || that.value == placeholder) {
			input.addClass('text-placeholder');
			that.value = placeholder;
		}

		input.focus(function(){
			if (input.hasClass('text-placeholder')) {
				this.value = '';
				input.removeClass('text-placeholder')
			}
		});

		input.blur(function(){
			if (this.value === '') {
				input.addClass('text-placeholder');
				this.value = placeholder;
			} else {
				input.removeClass('text-placeholder');
			}
		});

		that.form && jQuery(that.form).submit(function(){
			if (input.hasClass('text-placeholder')) {
				that.value = '';
			}
		});

	});
};