﻿var _global = new Object; // gloabler Variablen Container;
_global.hasInterval = false;
_global.SlideInterval = "";

//Betaversion 0.9
(function ($) {
    var methods = {
        init: function (method) {
            method = $.extend({
                width: 320, // Gesamtbreite der Bilder
                height: 200, // Gesamthöhe der Bilder
                thumb_height: 40,
                thumb_width: 60,
                sleep: 3500,
                fadespeed: 1000,
                max_dot: 20, // Ab wann immer prevbox: preview gilt!
                previebox_margin: 2,
                prevbox: "round horizont" //square, round, preview, round horizont, square horizont, none
            }, method);

            var obj = $(this);
            $(this).wrapInner("<div id='sliderbody' class='ui-corner-all cur_pointer' style='width:auto; height:auto; position:relative; margin:auto;' />");
            var obj_child = $("#sliderbody");

            var previewbox = "";

            var heighest_index = $(this).find("img").length - 1;
            obj_child.css({ "height": method.height + "px", "width": method.width + "px", "overflow": "hidden" }).addClass("borderline");

            if (method.prevbox == "square" || method.prevbox == "square horizont") {
                var corner_class = "";
            }
            else if (method.prevbox == "round" || method.prevbox == "round horizont") {
                var corner_class = "ui-corner-all";
            }
            else if (method.prevbox == "preview" || heighest_index >= method.max_dot) {
                var corner_class = "";
                // $(obj_child).css({"height":parseInt(method.height) + parseInt(method.thumb_height)+"px"});
                $(obj).css({ "height": parseInt(method.height) + parseInt(method.thumb_height) + "px" });
            }
			else if (method.prevbox == "none"){
				var corner_class
			}
            else {
                alert("Error in jquery.jSlider() parameters, option '" + method.prevbox + "' is not supported! Using fallback 'round'");
                var corner_class = "ui-corner-all";
            }           

            obj_child.find("img").each(function (index) {
				zindex = heighest_index - index;
                $(this).wrap("<div />");
                $(this).parent("div").attr("id", "img_" + zindex).addClass("_img").css({ "position": "absolute", "top": "0px", "left": "0px", "z-index": zindex, "height": method.height + "px", "width": method.width + "px" });
                if (method.prevbox == "preview") {
                    previewbox += "<div id='thumb_" + zindex + "' class='" + corner_class + " previewbox cur_pointer' style='background:url(" + $(this).attr("src").replace("full", "thumb") + "); margin:" + method.previebox_margin + "px; width:" + method.thumb_width + "px; height:" + method.thumb_height + "px;'></div>";
                }
                else {
                    previewbox += "<div rel='" + $(this).attr("src").replace("full", "thumb") + "' id='thumb_" + zindex + "' class='" + corner_class + " previewbox cur_pointer' style=' margin:" + method.previebox_margin + "px;'></div>";
                }
            });

            var i = 0;
            var id = heighest_index;

            $("._img:first").addClass("_activImg");

            //#Region prevboxen
            if (method.prevbox == "preview") {
                var thumb_box_width = (parseInt(method.thumb_width) + parseInt(method.previebox_margin)) * (heighest_index + 1) + (parseInt(method.previebox_margin * 2) * (heighest_index + 1));
                var thumb_box_left = $(obj_child).width() / 2 - method.thumb_width / 2 - parseInt(method.previebox_margin);

                var thumb_box_middle_width = method.thumb_width + 2;
                var thumb_box_middle_height = method.thumb_height + 2;
                var thumb_box_middle_left = thumb_box_left;
                
                $(obj).append("<div id='thumb_prev_box' style='width:" + method.width + "px; height:" + method.thumb_height + 20 + "px; position:relative; margin:auto; margin-bottom:0.8em; z-index:200; overflow:hidden;' />");

                $("#thumb_prev_box").html("<div id='thumb_box' style='position:absolute; height:" + method.thumb_height + "px; width:" + thumb_box_width + "px; left:" + thumb_box_left + "px;'>" + previewbox + "</div>");
                $("#thumb_prev_box").append("<div style='width:" + thumb_box_middle_width + "px; height:" + thumb_box_middle_height + "px; position:relative; left:" + thumb_box_middle_left + "px; bottom:0px; z-index:200; border:2px solid green;'/>");
            }            
            else {
				if (method.prevbox == "none"){
					$("#thumb_box").css("display","none");
				}
                else if (heighest_index >= method.max_dot){ 
                    if ($.browsercheck()){
                        var IE_Position = " ";
                    }
                    else{
                        var IE_Position = " left:5%;";
                    }
                    $(obj).append("<div id='thumb_prev_box' style='width:" + method.width + "px; height:" + method.thumb_height + "px; position:relative; margin:auto; margin-bottom:0.8em; z-index:200; overflow:hidden;' />");                    
                    $("#thumb_prev_box").append("<div id='thumb_box' style='position:absolute; top:0px; z-index:200; height:15px; margin:auto; width:auto;"+IE_Position+"'>" + previewbox + "</div>");
                    
                    var thumb_box_width = (parseInt($(".previewbox").width()) + parseInt(method.previebox_margin)) * (heighest_index + 1) + (parseInt(method.previebox_margin * 2) * (heighest_index + 1));                    
                    $("#thumb_prev_box").css("width",thumb_box_width+"px");
                }
                else{
                    $(obj_child).append("<div id='thumb_box' style='position:absolute; top:0px; right:0px; z-index:200; height:15px; width:auto;'>" + previewbox + "</div>");

                    if (method.prevbox.indexOf("horizont") > 0){
                        $(".previewbox").css("float","none");
                    }                    
                }				
            }
            
            $("body").append("<div style='width:" + method.thumb_width + "px; height:" + method.thumb_height + "px; position:absolute; z-index:201; display:none; overflow:hidden;' id='thumb'></div>")

            SlideFunction = function () {
                if (i < heighest_index) {
                    if ($(".active_prev").attr("id") != undefined) {
                        id = heighest_index - i;
                        $(".previewbox").removeClass("active_prev");
                        var this_id = parseInt(id) - 1;

                        $("#thumb_" + this_id).addClass("active_prev");

                        $("#img_" + id).fadeOut(method.fadespeed).appendTo(obj_child);

                        $("._activImg").removeClass("_activImg");
                        $("._img:first").addClass("_activImg");

                        if (method.prevbox == "preview") {
                            var left_position = parseInt($("#thumb_box").css("left"));
                            var newLeft_position = left_position - method.thumb_width - method.previebox_margin * 3;
                            $("#thumb_box").animate({
                                left: newLeft_position
                            });
                        }

                        i++
                    }
                    else {
                        alert("Pluginerror in jquery.jSlider. SlideInterval aborted with Error! Activ image-id is undefined!");
                        clearInterval(_global.SlideInterval);
                    }
                }
                else {
                    clearInterval(_global.SlideInterval);
                }
            }

            $("#thumb_" + heighest_index).addClass("active_prev");

            slidestart = function () {
                _global.SlideInterval = setInterval(SlideFunction, method.sleep);
                _global.hasInterval = true;
            }

            $(".previewbox").bind("mouseover", function () {
                if (method.prevbox == "preview") {
                    //
                }
                else {
                    var this_left = $(this).offset().left - method.thumb_width / 2;
                    $("#thumb").css({ "left": this_left + "px", "background": "url(" + $(this).attr("rel") + ")" });
                }
            });

            $("#thumb_box").hover(function () {
                var this_top = $(".previewbox").offset().top + 25;
                $("#thumb").css({ "top": this_top + "px" }).fadeIn("slow");
            },
            function () {
                $("#thumb").fadeOut("slow");
            });

            $(".previewbox").bind("click", function () {
                if (_global.SlideInterval != "") {
                    clearInterval(_global.SlideInterval)
                }

                $("._img").each(function (index) {
                    //alttext
                });

                var clicked_id = parseInt($(this).attr("id").substr(6, $(this).attr("id").length - 6));
                $(".previewbox").removeClass("active_prev");
                var activ_id = parseInt($("._activImg").attr("id").substr(4, $(this).attr("id").length - 4));
                                
                    if (activ_id > clicked_id) {
                        //Davor klicken
                        $("._img").each(function (index) {
                            id = parseInt($(this).attr("id").substr(4, $(this).attr("id").length - 4));
                            if (id > clicked_id) {
                                $(this).fadeOut("fast").appendTo(obj_child);
                            }
                            else if (id == clicked_id) {
                                $("#thumb_" + clicked_id).addClass("active_prev");

                                $("._activImg").removeClass("_activImg");
                                $(this).addClass("_activImg").fadeIn("slow");
                            }
                        });

                        if (method.prevbox == "preview") {
                            var left_position = parseInt($("#thumb_box").css("left"));
                            var newLeft_position = left_position - (method.thumb_width * (parseInt(clicked_id+1))) - (method.previebox_margin * 3)* (parseInt(clicked_id+1));
                            $("#thumb_box").animate({
                                left: newLeft_position
                            },1500);      
                        }
                    }
                    else if (activ_id < clicked_id) {
                        //Dahinter klicken
                        $("._img").each(function (index) {
                            id = parseInt($(this).attr("id").substr(4, $(this).attr("id").length - 4));
                            if (id < clicked_id) {
                                $(this).prependTo(obj_child).fadeIn("fast");
                            }
                            else if (id == clicked_id) {
                                $("#thumb_" + clicked_id).addClass("active_prev");

                                $("._activImg").removeClass("_activImg");
                                $(this).addClass("_activImg").prependTo(obj_child).fadeIn("slow");
                            }
                        });

                        if (method.prevbox == "preview") {
                            var left_position = parseInt($("#thumb_box").css("left"));
                            //var newLeft_position = left_position + (method.thumb_width - (method.previebox_margin * 3)*(parseInt(clicked_id))) * parseInt(clicked_id);
                            var newLeft_position = left_position + (method.thumb_width * (parseInt(clicked_id-1))) + (method.previebox_margin * 3)* (parseInt(clicked_id-1));
                            $("#thumb_box").animate({
                                left: newLeft_position
                            },1500);      
                        }
                    }
                

                if (i == heighest_index) {
                    clearInterval(_global.SlideInterval);
                    i = 0;
                }
                else {
                    i = heighest_index - clicked_id;
                    slidestart()
                }
            });

            //Initialstart des Intervals
            $("._img").bind("click", function () {
                if (_global.hasInterval == true) {
                    clearInterval(_global.SlideInterval)
                    _global.hasInterval = false;
                }
                else {
                    slidestart()
                    _global.hasInterval = true;
                }
            });

        }
    };

    $.fn.jSlider = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error(alert('Method ' + method + ' does not exist on jQuery.jSlider'));
        }
    }
})(jQuery);



