$(function() {
				var $menu				= $('#ei_menu > ul'),
					$menuItems			= $menu.children('li'),
					$menuItemsImgWrapper= $menuItems.children('a'),
					$menuItemsPreview	= $menuItemsImgWrapper.children('.ei_preview'),
					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				= -1,
						/*
							@anim
							if we want the default opened item to animate initialy set this to true
						 */
						anim				= false,
						/*
							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, 900, 'easeInQuint');
							else{
									/* if not just show it */
								$item.css({width : '400px'})
								.find('.ei_image')
								.css({left:'0px', opacity:1});

									/* decrease the opacity of the others */
									$menuItems.not($item)
											  .children('.ei_preview')
											  .css({opacity:0.9});
							}
						},
						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) {
									slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
									current = -1;
								}
								else{
									if(validCurrent() && current !== idx)
											slideOutItem($menuItems.eq(current), false, 250, 'jswing');

									current	= idx;
										slideOutItem($this, true, 250, 'jswing');
								}
								return false;
							});
						},
							/* if you want to trigger the action to open a specific item */
							openItem			= function(idx) {
								$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'),

							itemParam	= (dir) ? {width : '460px'} : {width : '100px'},
							imageParam	= (dir) ? {left : '0px'} : {left : '100px'};

								/*
								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.9}, 1000);
							 */
								$menuItemsPreview.stop()
							.animate({opacity:1}, 1000);			/*opacity zatvorenih kad je jedan otvoren */
							else if(mLeave)
								$menuItemsPreview.stop()
							.animate({opacity:1}, 1500);

								/* 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}, 1000);
								else
									$ei_image.css('opacity', 0.2);
							});
						};

						return {
							init 		: init,
							openItem	: openItem
						};
					})();
					
				/*
				call the init method of ExpandingMenu
				*/
				ExpandingMenu.init();
			
			/*
			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)
			*/
			});