var autoPlay = 1; // 1-Autoplay ON, 0-Autoplay OFF
var interval = 8; // Autoplaying delay in seconds
var dir = "images/gallery"; // Directory where the images are located

function thumbFadeIn(el) {
    $(el).css("visibility", "visible").hide().fadeIn(500);
}
$(function () {
    var current = 0,
        currPage = 1,
        pages = 0,
        imgCount = 0,
        autoPlayState = false,
        inter, images = ["file", "title", "tag"],
        thumbs = [];
    images["file"] = [];
    images["title"] = [];
    images["tag"] = [];
    interval = interval * 1000;

    $("#images div").each(function(i){
        images["file"][i] = dir + "/" + $(this).attr("class");
        images["title"][i] = $(this).attr("title");
        images["tag"][i] = "<img width='600' height='400' src='" + images["file"][i] + "' alt='" + images["title"][i] + "' />";
        thumbs[i] = "<img onload='thumbFadeIn(this);' height='40' width='58' src='" + images["file"][i] + "' alt='" + images["title"][i] + "' />";
    });
    $("#images").remove();
    imgCount = images["file"].length;
    sliderBuild();


    $(".arrowBigLeft, .arrowBigRight").css("opacity", 0.5).hover(function () {
        $(this).stop().fadeTo(200, 1);
        if (autoPlayState) sliderStop();
    }, function () {
        $(this).stop().fadeTo(300, 0.5);
        if (autoPlayState) sliderPlay();
    });
    $(".arrowSmallLeft, .arrowSmallRight").hover(function () {
        if (autoPlayState) sliderStop();
    }, function () {
        if (autoPlayState) sliderPlay();
    });
    $(".thumbsInner img").live({
        mouseenter: function () {
            $(this).fadeTo(150, 0.4);
            if (autoPlayState) sliderStop();
        },
        mouseleave: function () {
            $(this).fadeTo(20, 1);
            if (autoPlayState) sliderPlay();
        }
    });
    $(".control a").hover(function () {
        $(this).stop().fadeTo(200, 0.7);
    }, function () {
        $(this).stop().fadeTo(300, 1);
    });

    function sliderBuild() {
        pages = Math.ceil(imgCount / 10);
        $(".pagination").html("Total Images : " + imgCount + "&nbsp;&nbsp;&nbsp;PAGE : <span class='currPage'>1</span>/" + pages);
        paginate(0);
        $(".seconds").html("<big>" + interval / 1000 + "</big> sec");
        if (autoPlay == 1) {
            autoPlayState = true;
            window.setTimeout(function(){$(".control a").trigger("click");},200);
        }
    }

    function sliderPlay() {
        countDownStart();
        $(".progress div").css("width", 0).animate({
            "width": 80
        }, interval, "linear", function () {
            $(".arrowBigRight").trigger("click");
            sliderPlay();
        });
    }

    function sliderStop() {
        $(".progress div").css("width", 80).stop(true, false);
        window.clearInterval(inter);
        $(".seconds big").html(interval / 1000);
    }

    function countDownStart() {
        var s = interval / 1000;
        $(".seconds big").html(s);
        window.clearInterval(inter);
        inter = window.setInterval(function () {
            s--;
            $(".seconds big").html(s);
        }, 1000);
    }

    function imageLoad(n) {
        $(".position").animate({
            "left": 26 + (n % 10) * 59.8
        }, 200);
        $(".mainImageInner").html(images["tag"][n]).find("img").hide().fadeTo(1500, 1);
        $(".title2").html(images["title"][n]);
    }

    function paginate(n) {
        currPage = Math.ceil((n + 1) / 10);
        $(".currPage").html(currPage);
        $(".thumbsInner").html((thumbs.slice(10 * (currPage - 1), 10 * currPage)).join("")).find("img:last").css("margin", 0);
        imageLoad(n);
    }

    $(".thumbsInner img").live("click", function () {
        current = ((currPage - 1) * 10) + $(this).index();
        imageLoad(current);
    });

    $(".arrowSmallLeft, .arrowSmallRight").click(function () {
        if ($(this).hasClass("arrowSmallLeft")) {
            if (currPage == 1) return false;
            else currPage--;
        } else {
            if (currPage == pages) currPage = 1;
            else currPage++;
        }
        current = (currPage - 1) * 10;
        paginate(current);
    });

    $(".arrowBigLeft, .arrowBigRight").click(function () {
        if ($(this).hasClass("arrowBigLeft")) {
            if (current == 0) return false;
            if (current % 10 == 0) {
                current--;
                paginate(current);
            } else {
                current--;
                imageLoad(current);
            }
        } else {
            if (current == imgCount - 1) {
                current = 0;
                paginate(current);
            } else if (current % 10 == 9) {
                current++;
                paginate(current);
            } else {
                current++;
                imageLoad(current);
            }
        }
    });

    $(".control a").click(function () {
        if ($(this).hasClass("paused")) {
            $(this).removeClass("paused").html("Pause");
            autoPlayState = true;
            sliderPlay();
        } else {
            $(this).addClass("paused").html("Slide ON");
            autoPlayState = false;
            sliderStop();
        }
    });

});