﻿/**
*  Author:  Marciano Studio
*  Web: www.marciano.mx
*  Version: 1.0
*  Last Modified: July 31th, 2009
*/

//
// CREATES A GALLERY 
//
function mGallery(idImageContainer) {
    // PUBLIC PROPERTIES
    this.imageContainer = document.getElementById(idImageContainer);
    this.innerElements = getElements(this.imageContainer);
    this.actualPhoto = 0;
    this.totalPhotos = this.innerElements != undefined ? this.innerElements.length - 1 : 0;
    this.timeOffset = 5000;
    this.interval = 0;
    this.firstPlay = true;

    //PUBLIC METHODS
    this.play = Play;
    this.stop = Stop;
    this.next = Next;
    this.back = Back;


    // Constructor
    initElements(this.innerElements);
}



// PUBLIC METHODS

/* RETURNS AN ELEMENT OF THE DOCUMENT */

/* RETURNS ALL THE CHILDS OF A HTML NODE */
function getElements(container) {
    var elements = new Array();
    if (container != undefined) {
        for (var i = 0; i < container.childNodes.length; i++) {
            if (container.childNodes[i].tagName != undefined && container.childNodes[i].tagName != null) {
                if (container.childNodes.length > 1) {
                    if ((i - 2) < container.childNodes.length) {
                        elements.push(container.childNodes[i]);
                    }
                }
                else {
                    elements.push(container.childNodes[i]);
                }

            }
        }
    }
    return elements;
}


/*  SETS ALL THE IMAGES TO DISPLAY NONE, 
*  LEAVING ONLY VISIBLE THE FIRST IMAGE 
*/
function initElements(elements) {
    for (var i = 0; i < elements.length; i++) {
        if (i > 0)
            $(elements[i]).css("display", "none");
        elements[i].id = "#marcianoImage_" + i;
    }
}



/********************************************
*                                          *
*           GALLERY CONTROLS               *
*                                          *
********************************************/

function Play() {
    if (this.totalPhotos > 1) {
        var delegateObject = this;
        this.interval = setInterval(function() { delegateObject.next(); }, this.timeOffset);
        if (this.firstPlay == false) {
            this.next();
        }
        else {
            this.firstPlay = true;
        }
    }
}


function Stop() {
    clearInterval(this.interval);
    this.interval = 0;
}


function Next() {
    setImageToInvisible(this.innerElements[this.actualPhoto]);

    if (this.actualPhoto < (this.totalPhotos - 1) && this.actualPhoto >= 0) {
        this.actualPhoto++;
    }
    else {
        this.actualPhoto = 0;
    }
    setImageToVisible(this.innerElements[this.actualPhoto]);
}


function Back() {
    setImageToInvisible(this.innerElements[this.actualPhoto]);
    if (this.actualPhoto > 0) {
        this.actualPhoto--;
    }
    else {
        this.actualPhoto = (this.totalPhotos - 1);
    }
    setImageToVisible(this.innerElements[this.actualPhoto]);
}


/********************************************
*                                          *
*           ANIMATION CONTROLS             *
*                                          *
********************************************/

function setImageToVisible(imageContainer) {
    $(imageContainer).css("z-index", "9");
    $(imageContainer).css("display", "block");
    $(imageContainer).css("position", "relative");
    $(imageContainer).css("opacity", "0");
    var options =
    {
        top: "0px",
        left: "0px",
        opacity: 1,
		'text-align':"center"
    }
    $(imageContainer).animate(options, 1000, "quadEaseOut", function() { $(this).css("z-index", "10"); });
}

function setImageToInvisible(imageContainer) {
    $(imageContainer).css("position", "relative");
    $(imageContainer).css("z-index", "8");
    var options =
    {
        top: "0px",
        left: "0px",
        opacity: 0
    }
    $(imageContainer).animate(options, 500, "quadEaseIn", function() { $(this).css("display", "none"); $(this).css("z-index", "0"); });
}

