var fsbanner = function (container, options) { var self = this; var defaults = { 'showname': true, 'toupdate': {}, 'whenempty': {}, 'trigger': 'click', 'hideparent': null, 'onchanged': null } this.options = $.extend({}, defaults, options); this.ilast = -1; this.setup = function () { this.container = $(container); this.items = this.container.find('div'); if (!this.container.width()) this.container.width(this.container.parent().width()); this.part = this.container.width() / this.items.length; this.mini = this.part / 4; this.widmain = this.container.width() - (this.mini * this.items.length - 1); this.items.css({ 'height': this.container.height(), 'width': this.widmain + this.mini }); if (!this.options.showname) this.items.find('.name').hide(); this.items.each(function (i) { var $item = $(this); $item.css({ 'z-index': i }); if (self.options.trigger == 'click') $item.on('click', function () { self.selectitem($item, i); }); if (self.options.trigger == 'mouse') $item.on('mouseenter', function () { self.selectitem($item, i, true); }); }); if (self.options.trigger == 'mouse') { this.container.on('mouseleave', function () { self.resetcss(); }); } this.resetcss(); this.container.show(); } this.resetcss = function () { this.items.each(function (i) { var $item = $(this); $item.stop().animate({ 'left': i * self.part }); if (self.options.showname) { var $name = $item.find('.name'); if ($name.hasclass('minimized')) $name.hide().removeclass('minimized').fadein('fast'); } }); this.ilast = null; this.updatehtml(); }; this.selectitem = function ($expanded, iexpanded, forceclick) { this.$lastexpanded = this.$expanded; if (forceclick) this.ilast = null; if (iexpanded == this.ilast) { this.$expanded = null; this.resetcss(); } else { this.$expanded = $expanded; this.items.each(function (i) { var $item = $(this); if (i <= iexpanded) { $item.stop().animate({ 'left': i * self.mini }); } else { $item.stop().animate({ 'left': i * self.mini + self.widmain }); } if (self.options.showname) { var $name = $item.find('.name'); var method = (i == iexpanded) ? 'removeclass' : 'addclass'; if (method == 'addclass' && $name.hasclass('minimized')) method = ''; if (method) $name.hide()[method]('minimized').fadein('fast'); } }); this.ilast = iexpanded; this.updatehtml($expanded); } this.firechanged(); }; this.updatehtml = function ($expanded) { this.$expanded = $expanded; var $parent = $(self.options.hideparent); $.each(this.options.toupdate, function (field, selector) { var $obj = $(selector); var showit = false; var value = ''; if ($expanded) { $parent.show(); value = $expanded.find('.' + field).html(); showit = true; } else { if ($parent.length) { showit = false; $parent.hide(); } else { if (self.options.whenempty[field]) { value = self.options.whenempty[field]; showit = true; } } } $obj.hide(); if (showit) $obj.html(value).fadein('fast'); }); }; this.firechanged = function () { if (this.options.onchanged) { this.options.onchanged(this.$expanded, this.$lastexpanded); } }; this.setup(); }; $.fn.fsbanner = function (options) { return new fsbanner(this, options); };