// -----------------------------------------------------------------------
// eros@recoding.it
// showcase 1.0
//
// 27/07/2009 - Added asynchronous loading of images
// 26/06/2009 - some new implementations
// 19/06/2009 - standardization
// 08/06/2009 - Initial sketch
//
// requires jQuery 1.3.x
//------------------------------------------------------------------------

(function($) {
    $.fn.showcase = function (options) {
        var $container = this;

        // Retrieve option
        var opt;
        opt = $.extend({}, $.fn.showcase.defaults, options);
        if (options && options.animation) {  
            opt.animation = $.extend({}, $.fn.showcase.defaults.animation, options.animation); 
            if (!/horizontal-slider|vertical-slider|fade/.test(opt.animation.type)) 
            {
                opt.animation.type = "horizontal-slider";
            }
        }
        if (options && options.navigator) { 
            opt.navigator = $.extend({}, $.fn.showcase.defaults.navigator, options.navigator); 
            
            if (!/top-left|top-right|bottom-left|bottom-right/.test(opt.navigator.position)) 
            {
                opt.navigator.position = "top-right";
            }
            
            if (!/horizontal|vertical/.test(opt.navigator.orientation)) 
            { 
                opt.navigator.position = "horizontal";
            }
            
            if (options.navigator.item) { opt.navigator.item = $.extend({}, $.fn.showcase.defaults.navigator.item, options.navigator.item);  }
        }
        if (options && options.titleBar) { 
            opt.titleBar = $.extend({}, $.fn.showcase.defaults.titleBar, options.titleBar); 
            if (options.titleBar.css) { opt.titleBar.css = $.extend({}, $.fn.showcase.defaults.titleBar.css, options.titleBar.css);  }
        }
        
        // Check loading mode.
        // If there's something in opt.images[], I'll load them asynchronously, 
        // it will be nice to have opt.width and opt.height setted, in order to define the $container sizes
        if (opt.images.length != 0) {
            $container.css({ width: opt.width, height: opt.height, overflow: "hidden" });
            for (var i in opt.images) {
                var img = new Image();
                img.src = opt.images[i].url;
                img.alt = opt.images[i].description || "";
                img.title = opt.images[i].title || "";
                var $link = $("<a />").attr("href", opt.images[i].link || "#");
                $link.append(img);
                $container.append($link);
            }
        }
        
        // Check loading state of #1 image
        if ($container.find("img:first")[0].complete) {
            $.fn.showcase.start($container, opt);
        }
        else {
            $container.find("img:first").load( function() {
                $.fn.showcase.start($container, opt);
            });
        }
    }
    
    $.fn.showcase.start = function($container, opt) {
        // Define local vars
        var index = 0;                             
        var nImages = $container.find("img").length;
        var $fi = $container.find("img:first");
        var imagesize = { width: $fi.removeAttr("width").width(), height: $fi.removeAttr("height").height() };

        $container.css({ position: "relative", 
                         overflow: "hidden",
                         width: imagesize.width,
                         height: imagesize.height,
                         border: opt.border })
            .find("a").css({ position: "absolute", top: "0", left: "0" })
                .find("img").css("border", "0px");
    
        var $slider = $("<div id='slider' />").css({ position:"absolute" });
        var $divNavigator = $("<div id='navigator' />").css({
            position: "absolute", 
            "z-index": 2000,
            
            padding: opt.navigator.padding
        });
        
        switch (opt.navigator.position)
        {
            case "top-left": $divNavigator.css({ top: "10px", left: "10px" });
                break;
            case "top-right": $divNavigator.css({ top: "10px", right: "10px" });
                break;
            case "bottom-left": $divNavigator.css({ bottom: "10px", left: "10px" });
                break;
            case "bottom-right": $divNavigator.css({ bottom: "15px", right: "10px" });
                break;
        }
        
        $container.find("a").wrapAll($slider).each( function(i) {
            switch (opt.animation.type)
            { 
                case "horizontal-slider":
                    $(this).css("left", i*imagesize.width);
                    break;
                case "vertical-slider":
                    $(this).css("top", i*imagesize.height);
                    break;
                case "fade":
                    $(this).css({ top: "0", left: "0", opacity:1, "z-index": 1000-i });
                    break;
            }
            
            var $navElement = $("<a href='#'></a>")
                                .click( function() {
                                    $.fn.showcase.showImage(i, $container, imagesize, opt);
                                    index = i;
                                    return false;
                                }).appendTo($divNavigator);
            
            if (opt.navigator.item.cssClass) { $navElement.attr("class", opt.navigator.item.cssClass); }
            else {
                $.extend({}, $navElement.css, opt.navigator.item);
                $navElement.css({ 
                    display: "block",
                    //"text-decoration": opt.navigator.item.textDecoration,
                    //"-moz-outline-style": "none",
                    width: "15px", 
                    height: "15px", 
                    //lineHeight: opt.navigator.item.lineHeight,
                    //verticalAlign: opt.navigator.item.middle,
                    //backgroundColor: opt.navigator.item.backgroundColor,
                    //backgroundImage: opt.navigator.item.backgroundImage,
                    padding: opt.navigator.item.padding,
                    border: opt.navigator.item.border,
                    margin: opt.navigator.item.margin
                });
                //if (opt.navigator.item.borderRounded) { $navElement.css({ "-moz-border-radius": "4px", "-webkit-border-radius": "4px", "behavior": "url(border-radius.htc)", "border": "none" }); }
                switch (opt.navigator.orientation) 
                {
                    case "horizontal":
                        $navElement.css("float", "left");
                        break;
                    case "vertical":
                        $navElement.css("float", "none");
                        break;    
                }
            }
            
            if (opt.navigator.showMiniature) {
                $("<img />").attr({ src: $(this).find("img").attr("src"), width: $navElement.css("width").replace("px", ""), height: $navElement.css("height").replace("px", ""), border: "0px" }).appendTo($navElement);
            }
            
            if (i == 0) { $navElement.css("background-image", opt.navigator.item.selectedCssClass ? "" : opt.navigator.item.selectedBGImage).addClass(opt.navigator.item.selectedCssClass); }
        });
        
        
        
        $container.append($divNavigator).hover(
            
        );
		var $titleProject = "<br/><span class='titelWitNone'>"+$container.find("a img:first").attr("alt")+"</span>";
		var $catsProject = "<br/><span class='contentText'>"+$container.find("a img").attr("title")+"</span>";
		var $titleBar = $("<div id='subBar'><img src='http://kwink.be/wp-content/themes/kwinkportfolio/images/structure/featured.png'>"+$titleProject+$catsProject+"</div>");
		if (opt.titleBar.cssClass) { $titleBar.attr("class", opt.titleBar.cssClass); }
		//$container.append($titleBar);
        $titleBar.appendTo($container);
        
        if (opt.animation.autoCycle) {
            setInterval( function() { 
                if (!$container.data("isMouseHover") || !opt.animation.stopOnHover) 
                    $.fn.showcase.showImage(++index % nImages, $container, imagesize, opt); 
            }, opt.animation.interval);
        }
    }
    
    $.fn.showcase.showImage = function(i, $container, imagesize, opt) {
        var $a = $container.find("a");
        switch (opt.animation.type)
        { 
            case "horizontal-slider": $container.find("#slider").animate({ left: - (i*imagesize.width) }, opt.animation.speed, opt.animation.easefunction);
                break;
            case "vertical-slider": $container.find("#slider").animate({ top: - (i*imagesize.height) }, opt.animation.speed, opt.animation.easefunction);
                break;
            case "fade":
                $container.css({ "z-index": "1001" });
                if ($a.eq(i).css("z-index") != "1000") 
                {
                    $a.eq(i).css({ "z-index": "1000", opacity: 0 });
					
                    $a.not($container.find("a").eq(i)).each( function() {
						if ($(this).css("z-index") != "auto")
							$(this).css("z-index", parseInt($(this).css("z-index"), 10) - 1);
                    });
                    
                    $a.eq(i).animate({ opacity: 1 }, opt.animation.speed, opt.animation.easefunction);
                }
                break;
        }
		
        $container.find("#subBar span.contentText").text($a.eq(i).find("img").attr("title"));
		$container.find("#subBar span.titelWitNone").text($a.eq(i).find("img").attr("alt"));
        $container.find("#navigator a").css("background-image", opt.navigator.item.cssClass ? "" : opt.navigator.item.backgroundImage).removeClass(opt.navigator.item.selectedCssClass)
            .eq(i).css("background-image", opt.navigator.item.selectedCssClass ? "" : opt.navigator.item.selectedBGImage).addClass(opt.navigator.item.selectedCssClass);
		
	};
    
    $.fn.showcase.defaults = {
        images: [],
        width: "",
        height: "",
        animation: { autoCycle: true,
                     stopOnHover: true,
                     interval: 4000,
                     speed: 250,
                     easefunction: "swing",
                     type: "horizontal-slider" },
		border: "none",
		navigator: { position: "bottom-right",
		             orientation: "horizontal",
		             autoHide: false,
		             showNumber: false,
		             showMiniature: false,
		             border: "none",
		             padding: "0px",
		             item: { cssClass: null,
		                     selectedCssClass: "selected",
		                     selectedBGImage: "url(../images/structure/bol01.png)",
		                     color: "#000000",
		                     textDecoration: "none",
		                     width: "12px", 
		                     height: "12px", 
		                     lineHeight: "12px",
		                     verticalAlign: "middle",
		                     backgroundImage: "url(http://kwink.be/wp-content/themes/kwinkportfolio/images/structure/bol02.png)",
		                     //backgroundColor: "#78ff00",
		                     padding: "0px",
		                     margin: "0px 5px 0px 0px",
		                     border: "none",
		                     borderRounded: true }
		           },
		titleBar: { autoHide: false,
		            cssClass: null,
		            css: { opacity: 1,
		                   height: "auto",
		                   fontColor: "#564a46",
		                   fontStyle: "normal",
		                   fontWeight: "normal",
		                   background: "none",
		                   fontSize: "1em" } }
	};
	
})(jQuery);