/*
Example:

<div id="my_tabs">
    <div class="tab" title="Tab one">
        Text text text
    </div>
    <div class="tab" title="Tab two">
        Text text text
    </div>
</div>

$('#my_tabs').tabs()

*/
$.fn.tabs = function(conf) {
    var config = conf || {}
    return this.each(function() {

        var tabpages = {}
        var tabs = {}    

        function onTabClick(e) {
            selectTab(e.data.i); 
            return false;
        }

        function selectTab(i) {
            // Hide current
            $.each(tabs, function(i) {
                $(tabs[i]).removeClass('selected')
                hideTabPage(i)
            })

            // show new
            $(tabs[i]).addClass('selected')        
            showTabPage(i)
        }
        function hideTabPage(i) {
            tabpages[i].css({position: 'absolute', left: '-10000px'})
        }
        function showTabPage(i) {
            tabpages[i].css({position: 'static', left: 0})
        }

        $('<div style="clear: both"></div>').prependTo(this)
        var ul = $('<ul class="tabs"></ul>').prependTo(this)
        var selected = 0
        $(this).children('.tab').each(function(i) {
            tabpages[i] = $(this)
            var title = $(this).attr('title')
            $(this).attr('title', '')
            var tab = tabs[i] = $('<li><a href="#">' + title + '</a></li>').appendTo(ul)
            $(tab).children('a').bind('click', {i: i}, onTabClick)
            if($(this).attr('class').indexOf('selected') !== -1) {
                selected = i
            }
        })
        selectTab(selected)
    })
    

}