function tabs(_id)
{
    var _ele = $("#" + _id);
    var _tabItems = new Array();
    var _contents = _ele.find("li");

    _contents.each(function(_i) {
        var ele = $(this);

        _tabItems.push(new Array(ele, ele.attr("tab-title")));
        ele.removeAttr("tab-title");

        if (_i == 0) ele.show();
        else         ele.hide();
    });

    var _tabsContainer = $(getTabsHtml());
    _tabsContainer.insertBefore(_ele);

    var _tabs = _tabsContainer.find("li");
    _tabs.each(function(_i) {
        var ele = $(this);

        ele.click(function () {
            turnOn(this, _i);
        });

        if (_i == 0) ele.addClass("active");
        else         ele.removeClass("active");
    });

    function getTabsHtml()
    {
        var html = "<ul class=\"tabs-menu\">";

        for (var i = 0; i < _tabItems.length; i++) {
            html += "<li";

            if (i == 0) {
                html += " class=\"first\"";

            } else if (i == _tabItems.length - 1) {
                html += " class=\"last\"";
            }

            html += ">";
            html += "<div class=\"left\"></div>";
            html += "<div class=\"col\">" + _tabItems[i][1] + "</div>";
            html += "<div class=\"right\"></div>";
            html += "</li>";
        }

        html += "</ul>";
        return html;
    }

    function turnOn(_obj, _index)
    {
        var ele = $(_obj);
        if (ele.hasClass("active")) {
            return;
        }

        _tabs.each(function(_i) {
            if (_index == _i)   $(this).addClass("active");
            else                $(this).removeClass("active");
        });

        var content2Show = null;
        _contents.each(function(_i) {
            if (_index == _i)   content2Show = $(this);
            else                $(this).hide();
        });

        if (content2Show) {
            content2Show.show();
        }
    }
}

$(function() {
    $(".tab-content").each(function() {
        tabs($(this).attr("id"));
    });
});