$(function () {
    //all the menu items
    var $items = $('#cc_menu .cc_item');
    //number of menu items
    var cnt_items = $items.length;
    //if menu is expanded then folded is true
    var folded = false;
    //timeout to trigger the mouseenter event on the menu items
    var menu_time;
    /**
    bind the mouseenter, mouseleave to each item:
    - shows / hides image and submenu
    bind the click event to the list elements (submenu):
    - hides all items except the clicked one, 
    and shows the content for that item
    */
    $items.unbind('mouseenter')
		  .bind('mouseenter', m_enter)
		  .unbind('mouseleave')
		  .bind('mouseleave', m_leave)
		  .find('.cc_submenu > ul > li')
		  .bind('click', function () {
		      var $li_e = $(this);
		      //if the menu is already folded,
		      //just replace the content
		      if (folded) {
		          hideContent();
		          showContent($li_e.attr('class'));
		      }
		      else //fold and show the content
		          fold($li_e);
		  });

    /**
    mouseenter function for the items
    the timeout is used to prevent this event 
    to trigger if the user moves the mouse with 
    a considerable speed through the menu items
    */
    function m_enter() {
        var $this = $(this);
        clearTimeout(menu_time);
        menu_time = setTimeout(function () {
            //img
            $this.find('img').stop().animate({ 'top': '0px' }, 400);
            $this.find('.cc_title').stop().animate({ 'top': '457px' }, 400);
            //cc_submenu ul
            $this.find('.cc_submenu > ul').stop().animate({ 'height': '83px' }, 400);
        }, 200);
    }

    //mouseleave function for the items
    function m_leave() {
        var $this = $(this);
        clearTimeout(menu_time);
        //img
        $this.find('img').stop().animate({ 'top': '-600px' }, 400);
        $this.find('.cc_title').stop().animate({ 'top': '270px' }, 400);
        //cc_submenu ul
        $this.find('.cc_submenu > ul').stop().animate({ 'height': '0px' }, 400);
    }

    //back to menu button - unfolds the menu
    $('#cc_back').bind('click', unfold);


    /**
    hides all the menu items except the clicked one
    after that, the content is shown
    */
    function fold($li_e) {
        var $item = $li_e.closest('.cc_item');

        var d = 100;
        var step = 0;
        $items.unbind('mouseenter mouseleave');
        $items.not($item).each(function () {
            var $item = $(this);
            $item.stop().animate({
                'marginLeft': '-231px'
            }, d += 200, function () {
                ++step;
                if (step == cnt_items - 1) {
                    folded = true;
                    showContent($li_e.attr('class'));
                }
            });
        });
    }

    /**
    shows all the menu items 
    also hides any item's image / submenu 
    that might be displayed
    */
    function unfold() {
        $('#cc_content').stop().animate({ 'left': '-693px' }, 600, function () {
            var d = 100;
            var step = 0;
            $items.each(function () {
                var $item = $(this);

                $item.find('img')
					 .stop()
					 .animate({ 'top': '-600px' }, 200)
					 .andSelf()
					 .find('.cc_submenu > ul')
					 .stop()
					 .animate({ 'height': '0px' }, 200)
					 .andSelf()
					 .find('.cc_title')
					 .stop()
					 .animate({ 'top': '270px' }, 200);

                $item.stop().animate({
                    'marginLeft': '0px'
                }, d += 200, function () {
                    ++step;
                    if (step == cnt_items - 1) {
                        folded = false;
                        $items.unbind('mouseenter')
							  .bind('mouseenter', m_enter)
							  .unbind('mouseleave')
							  .bind('mouseleave', m_leave);

                        hideContent();
                    }
                });
            });
        });
    }

    //function to show the content
    function showContent(idx) {
        $('#cc_content').stop().animate({ 'left': '231px' }, 200, function () {
            $(this).find('.' + idx).fadeIn();
        });
    }

    //function to hide the content
    function hideContent() {
        $('#cc_content').find('div.block').hide();
    }

});