/// <reference path="jquery-1.3.2-vsdoc.js" />
$(Ini);

function Ini() {
    if( $(".projectSlide").length ){  
        var Projects = new Array;
        var ImageContainer = $("<div class='imageContainer'></div>");
        var ProjectContainer = $("<div class='projectContainer'></div>");
        var MyImage = $("<img />");

        //Get data from html
        $(".projectSlide>li").each(function() {

            var Project = {
                Projectname: $(this).find("h2").html(),
                Images: new Array
            }

            $(this).find(".img").each(function() {
                Project.Images.push({
                    Title: $(this).find('.title').text(),
                    Path: $(this).find('.path').text()
                });
            });

            Projects.push(Project);
        });

        //Try and stop loading the images
        $(".projectSlide img").removeAttr("src");

        //Remove all the html from the projectSlide
        $(".projectSlide").after(ProjectContainer.append(ImageContainer)).remove();

        //Photo# Title
        var photoTitle = $("<h2 class='photoTitle'>Photo #</h2>");
        var projectTitle = $("<h2 class='projectTitle'>Projects</h2>")
        
        ProjectContainer.append(photoTitle).append(projectTitle);

        var ProjectChange = true;
        var pp = Math.floor(Math.random() * Projects.length);
        
        var ii = 0;

        var AdjustCounters = function() {
            if (ii != Projects[pp].Images.length - 1) {
                ii++;
                ProjectChange = false;
            }
            else {
                ii = 0;
                ProjectChange = true;
                pp = pp != Projects.length - 1 ? pp + 1 : 0;
            }
        };


        var createProjectSelector = function() {
            var ProjectSelector = $("<ul class='projectSelector'></ul>");

            $(Projects).each(function(i, val) {
                ProjectSelector.append($("<li id='project-" + i + "'>&nbsp;</li>").click(function() {
                    pp = i;
                    ii = 0;
                    MyImage.css("opacity", 1).remove();
                    ProjectChange = true;
                    
                    Animate.Stop();
                    Animate.Start();
                }).css("opacity", ".25"));
            });

            ProjectContainer.append(ProjectSelector);
        };

        createProjectSelector();


        function createImageSelector() {
            var ImageSelector = $("<ul class='imageSelector'></ul>");

            $(Projects[pp].Images).each(function(i, val) {
                ImageSelector.append($("<li id='image-" + i + "'>&nbsp;</li>").click(function() {
                    ii = i;
                    MyImage.css("opacity", 1).remove();
                    Animate.Stop();
                    Animate.Start();
                }).css("opacity", ".25"));
            });

            projectTitle.html(Projects[pp].Projectname.replace("--amp--", "&"));

            $(".imageSelector").remove();
            ProjectContainer.append(ImageSelector);
        };

        function SelectImageSelector() {
            $(".imageSelector .selected").removeClass("selected").css("opacity", ".25");
            $(".imageSelector li:eq(" + ii + ")").addClass("selected").css("opacity", "1");
        };

        function SelectProjectSelector() {
            $(".projectSelector .selected").removeClass("selected").css("opacity", ".25");
            $(".projectSelector li:eq(" + pp + ")").addClass("selected").css("opacity", "1");
        };


        var Animate = {
            Start: function() {
                if (ProjectChange) {
                    createImageSelector();
                };

                SelectProjectSelector();
                SelectImageSelector();

                var That = this;
                MyImage.attr("src", Projects[pp].Images[ii].Path).hide();
                
                ImageContainer.append(MyImage.fadeIn(That.Middle()));
            },

            Middle: function() {
                var That = this;
                this.Wait = setTimeout(function() {
                    That.End();
                }, 5000);
            },

            End: function() {
                var That = this;
                MyImage.fadeOut(function() {
                    $(this).remove();
                    AdjustCounters();
                    That.Start();
                });
            },

            Stop: function() {
                MyImage.stop();
                clearTimeout(this.Wait);
            }
        };

        Animate.Start();

    };
};