$(document).ready(function()
{
    $(".home-gallery-holder").hover(
        function(event)                             // mouse over
        {
            // pass
        },
        function(event)                             // mouse out
        {
            $(this).find('li').removeClass('active').removeClass('no-active');

            $(this).find(".switch-block").stop(false, true);
            $(this).find(".holder").stop(false, true);
            $(this).find(".img-holder>.img-frame").stop(false, true);
        }
    );
    
    $(".home-gallery-holder > li").hover(
        function(event)                         // mouse over
        {
            $(this).siblings().stop();

            // assign states with active/inactive classes
            $(this).addClass("active");
            $(this).siblings().addClass("no-active");


            // perform actions depending on which side the mouse is hovering
            var isAdults = false;
            if ($(this).hasClass('left'))
            {
                isAdults = true;
                /*
                $(this).find(".switch-block").show("slide", { direction : 'left' }, "fast");
                $(this).find(".holder").show("slide", {direction : 'left' }, "fast");
                $(this).find(".img-holder>.img-frame").animate({ left: '+=10px' }, "slow");
                */
            }
            else if ($(this).hasClass('right'))
            {
                /*
                $(this).find(".switch-block").show("slide", { direction : 'right' }, "fast");
                $(this).find(".holder").show("slide", {direction : 'right' }, "fast");
                */
            }

            // $(this).find('.switch-block').css('display', 'block');       // remove this to have the switch-block stay as soon as the main panel is hovered.

            // setup photo gallery
            var gallery = $(this).find(".img-frame")[0];
            var switch_block = $(this).find(".switch-block")[0];

            // - setup controls
            var move_width = 0;
            var direction  = "";
            $(switch_block).find('a').click(function(e)
            {
                // determine current active state
                var current_index = $(switch_block).find("li").index($(this).parent().siblings(".active"));

                // assign active state
                e.preventDefault();
                $(this).parent().addClass("active");
                $(this).parent().siblings().removeClass("active");

                // determine index of the switch clicked
                var selected_index = $(switch_block).find("li").index($(this).parent());
                if(current_index < 0) current_index = selected_index;
                $(gallery).find("li").each(function(index, element)
                {
                    if ((index >= current_index) && (index < selected_index))
                    {
                        move_width += $(element).outerWidth(true);
                        direction = "right";
                    }
                    else if((index >= selected_index) && (index < current_index))
                    {
                        move_width += $(element).outerWidth(true);
                        direction = "left";
                    }
                });

                // perform animation
                if (isAdults)
                {
                    if (direction == "left")
                        $($(gallery).find('ul').get(0)).animate({ marginLeft : '+=' + move_width });
                    else if (direction == "right")
                        $($(gallery).find('ul').get(0)).animate({ marginLeft : '-=' + move_width });
                }
                else
                {
                    if (direction == "left")
                        $($(gallery).find('ul').get(0)).animate({ marginLeft : '-=' + move_width });
                    else if (direction == "right")
                        $($(gallery).find('ul').get(0)).animate({ marginLeft : '+=' + move_width });
                }

                // bring active text to view
                var description = $($(gallery).find('li').get(selected_index)).find('img').attr('alt');
                var switch_text = $(switch_block).find('.switch-text > span');
                /*
                switch_text.fadeOut('fast', function()
                {
                    $(this).html(description);
                    $(this).fadeIn('fast');
                });*/
                $(switch_text).html(description);

                move_width = 0;
            });

            var active_anchor = $($(switch_block).find('.active').get(0));
            if (active_anchor.length == 0)
                $($(switch_block).find('a:first')).click();
            else
                $(active_anchor.find('a').get(0)).click();
            //$($(switch_block).find('a').get(0)).click(); // - on hover in, this makes the gallery go to first image
        },
        function(event)                         // mouse out
        {
            var switch_block = $(this).find(".switch-block")[0];
            //$($(switch_block).find('a').get(0)).click();    - on hover out, this makes the gallery go to first image

            // remove states by removing active/inactive classes
            $(this).removeClass("active");
            $(this).siblings().removeClass("no-active");

            // $(this).find('.switch-block').css('display', 'none'); // remove this to have the switch-block stay as soon as the main panel is hovered.

            if ($(this).hasClass('left'))
            {
                //$(this).find(".switch-block").hide("slide", { direction : 'left' }, "slow");
                $(switch_block).find("a:first").click();
            }
            else
            {
                //$(this).find(".switch-block").hide("slide", { direction : 'right' }, "slow");
                $(switch_block).find("a:first").click();
            }

        })
});