/*

Usage:

<ul id="banner">
    <li>
        <a href="/path">
            <span class="label">Helo menu text</span>
            <span class="content">
                <img src="large_image.jpg"/>
            </span>
        </a>
    </li>
</ul>
$('#banne).banner()

*/

$.fn.banner = function(conf) {
    conf = conf || {}
    var selected = null
    var old_selected = null
    var interval = null
    var delayedSelectTimer = null
    
    function selectNext() {
        // select next slide
        if(selected[0].nextSibling) {
            select(selected[0].nextSibling)
        }
        else {
            // select 
            select(selected.parent()[0].firstChild)
        }
    }
    
    function select(li, speed) {
        speed = speed || 2000
        if((selected && li == selected[0]))
            return
        
        // Move "selected" class to li
        if(selected) {
            selected.removeClass('selected')
        }
        $(li).addClass('selected')
        

        // Switch around z-index
        if(old_selected) {
            old_selected.data('content').css({'z-index': 0})
        }
        if(selected) {
            selected.data('content').css('z-index', 1)
        }
  
        // Crossfade
        $(li).data('content').css({'z-index': 2, 'opacity': 0}).animate({'opacity': 1}, speed, function(){
            //
        })
        
        old_selected = selected
        selected = $(li)
    }
    
    function select2(li, speed) {
        
        // Switch around z-index
        if(old_selected) {
            old_selected.data('content').css({'z-index': 0})
        }
        if(selected) {
            selected.data('content').css('z-index', 1)
        }
         
        old_selected = selected
        selected = $(li)
    }
    
    function delayedSelect(li, speed) {
        if(delayedSelectTimer) {
            window.clearTimeout(delayedSelectTimer)
        }
        delayedSelectTimer = window.setTimeout(function() {
            select(li, speed)
        }, 50)
    }
    
    function onPagerMouseLeave() {
        if(delayedSelectTimer) {
            window.clearTimeout(delayedSelectTimer)
        }
    }
    function onPagerClick(e) {
        return false;
    }
    
    function start() {
        // start slideshow
        interval = window.setInterval(selectNext, 8000)
    }
    
    function stop() {
        // stop slideshow
        window.clearInterval(interval)
    }
    
    function onContentClick() {
        var url = $('a', selected).attr('href')
        window.location.href = url
    }
    
    
    
    this.each(function() {
        var pages = []
        // Create a menu
        var div = $('' + 
        '<div class="banner">' +
            '<div class="banner_main">' +
            '</div>' + 
            '<ul class="banner_pager">' +
            '</ul>' +
        '</div>');
        div.css({height: $(this).height()+'px'})
        
        // Collect parts
        var main = $(div).find('.banner_main')
        var pager = div.find('.banner_pager')
        
        // Pause cycle when hovering menu
        pager.mouseover(stop)
        pager.mouseout(start)
        
        // Abort delayedSelect upon mouseout
        pager.mouseleave(onPagerMouseLeave)
        pager.click(onPagerClick)
        
        $(this).find('li a').each(function(i) {
            // shallow copy the a-tag
            var a = $(this)
            // var new_a = $(this.cloneNode(false))

            // Add content with text overlay to banner_main
            var content = a.children('.content')
            var text = a.children('.label').html()
            var overlay = $('<div class="overlay"></div>').html(text)
            content.append(overlay)
            content.click(onContentClick)
            main.append(content)
            content.css({'position': 'absolute', 'opacity': 0})
            
            // Add pager item
            var pager_item = $('<li><a href="'+a.attr('href')+'">'+(i+1)+'</a></li>')
            pager_item.data('content', content)
            pager_item.mouseover(function() {
                delayedSelect(this, 500)
            })
            pager.append(pager_item)
            
        })


        // Replace the old markup with the new generated markup
        $(this).replaceWith(div)
        

        // IE cp fix        
        pager.find('li').each(function() {
            select2(this);
        })        
        // $('.content', div).css('opacity', 1).css('opacity', 0)
        
        // Select first li and start cycling
        select(pager.find('li:first'))        
        start()
    })
    

    

}