/**
Creates an accordion out of a set of images. The accordion should contain the data-cols-img-width data attribute that defines the number
of columns in the accordion as well as the width of the image upon expansion.

@requires   <script src="/assets/js/libs/jquery/plugins/jquery.kwicks.js"></script>

@author [Matt Przybylski](mailto:mprzybylski@sapient.com)

@example
    <div class="module">
        <ul class="accordion" data-cols-img-width="5-400">
            <li data-lid="feature_01" data-lpos="interior_content">
                <img src="" data-trigger="inview" data-src="/images/en/2014/grand_cherokee/interior/acc_1.jpg" width="400" height="300" alt="2014 Jeep Grand Cherokee with Open Pore Wood Paneling">
                <h3>Open-Pore<br>Wood</h3>
            </li>
            <li data-lid="feature_02" data-lpos="interior_content">
                <img src="" data-trigger="inview" data-src="/images/en/2014/grand_cherokee/interior/acc_2.jpg" width="400" height="300" alt="2014 Jeep Grand Cherokee CommandView Sunroof">
                <h3>Suede-Like<br>Premium<br>Headliner</h3>
            </li>
            <li data-lid="feature_03" data-lpos="interior_content">
                <img src="" data-trigger="inview" data-src="/images/en/2014/grand_cherokee/interior/acc_3.jpg" width="400" height="300" alt="Detailed Interior Stitching in the 2014 Jeep Grand Cherokee">
                <h3>Detailed<br>Stitching</h3>
            </li>
            <li data-lid="feature_04" data-lpos="interior_content">
                <img src="" data-trigger="inview" data-src="/images/en/2014/grand_cherokee/interior/acc_5.jpg" width="400" height="300" alt="2014 Jeep Grand Cherokee with Harmon Kardon Speakers">
                <h3>Keyless<br>Enter 'n Go<sup>&trade;</sup></h3>
            </li>
            <li data-lid="feature_05" data-lpos="interior_content">
                <img src="" data-trigger="inview" data-src="/images/en/2014/grand_cherokee/interior/acc_4.jpg" width="400" height="300" alt="2014 Jeep Grand Cherokee with Premium Headliner">
                <h3>Front &amp; Rear-Seat<br>Input Jacks</h3>
            </li>
        </ul>
    </div>

    $('.module').accordion();
**/
;(function($, window, document, undefined) {
    'use strict';

    /* ----------------------------------------------------------------------------- *\
       Private Properties
    \* ----------------------------------------------------------------------------- */

    var pluginName = 'accordion',
        defaults = {
            accordion: '.accordion'
        };

    /* ----------------------------------------------------------------------------- *\
       Constructor
    \* ----------------------------------------------------------------------------- */

    /**
    @constructor
    **/
    function Accordion(element, options) {
        this.settings = $.extend(true, {}, defaults, options);
        this.element = element;
        this.$el = $(element);
        this.$accordion = $(this.settings.accordion, this.$el);

        this._width = Number(this.$accordion.data('cols-img-width').split('-')[1]);

        this._init();
    }

    /* ----------------------------------------------------------------------------- *\
       Private Methods
    \* ----------------------------------------------------------------------------- */

    /**
    @method _init

    @return {null}
    **/
    Accordion.prototype._init = function() {
        var self = this;

        this.$accordion.kwicks({
            max: this._width,
            spacing: 2,
            size: 950
        });

        $('li', this.$accordion).on('mouseenter', function(evt) {
            var $this = $(this),
                lid = $this.data('lid'),
                lpos = $this.data('lpos');

            $('h3', self.$accordion).hide();
            $this.find('h3').show();

            //linkTrack(lpos, lid);
        }).on('mouseleave', function(evt) {
            $('h3', self.$accordion).show();
        });
    };

    /* ----------------------------------------------------------------------------- *\
       Plugin Initialization
    \* ----------------------------------------------------------------------------- */

    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Accordion(this, options));
            }
        });
    };
})(jQuery, window, document);