/*
Plugin name tranzify 1.0
Copyright (c) 2011 05 30
License(s)
*/
;
(function($) {
    $.tranzify = {
        defaults: {
            transitionWidth: 40,
            transitionHeight: "100%",
            containerID: "overlay",
            transitionType: "venetian",
            prevID: "prev",
            nextID: "next",
            visibleClass: "visible"
        }
    };
})(jQuery);

$.fn.extend({
    tranzify: function(userConfig) {
        var config = (userConfig) ? $.extend({}, $.tranzify.defaults,
            userConfig) : $.tranzify.defaults;
        config.selector = "#" + this.attr("id");
        config.multi = parseInt(this.width()) / config.transitionWidth;
        $.tranzify.createUI(config);
        return this;
    }
});
$.tranzify.createUI = function(config) {
    var imgLength = $(config.selector).find("img").length,
    prevA = $("<a></a>", {
        id: config.prevID,
        href: "#",
        html: "&laquo;",
        click: function(e) {
            e.preventDefault();
            $(config.selector).find("a").css("display", "none");
            $.tranzify.createOverlay(config);
            var currImg = $("." + config.visibleClass, $(config.selector));
            if(currImg.prev().filter("img").length > 0) {
                currImg.removeClass(config.visibleClass).prev().addClass
                (config.visibleClass);
            } else {
                currImg.removeClass(config.visibleClass);
                $(config.selector).find("img").eq(imgLength -
                    1).addClass(config.visibleClass);
            }
            $.tranzify.runTransition(config);
        }
    }).appendTo(config.selector),
    nextA = $("<a></a>", {
        id: config.nextID,
        href: "#",
        html: "&raquo;",
        click: function(e) {
            e.preventDefault();
            $(config.selector).find("a").css("display", "none");
            $.tranzify.createOverlay(config);
            var currImg = $("." + config.visibleClass, $(config.selector));
            if(currImg.next().filter("img").length > 0) {
                currImg.removeClass(config.visibleClass).next().addClass(
                    config.visibleClass);
            } else {
                currImg.removeClass(config.visibleClass);
                $(config.selector).find("img").eq(0).addClass(
                    config.visibleClass);
            }
            $.tranzify.runTransition(config);
        }
    }).appendTo(config.selector);
};

$.tranzify.createOverlay = function(config) {
    var posLeftMarker = 0,
    bgHorizMarker = 0
    overlay = $("<div></div>", {
        id: config.containerID
    });
    for (var x = 0; x < config.multi; x++) {
        $("<div></div>", {
            width: config.transitionWidth,
            height: config.transitionHeight,
            css: {
                backgroundImage: "url(" + $("." + config.visibleClass,
                    $(config.selector)).attr("src") + ")",
                backgroundPosition: bgHorizMarker + "px 0",
                left: posLeftMarker,
                top: 0
            }
        }).appendTo(overlay);
        bgHorizMarker -=config.transitionWidth;
        posLeftMarker +=config.transitionWidth;
    }
    overlay.insertBefore("#" + config.prevID);
};

$.tranzify.runTransition = function(config) {
    var transOverlay = $("#" + config.containerID),transEls = transOverlay.children(),len = transEls.length - 1;
    switch(config.transitionType) {
        case "venetian":
            transEls.each(function(i) {
                transEls.eq(i).animate({
                    width: 0
                }, "slow", function() {
                    if (i === len) {
                        transOverlay.remove();
                        $(config.selector).find("a").css("display", "block");
                    }
                });
            });
            break;
        case "strip":
            var counter = 0;
            function strip() {
                transEls.eq(counter).animate({
                    height: 0
                }, 150, function() {
                    if (counter === len) {
                        transOverlay.remove();
                        $(config.selector).find("a").css("display", "block");
                    } else {
                        counter++;
                        strip();
                    }
                });
            }
            strip();
    }
};
$(document).ready(function() {
    $("#viewer").wrapInner("<div id=\"slide\"></div>");
    var container = $("#slider"),
    prev = container.find("#prev"),
    prevChild = prev.find("a"),
    next = container.find("#next").removeClass("hidden"),
    nextChild = next.find("a"),
    slide = container.find("#slide"),
    key = "image1",
    details = {
        image1: {
            position: 0,
            title: slide.children().eq(0).attr("alt")
        },
        image2: {
            position: -400,
            title: slide.children().eq(1).attr("alt")
        },
        image3: {
            position: -800,
            title: slide.children().eq(2).attr("alt")
        },
        image4: {
            position: -1200,
            title: slide.children().eq(3).attr("alt")
        },
        image5: {
            position: -1600,
            title: slide.children().eq(4).attr("alt")
        }
    };
    $("<h2>", {
        id: "title",
        text: details[key].title
    }).prependTo("#slider");


    function postAnim(dir) {
        var keyMatch = parseInt(key.match(/\d+$/));
        (parseInt(slide.css("left")) < 0) ? prev.show() : prev.hide();
        (parseInt(slide.css("left")) === -1600) ? next.hide() :
        next.show();
        if (dir) {
            var titleKey = (dir === "back") ? keyMatch - 1 : keyMatch + 1;
            key = "image" + titleKey;
        }
        container.find("#title").text(details[key].title);
        container.find(".active").removeClass("active");
        container.find("a[href=#" + key + "]").addClass("active");
    };

    $("#ui li a").not(prevChild).not(nextChild).click(function(e){
        e.preventDefault();
        key = $(this).attr("href").split("#")[1];
        slide.animate({
            left: details[key].position
        }, "slow", "easeOutBack", postAnim);
    });
    nextChild.add(prevChild).click(function(e){
        e.preventDefault();
        var arrow = $(this).parent();
        if (!slide.is(":animated")) {
            slide.animate({
                left: (arrow.attr("id") === "prev") ? "+=400" : "-=400"
            }, "slow", "easeOutBack", function(){
                (arrow.attr("id") === "prev") ? postAnim("back") :
                postAnim("forward")
            });
        }
    });
});