/*
 * (c) 2011 David Krause, Interaktive Gestaltung
 * http://www.interaktive-gestaltung.de
 */

/**
 * Class controls the index page of a section from category photo or film.
 *
 * @param linkSelector
 * @param targetSelector
 * @param textSelector
 */
function ThumbIndex(controller, linkSelector, targetSelector, textSelector)
{
    var _this = this;

    var controller = controller;
    var linkSelector = linkSelector; // the links (in this case the thumbnails), which controls the appearance of the target
    var targetSelector = targetSelector; // target = the whole infoText container whichs contains multiple texts
    var textSelector = textSelector; // the text = individual text for each photo

    var texts; // all the texts
    var links; // all the links (from the thumbnails)

    /**
     * Inits the texts and the link.
     */
    this.init = function()
    {
        texts = $(textSelector);
        links = $(linkSelector);

        initLinks();
    }

    this.exit = function ()
    {
         links.unbind('mouseenter');
         links.unbind('mouseleave');
         links.unbind('click');
    }

    /**
     * Inits the links.
     */
    var initLinks = function ()
    {
        for (var id = 0; id < links.length; id++)
        {
            bindLink(id);
        }
    }

    /**
     * Attach the event handlers to a link
     * @param id
     */
    var bindLink = function(id)
    {
        var link = $(links[id]);
        link.mouseenter(function()
        {
            controller.onThumbIndexLinkMouseenter(id);
        });

        link.mouseleave(function()
        {
            controller.onThumbIndexLinkMouseleave(id);
        });

        link.click(function(event)
        {
            controller.onThumbIndexLinkClick(id);
            event.preventDefault();
        });
    }

    /**
     * Shows the target (i.e. the whole info text container)
     *
     * @param textId Id of the text
     */
    this.showTarget = function(textId)
    {
        trace("showTarget " + textId);
        var target = $(targetSelector);
        target.stop();
        target.css('opacity', 1);

        target.show();

        showText(textId);

        // for ie8 fade bug
        if($.browser.msie)
        {
            var text = $(targetSelector + ' .content');
            text.show();
            text.css('opacity', 0.99);
        }
    }

    /**
     * Hides the target (i.e. the whole info text container)
     */
    this.hideTarget = function()
    {
        var fadeSpeed = 250;
        var target = $(targetSelector);
        target.fadeOut(fadeSpeed);

        // for ie8 fade bug
        if($.browser.msie)
        {
            var text = $(targetSelector + ' .content');
            text.fadeOut(fadeSpeed);
        }

        $('body').unbind('click');
    }

    /**
     * Shows a text.
     *
     * @param id
     */
    var showText = function (id)
    {
        hideAllTexts();
        texts.eq(id).show();
    }

    /**
     * Hides all Texts.
     */
    var hideAllTexts = function ()
    {
        texts.hide();
    }

}