var Gallery = function(TargetId) {
    this.TargetId = TargetId;
    this.Images = Array();
    this.ShowImageDuration = 6000;
    this.AnimationSpeed = "fast";
    var _this = this;
    this.CycleSpeed = 100;
    this.AnimationTimer = setTimeout(function() { _this.__cycle(); }, this.CycleSpeed);
    this.CurrentMode = "stop";
    this.CurrentImage = 0
    $(document).ready(function() {
        _this.Render();
    });
    this.TimeCounter = 0;
}

Gallery.prototype.Render = function() {
    var selector = "#" + this.TargetId;
    var _this = this;
    $(selector).html(
        "<div id='mainwindow'>" +
            "<div id='captioncontainer'>&nbsp;</div>" +
            "<div id='mainphoto'>" +
            "</div>" +
            "<div id='thumbnails'>" +
            "</div>" +
        "</div>"
    );

    for (var i = 0; i < this.Images.length; i++) {
        $("#thumbnails").append("<img id='tn" + i + "' rel='" + i +
            "' class='slideshowthumbnail' src='" +
            this.Images[i].ImagePath + "' alt='" +
            this.Images[i].Caption + "' />");
    }

    $(".slideshowthumbnail").click(function() {
        pause = true;
        _this.SelectPhoto($(this).attr("rel"));

    });
    $(".slideshowthumbnail").mouseout(function() {
        pause = false;
    });


}

Gallery.prototype.AddImage = function(GalleryImage) {
    this.Images[this.Images.length] = GalleryImage;
}

Gallery.prototype.__cycle = function() {
    var _this = this;
    _this.TimeCounter += _this.CycleSpeed;

    if (this.CurrentMode == "play") {
        if (_this.TimeCounter >= _this.ShowImageDuration) {
            _this.SelectPhoto(_this.CurrentImage);
            _this.CurrentImage = parseInt(_this.CurrentImage) + parseInt(1);
        }
    }
    _this.AnimationTimer = setTimeout(function() { _this.__cycle(); }, _this.CycleSpeed);
}

Gallery.prototype.__setSelectedPhoto = function(index) {
    if (index < 0 || index >= this.Images.length)
        index = 0;
    this.CurrentImage = parseInt(index);

}

Gallery.prototype.SelectPhoto = function(index) {
    var _this = this;
    clearTimeout(_this.inTimeout);
    clearTimeout(_this.outTimeout);

    //DISPLAY THE IMAGE
    _this.__setSelectedPhoto(index);

    $("#mainphoto").fadeOut("fast", function() {
        $("#tn" + _this.CurrentImage).removeClass("thumbnailselected");


        var html = "<img class='slideshowprimary' src='" +
                    _this.Images[_this.CurrentImage].ImagePath + "' alt='" +
                    _this.Images[_this.CurrentImage].Caption + "' />";
        var captionHtml = "<div class='imgcomment' id='caption'>" +
                            _this.Images[_this.CurrentImage].Caption + "</div>";

        $("#captioncontainer").html(captionHtml);

        $("#mainphoto").html(html);

        $("#mainphoto").mouseover(function() {
            //_this.PreviousMode = _this.CurrentMode;
            _this.CurrentMode = "pause";
        });

        $("#mainphoto").mouseout(function() {
            _this.CurrentMode = typeof _this.PreviousMode != 'undefined' ? _this.PreviousMode : "play";
        });

        $("#tn" + _this.CurrentImage).addClass("thumbnailselected");

        _this.inTimeout = setTimeout(function() {
            $("#caption").fadeIn("fast");
            $("#caption").fadeTo("slow", 0.73);
            _this.outTimeout = setTimeout(function() {
                $("#caption").fadeOut("slow");
            }, 4000);
        }, 400);


        $("#mainphoto").fadeIn();
        _this.TimeCounter = 0;
    });
}

Gallery.prototype.Play = function() {
    this.CurrentMode = "play";
}

Gallery.prototype.Stop = function() {
    this.CurrentMode = "stop";
}



var GalleryImage = function(ImagePath, Caption) {
    this.ImagePath = ImagePath;
    this.Caption = Caption;
}