// easy responsive tabs plugin
(function ($) {
    $.fn.extend({
        easyresponsivetabs: function (options) {
            //set the default values, use comma to separate the settings, example:
            var defaults = {
                type: 'default', //default, vertical, accordion;
                width: 'auto',
                fit: true,
                closed: false,
                activate: function(){}
            }
            //variables
            var options = $.extend(defaults, options);            
            var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';

            //events
            $(this).bind('tabactivate', function(e, currenttab) {
                if(typeof options.activate === 'function') {
                    options.activate.call(currenttab, e)
                }
            });

            //main function
            this.each(function () {
                var $resptabs = $(this);
                var $resptabslist = $resptabs.find('ul.resp-tabs-list');
                $resptabs.find('ul.resp-tabs-list li').addclass('resp-tab-item');
                $resptabs.css({
                    'display': 'block',
                    'width': jwidth
                });

                $resptabs.find('.resp-tabs-container > div').addclass('resp-tab-content');
                jtab_options();
                //properties function
                function jtab_options() {
                    if (jtype == vtabs) {
                        $resptabs.addclass('resp-vtabs');
                    }
                    if (jfit == true) {
                        $resptabs.css({ width: '100%', margin: '0px' });
                    }
                    if (jtype == accord) {
                        $resptabs.addclass('resp-easy-accordion');
                        $resptabs.find('.resp-tabs-list').css('display', 'none');
                    }
                }

                //assigning the h5 markup to accordion title
                var $tabitemh5;
                $resptabs.find('.resp-tab-content').before("<h5 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h5>");

                var itemcount = 0;
                $resptabs.find('.resp-accordion').each(function () {
                    $tabitemh5 = $(this);
                    var innertext = $resptabs.find('.resp-tab-item:eq(' + itemcount + ')').html();
                    $resptabs.find('.resp-accordion:eq(' + itemcount + ')').append(innertext);
                    $tabitemh5.attr('aria-controls', 'tab_item-' + (itemcount));
                    itemcount++;
                });

                //assigning the 'aria-controls' to tab items
                var count = 0,
                    $tabcontent;
                $resptabs.find('.resp-tab-item').each(function () {
                    $tabitem = $(this);
                    $tabitem.attr('aria-controls', 'tab_item-' + (count));
                    $tabitem.attr('role', 'tab');

                    //first active tab, keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode 
                    if(options.closed !== true && !(options.closed === 'accordion' && !$resptabslist.is(':visible')) && !(options.closed === 'tabs' && $resptabslist.is(':visible'))) {                  
                        $resptabs.find('.resp-tab-item').first().addclass('resp-tab-active');
                        $resptabs.find('.resp-accordion').first().addclass('resp-tab-active');
                        $resptabs.find('.resp-tab-content').first().addclass('resp-tab-content-active').attr('style', 'display:block');
                    }

                    //assigning the 'aria-labelledby' attr to tab-content
                    var tabcount = 0;
                    $resptabs.find('.resp-tab-content').each(function () {
                        $tabcontent = $(this);
                        $tabcontent.attr('aria-labelledby', 'tab_item-' + (tabcount));
                        tabcount++;
                    });
                    count++;
                });

                //tab click action function
                $resptabs.find("[role=tab]").each(function () {
                    var $currenttab = $(this);
                    $currenttab.click(function () {

                        var $tabaria = $currenttab.attr('aria-controls');

                        if ($currenttab.hasclass('resp-accordion') && $currenttab.hasclass('resp-tab-active')) {
                            $resptabs.find('.resp-tab-content-active').slideup('', function () { $(this).addclass('resp-accordion-closed'); });
                            $currenttab.removeclass('resp-tab-active');
                            return false;
                        }
                        if (!$currenttab.hasclass('resp-tab-active') && $currenttab.hasclass('resp-accordion')) {
                            $resptabs.find('.resp-tab-active').removeclass('resp-tab-active');
                            $resptabs.find('.resp-tab-content-active').slideup().removeclass('resp-tab-content-active resp-accordion-closed');
                            $resptabs.find("[aria-controls=" + $tabaria + "]").addclass('resp-tab-active');

                            $resptabs.find('.resp-tab-content[aria-labelledby = ' + $tabaria + ']').slidedown().addclass('resp-tab-content-active');
                        } else {
                            $resptabs.find('.resp-tab-active').removeclass('resp-tab-active');
                            $resptabs.find('.resp-tab-content-active').removeattr('style').removeclass('resp-tab-content-active').removeclass('resp-accordion-closed');
                            $resptabs.find("[aria-controls=" + $tabaria + "]").addclass('resp-tab-active');
                            $resptabs.find('.resp-tab-content[aria-labelledby = ' + $tabaria + ']').addclass('resp-tab-content-active').attr('style', 'display:block');
                        }
                        //trigger tab activation event
                        $currenttab.trigger('tabactivate', $currenttab);
                    });
                    //window resize function                   
                    $(window).resize(function () {
                        $resptabs.find('.resp-accordion-closed').removeattr('style');
                    });
                });
            });
        }
    });
})(jquery);