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

/**
 * Class for handling the display and navigation of a photoseries.
 * A photoseries consists of the photos, the thumbnails and the info texts.
 *
 * @param photoSelector
 * @param naviSelector
 * @param thumbnailSelector
 */
function PhotoSeries(photoSelector, naviSelector, thumbnailSelector)
{
    var photoSelector = photoSelector;
    var naviSelector = naviSelector;
    var thumbnailSelector = thumbnailSelector;

    var photos; // contains all photo objects
    var thumbnails; // contains all thumbnail objects
    var photosNum; // Number of photos in the series
    var addedImagesCount = 0; // counts the added images

    var currentPhotoId; // Id of currently displayed Photo
    var naviEnabled = false; // Stores if navi of photos is enabled

    var THUMB_HIGH = 1.0;
    var THUMB_LOW = 0.3;

    // behaviour of info button and texts controlled via infoButton
    var infoButton = new InfoButton('#containerInfo .infoButton a', '#containerInfo .infoText', '#containerInfo .infoText .content div.text');
    infoButton.init(undefined);

    /**
     * Inits the series
     * @param numberOfPhotos
     */
    this.init = function(numberOfPhotos)
    {
        photos = $(photoSelector);
        photosNum = numberOfPhotos;

        thumbnails = $(thumbnailSelector);
        initThumbails();
        hideAllThumbnails();
    }

    /**
     * Exits the photoseries.
     */
    this.exit = function ()
    {
        //
    }

    /**
     * Adds a new image.
     * The image is added to the background of the already existant photo div.
     * The function is called from the contentView.
     *
     * @param img The image to be added.
     */
    this.addImage = function (img)
    {
        $(photos[addedImagesCount]).css('background-image', 'url(' + img.src + ')');
        if (addedImagesCount == 0) showPhoto(0, true);
        showThumbnail(addedImagesCount);
        addedImagesCount ++;
    }

    /**
     * Inits the thumbnails.
     */
    var initThumbails = function ()
    {
        // Value of id only accessible to thumbnail, if binding takes place in its own function.
        // Else the value of id is the value of the var in the scope of this function
        for (var id = 0; id < thumbnails.length; id++)
        {
            bindTumbnail(id);
        }
    }

    /**
     * Attach the event handlers to a thumbnail
     * @param id
     */
    var bindTumbnail = function(id)
    {
        var thumbnail = $(thumbnails[id]);
        thumbnail.mouseenter(function()     { highlightThumbnail(id); });
        thumbnail.mouseleave(function()     { dimThumbnail(id); });
        thumbnail.click(function(event)     { showPhoto(id); event.preventDefault();});
    }

    /**
     * Hides all photos.
     */
    var hideAllPhotos = function()
    {
        photos.hide();
        dimAllThumbnails();
    }

    /**
     * Shows a photo.
     *
     * @param id The id of the photo.
     * @param doFade If true, photo fades in.
     */
    var showPhoto = function(id, doFade)
    {
        hideAllPhotos();
        var photo = $(photos[id]);
        photo.show();
        if (doFade)
        {
            photo.css({ opacity: 0 });
            photo.fadeTo(250, 1, 'swing');
        }
        currentPhotoId = id;
        updateNavi();
        highlightThumbnail(id);

        infoButton.setCurrentText(id);
    }

    /**
     * Shows the next photo.
     */
    var showNextPhoto = function()
    {
        var nextPhotoId = currentPhotoId + 1;
        if (nextPhotoId < addedImagesCount) showPhoto(nextPhotoId);
    }

    /**
     * Hides all thumbnails.
     * Is used for hiding the thumbnails of not yet loaded images.
     */
    var hideAllThumbnails = function()
    {
        thumbnails.css({ visibility: 'hidden'});
    }

    /**
     * Dims all thumbnails.
     */
    var dimAllThumbnails = function()
    {
        thumbnails.css({ opacity: THUMB_LOW });
    }

    /**
     * Dims a single thumbnail.
     * @param id
     */
    var dimThumbnail = function(id)
    {
        if (id != currentPhotoId) // don't dim current thumbnail
            $(thumbnails[id]).css({ opacity: THUMB_LOW });
    }

    /**
     * Shows a single thumbnail.
     * Used for displaying the thumbnail of the latest loaded image.
     * @param id
     */
    var showThumbnail = function(id)
    {
        $(thumbnails[id]).css({ visibility: 'visible'});
        $(thumbnails[id]).css({ opacity: 0 });
        var opac = (id == currentPhotoId) ? THUMB_HIGH : THUMB_LOW;
        $(thumbnails[id]).fadeTo(500, opac);
    }

    /**
     * Highlights a thumbnail.
     * @param id
     */
    var highlightThumbnail = function(id)
    {
        $(thumbnails[id]).css({ opacity: THUMB_HIGH });
    }

    /**
     * Diables or enables the photo navigation.
     * Depending on naviEnabled.
     */
    var updateNavi = function()
    {
        if(currentPhotoId == photosNum - 1 && naviEnabled)
        {
            disableNavi();
        }
        else if(!naviEnabled)
        {
            enableNavi();
        }
    }

    /**
     * Enables the photo navigation.
     */
    var enableNavi = function()
    {
        $(naviSelector + " img").wrap('<a href="#" title="" ></a>');
        $(naviSelector + " a").click( function(event)
        {
            showNextPhoto();
            event.preventDefault();
        });

        naviEnabled = true;
    }

    /**
     * Disables the photo navigation.
     */
    var disableNavi = function()
    {
        $(naviSelector + " a").unbind('click');
        $(naviSelector + " img").unwrap('a');
        naviEnabled = false;
    }


}