/*
 * jor_expander - 2011
 * original code: mary lou
 * http://tympanus.net/codrops/2011/03/16/expanding-image-menu/
 * extension + addit.code: jordan (6j6)
 * copyright © 2011 jordan (6j6)
 * all rights reserved
 * released under the MIT and GPL licenses
 */

(function($) {

// ===== added by (6j6) ===============================================
$.jorexpander = function(opt) {
// set options
var idme = opt.idme;
var width = opt.width;
var height = opt.height;
var widthslice = opt.widthslice;
var myease = opt.myease;
var speedopen = opt.speedopen;
var speedclose = opt.speedclose;
var myalert = opt.myalert;
var bordersize = opt.bordersize;
var backtrans = opt.backtrans;
var opacblur = opt.opacblur;
var firstpanel = opt.firstpanel;
var panelanim = opt.panelanim;
var prev = opt.prevent;
var sltot=width+widthslice; // total frame width
// ====================================================================

var $menu = $('#ei_menu'+idme+' > ul'),
$menuItems = $menu.children('li'),
$menuItemsImgWrapper = $menuItems.children('a'),
$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'+idme),
totalMenuItems = $menuItems.length,
ExpandingMenu = (function(){
/*
-----------------------------------------------------------------------
@current
set it to the index of the element you want to be opened by default,
or -1 if you want the menu to be closed initially
-----------------------------------------------------------------------
*/
var current = firstpanel,
/*
-----------------------------------------------------------------------
@anim
if we want the default opened item to animate initialy set this to true
-----------------------------------------------------------------------
*/
anim = panelanim,
/*
-----------------------------------------------------------------------
checks if the current value is valid - between 0 and the number of items
-----------------------------------------------------------------------
*/
validCurrent = function() {
return (current >= 0 && current < totalMenuItems);
},
init = function() {
/*
-----------------------------------------------------------------------
show default item if current is set to a valid index
-----------------------------------------------------------------------
*/
if(validCurrent())
configureMenu();
initEventsHandler();
},
configureMenu	= function() {
/*
-----------------------------------------------------------------------
get the item for the current
-----------------------------------------------------------------------
*/
var $item = $menuItems.eq(current);
/*
-----------------------------------------------------------------------
if anim is true slide out the item
-----------------------------------------------------------------------
*/
if(anim) slideOutItem($item, true, speedopen, ''+myease+'');
else{
/*
-----------------------------------------------------------------------
if not just show it
-----------------------------------------------------------------------
*/
$item.css({width : sltot+'px'}).find('.ei_image'+idme).css({left:'0px', opacity:1});
/*
-----------------------------------------------------------------------
decrease the opacity of the others
-----------------------------------------------------------------------
*/
$menuItems.not($item).children('.ei_preview'+idme).css({opacity:opacblur});
}
},
initEventsHandler	= function() {
/*
-----------------------------------------------------------------------
when we click an item the following can happen:
1) The item is already opened - close it!
2) The item is closed - open it! (if another one is opened, close it!)
-----------------------------------------------------------------------
*/
$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
var $this = $(this).parent(),
idx = $this.index();
if(current === idx) {
if(prev==false) {
slideOutItem($menuItems.eq(current), false, speedclose, ''+myease+'', true);
current = -1;
}
}
else{if(validCurrent() && current !== idx)
slideOutItem($menuItems.eq(current), false, speedopen, ''+myease+'');
current = idx;
slideOutItem($this, true, speedopen, ''+myease+'');
}
return false;
});
},
/*
-----------------------------------------------------------------------
if you want to trigger the action to open a specific item
-----------------------------------------------------------------------
*/
openItem = function(idex,idx) {
$('#ei_menu'+idex+' > ul').children('li').children('a').eq(idx).click();
// ===== (6j6) multi open - jorexpander.openItem(extNR,panel)
// ===== $menuItemsImgWrapper.eq(idx).click();
},
/*
-----------------------------------------------------------------------
opens or closes an item
note that "mLeave" is just true when all the items close,
in which case we want that all of them get opacity 1 again.
"dir" tells us if we are opening or closing an item (true | false)
-----------------------------------------------------------------------
*/
slideOutItem = function($item, dir, speed, easing, mLeave) {
var $ei_image	= $item.find('.ei_image'+idme),
itemParam	= (dir) ? {width : sltot+'px'} : {width : widthslice+'px'},
imageParam	= (dir) ? {left : '0px'} : {left : widthslice+'px'};
/*
-----------------------------------------------------------------------
if opening, we animate the opacity of all the elements to 0.1.
this is to give focus on the opened item..
-----------------------------------------------------------------------
*/
if(dir)
/*
-----------------------------------------------------------------------
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current)).stop().animate({opacity:0.1}, 500);
-----------------------------------------------------------------------
*/
$menuItemsPreview.stop().animate({opacity:opacblur}, 1000);
else if(mLeave)
$menuItemsPreview.stop().animate({opacity:1},{queue:true,duration:1500,easing:'',complete:function(){this.style.filter=''}});
// ===== fix opacity IE (6j6)
/*
-----------------------------------------------------------------------
the <li> expands or collapses
-----------------------------------------------------------------------
*/
$item.stop().animate(itemParam, speed, easing);
/*
-----------------------------------------------------------------------
the image (color) slides in or out
-----------------------------------------------------------------------
*/
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
-----------------------------------------------------------------------
if opening, we animate the opacity to 1, otherwise we reset it.
-----------------------------------------------------------------------
*/
if(dir)
$ei_image.animate({opacity:1},{queue:true,duration:1500,easing:'',complete:function(){this.style.filter=''}}); // ===== fix opacity IE (6j6)
else
$ei_image.css('opacity', opacblur);
});
};
return {
init : init,
openItem : openItem
};
})();
/*
-----------------------------------------------------------------------
call the init method of ExpandingMenu
-----------------------------------------------------------------------
*/
ExpandingMenu.init();jorexpander=ExpandingMenu;// ===== (6j6) sc-pe
/*
-----------------------------------------------------------------------
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
-----------------------------------------------------------------------
*/
// ===== added by (6j6) ===============================================
var cnt=$('.content'+idme+' li').size();var cnti=0;var poset=0;var alrt=true;var bck=true;
for (cnti=0;cnti<=cnt;cnti++) {
$('.content'+idme+' li:eq('+cnti+') span').css({'background-position':poset+'px 0px'});poset=poset-widthslice;};
if (alrt==myalert) {var total=widthslice*cnt;alert('Extension ID: '+idme+'  |  Width: '+total+'  |  Height: '+height)};
if (bck==backtrans) {$('.ei_menu'+idme).css({'background':'transparent'})};
var paneltot=widthslice*cnt+width+bordersize*cnt;$('.content'+idme).parent().css({'width':paneltot});
// ====================================================================
};
})(jQuery);