// this could easily be extended to allow for optoins to be passed, maybe setting the duration, or the fade effect, or the easing etc.
// the options get passed as an object to they are accessed with options.[optionname] etc.


// when the DOM is ready...
$(document).ready(function() {

    jQuery.fn.tabulation = function(options) {

        var opt = $.extend({
            defaultTab: 0
        }, options);

        // apply plugin functionality to each element
        return this.each(function() {

            //settings
            //alert('div.tab-main:eq(' + opt.defaultTab + ')');
            var defaultdiv = $(this).find('div.tab-main:eq(' + opt.defaultTab + ')');
            var maindiv = this;
            var targetdiv = "";

            //initialise divs
            $(maindiv).find('.tab-main').css({  //hide all divs
                //opacity: 0,
                display: 'none'
            });
            $(defaultdiv).css({  // show default div
                //opacity: 1,
                display: 'block'
            });

            //initialise tabs
            $(maindiv).find('a.tablink').attr('class', 'tablink');
            $(maindiv).find('a.tablink:eq('+opt.defaultTab +')').attr('class', 'tablink on');

            //each tab link click    
            $(this).find('a.tablink').click(function() {

                targetdiv = $(this).attr('href');
                targetdiv = targetdiv.replace(/#/, '.');

                //clear this divs tabs immediately, and fade in new tab...
                $(maindiv).find('.tab-main').css({
                    //opacity: 0,
                    display: 'none'
                });
                $(maindiv).find("a.tablink").attr('class', 'tablink');
                $(targetdiv).css('display', 'block');
                //$(targetdiv).animate({ 'opacity': 1 }, 3000);
                $(this).attr('class', "tablink on");


            });

        });

    };

});