﻿/*Written by Courtney R. S. May 2011
    Design By Courtney (www.designbycourtney.com)
    courtney.designbycourtney@gmail.com 
    May be distributed and used as you please as long as my information is not removed.*/

$(document).ready(function () {
    //NOTE: in the chosen directory, the first image must be named 0, and all images following it must be in numerical order.
    var directory = "Slideshow/directory"; //image directory
    var extension = ".jpg"; //all image extensions must be the same.
    var max = 6; //name of the last image in the sequence
    var fadeInSpeed = 1000; //milliseconds : 1000 = 1 second
    var fadeOutSpeed = 2000; //milliseconds : 1000 = 1 second
    var delayTime = 2000; //delay time (how long the image 'sits there' before fading out to the next image)

    ///don't modify

    var i = 0; //do not modify
    var clicked = -1;
    var myImages = new Array();

    preloadPaths();
    fadeIn();

    function fadeIn() {
        try {
            var test = myImages[i].dbcIsLoaded;
        }
        catch (Error) {
            alert('Error. Image invalid.');
        }

        if (!myImages[i].dbcIsLoaded) {
            setTimeout(fadeIn, 1000);
            return;
        }
		updateSelector();
        var containerRatio = $('#imageContainer').width() / $('#imageContainer').height();
        var currentImage = myImages[i];
        if (currentImage.width > $('#imageContainer').width() || currentImage.height > $('#imageContainer').height()) {
            if (currentImage.width < currentImage.height) {
                var imageRatio = currentImage.width / currentImage.height;
                if (imageRatio < containerRatio) {
                    $('#image').height($('#imageContainer').height());
                    $('#image').width($('#imageContainer').height() * imageRatio);
                }
                else {
                    var ratio = currentImage.height / $('#imageContainer').height();
                    var height = currentImage.height * ratio;
                    $('#image').height(height);
                    $('#image').width(height * imageRatio);
                }
            }
            else if (currentImage.width > currentImage.height) {
                var imageRatio = currentImage.width / currentImage.height;
                if (imageRatio < containerRatio) {
                    $('#image').height($('#imageContainer').height());
                    $('#image').width($('#imageContainer').height() * imageRatio);
                }
                else {
                    var ratio = $('#imageContainer').width() / currentImage.width;
                    var width = currentImage.width * ratio;
                    $('#image').width(width);
                    $('#image').height(width * (1 / imageRatio));
                }
            }
        }
        else {
            $('#image').height(currentImage.height);
            $('#image').width(currentImage.width);
        }
		
		//$('#slidesubtitle').html('subtitle : ' + (i + 1));
		//$('#slidetitle').html('Title : ' + (i + 1));
        $('#image').css("background-image", "url(" + currentImage.src + ")"); //.extension
        $('#image').fadeTo(fadeInSpeed, 1.0, function () {
            fadeOutImage();
        });
    }
	
	function updateSelector() {
		for (var selector = 0; selector <= max; selector++) {
			$('#b' + (selector).toString()).fadeTo(100, 1);
			$('#b' + (selector)).attr('disabled', false);
		}
        $('#b' + i).fadeTo(100, 0.5);
    }

    function preloadPaths() {
        for (var imageIndex = 0; imageIndex <= max; imageIndex++) {
            var path = directory + '/' + imageIndex + extension;
            var image = new Image();
            image.src = path;

            image.dbcImageIndex = imageIndex;
            myImages[imageIndex] = image;
            myImages[imageIndex].dbcIsLoaded = false;
            myImages[imageIndex].onload = function () {
                this.dbcIsLoaded = true;
            }
        }
	}

    function fadeOutImage() {
        $('#image').fadeTo(delayTime, 1.0, function () {
            fadeOutCode();
        });
    }

    function fadeOutCode() {
        $('#image').fadeOut(fadeOutSpeed, function () {
            assignNextImage();
            fadeIn();
        });
    }

    function assignNextImage() {
        if (clicked > -1) {
            var difference = clicked - i;
			
            if (difference > 0) {
                for (var count = 0; count < difference; count++) {
                    i++;
                }
            }
            else if (difference < 0) {
				difference = i - clicked;
                for (var count = 0; count < difference; count++) {
                    i--;
                }
            }
            clicked = -1;
        }
        else { //if nothing was clicked.
            if (i == max) {
                i = 0;
            }
            else
                i++;
        }
    }

    function forceFadeOut() {
        $('#imageContainer').stop();
        $('#image').stop().fadeOut(100);
        fadeOutCode();
    }

    $('#b0').click(function () {
        clicked = 0;
        forceFadeOut();
    });

    $('#b1').click(function () {
        clicked = 1;
        forceFadeOut();
    });

    $('#b2').click(function () {
        clicked = 2;
        forceFadeOut();
    });

    $('#b3').click(function () {
        clicked = 3;
        forceFadeOut();
    });

    $('#b4').click(function () {
        clicked = 4;
        forceFadeOut();
    });

    $('#b5').click(function () {
        clicked = 5;
        forceFadeOut();
    });

    $('#b6').click(function () {
        clicked = 6;
        forceFadeOut();
    });
});
