jQuery.noConflict();


/* Selector-Stuff, speichert die Zustände der aktuellen Auswahl an Eigenschaften.
 * Registriert zudem alle Kollektionen und Produkte innerhalb der Kollektionen.
 * Generiert anhand der Kollektionen und Produkte das HTML.
 *
 * @author RSK
 */
var RSKSelector = {};


RSKSelector.Selector = function (caption, key_name, options) {
    this.options = options;
    this.key_name = key_name;
    this.caption = caption;
    this.ID = String(Math.round(Math.random() * 1000000));

    this.init = function () {
    };

    this.buildHTML = function () {
    };

    this.reset = function () {
    };
};

RSKSelector.CaptionSelector = function (caption, tooltip) {
    this.constructor(caption, '', []);

    this.buildHTML = function () {
        var html = '';
        
        html += '<div class="captionselector">';
        html += '<div class="headerselector">';
        if (tooltip == null) {
        	html += '<h2>' + this.caption + '</h2>';        	
        }
        else {
        	html += '<h2>' + this.caption + '<img class="info-trigger" src="/skin/frontend/base/stratic/images/info.gif"/></h2>';
			html += '<div class="tooltip">'+tooltip+'</div>';
        }
        html += '</div>';
        html += '</div>';

        return html;
    };
};

RSKSelector.ColorSelector = function (caption, key_name, options, tooltip) {
    this.constructor(caption, key_name, options);

    this.buildHTML = function () {
        var html = '';

        html += '<div class="colorselector">';

        html += '<div class="headerselector">';
        if (tooltip == null) {
        	html += '<h2>' + this.caption + '</h2>';        	
        }
        else {
        	html += '<h2>' + this.caption + '<img class="info-trigger" src="/skin/frontend/base/stratic/images/info.gif"/></h2>';
			html += '<div class="tooltip">'+tooltip+'</div>';
        }
        html += '</div>';
        
        var counter = 0;
        for (var i = 0; i < options.length; i++) {
            var option_caption = this.options[i][0];
            var option_value   = this.options[i].length == 1
                ? option_caption
                : this.options[i][1];

            if (counter == 0) {
				html += '<div class="column">';
            }
	        html += '<img class="color" src="/skin/frontend/base/stratic/images/' + option_caption.replace('/','_').replace('ü','ue') + '.png" title="' + option_caption + '"/>';
	        html += '<img class="checkbox" name="SelectorColorGroup" src="/skin/frontend/base/stratic/images/checkbox.gif" id="' + option_value +'" title="' + option_caption + '"/>';
            counter++;
            if (counter == 5) {
            	html += '</div>';
            	counter = 0;
            }
        }
        if (counter != 0) {
            html += '</div>';
        }
        html += '</div>';

        return html;
    };

    this.init = function () {
		var items = document.getElementsByName("SelectorColorGroup");
        var keyname = this.key_name;

		for (var i = 0; i < items.length; i++) {
			items[i].onclick = function() {
/*
				var flag = RSKSelector.Selectors.toggleSelection(keyname,this.id);
				if (flag) {
					this.src = "/skin/frontend/base/stratic/images/checkbox-aktiv.gif";
				}
				else {
					this.src = "/skin/frontend/base/stratic/images/checkbox.gif";
				}
	            RSKSelector.Collections.updateState(RSKSelector.Selectors.getSelections());
*/	            
				var resetItems = document.getElementsByName("SelectorColorGroup");
				for (var j = 0; j < resetItems.length; j++) {
					resetItems[j].src = "/skin/frontend/base/stratic/images/checkbox.gif";
				}
				var flag = RSKSelector.Selectors.radioSelection(keyname,this.id);
				if (flag) {
					this.src = "/skin/frontend/base/stratic/images/checkbox-aktiv.gif";
				}
	            RSKSelector.Collections.updateState(RSKSelector.Selectors.getSelections());
			};
		}
    };
    
    this.reset = function() {
        var items = document.getElementsByName("SelectorColorGroup");
        for (var i = 0; i < items.length; i++) {
        	items[i].src = "/skin/frontend/base/stratic/images/checkbox.gif";
        }
    };
};

RSKSelector.SelectSelector = function (caption, key_name, options,tooltip) {
    this.constructor(caption, key_name, options);

    this.buildHTML = function () {
        var html = '';

        html += '<div class="selectselector">';
        html += '<div class="headerselector">';
        if (tooltip == null) {
        	html += '<h2>' + this.caption + '</h2>';        	
        }
        else {
        	html += '<h2>' + this.caption + '<img class="info-trigger" src="/skin/frontend/base/stratic/images/info.gif"/></h2>';
			html += '<div class="tooltip">'+tooltip+'</div>';
        }
        html += '</div>';
        html += '<select name="' + this.key_name + '" id="Selector_'+this.key_name+this.ID + '">';

        for (var i = 0; i < options.length; i++) {
            var option_caption = this.options[i][0];
            var option_value   = this.options[i].length == 1
                ? option_caption
                : this.options[i][1];

            html += '<option value="' + option_value +'">' + option_caption + '</option>';
        }

        html += '</select>';
        html += '</div>';

        return html;
    };

    this.init = function () {
        var select  = jQuery('select[name=' + this.key_name + ']');
        var keyname = this.key_name;

        select.change(function () {
            var value = jQuery(this).val();

            if (value == '') {
                RSKSelector.Selectors.removeSelection(keyname);
            } else {
                RSKSelector.Selectors.makeSelection(keyname, value);
            }

            RSKSelector.Collections.updateState(RSKSelector.Selectors.getSelections());
        });
    };
    
    this.reset = function() {
        var item = document.getElementById('Selector_'+this.key_name+this.ID);
        item.selectedIndex = 0;
    };
};

RSKSelector.SliderSelector = function (caption, key_name, show_legend) {
    this.constructor(caption, key_name, []);
    this.show_legend = show_legend;

    this.buildHTML = function () {
        var html = '';

        html += '<dl class="sliderselector' + (this.show_legend ? ' showlegend' : '') + '" rel="' + this.key_name + '">';
        html += '<dt>' + this.caption + '</dt>';
        html += '<dd class="no"><a href="javascript:;">nein</a></dd>';
        html += '<dd class="none selected" id="'+this.key_name+this.ID+'_default"><a href="javascript:;">egal</a></dd>';
        html += '<dd class="yes"><a href="javascript:;">ja</a></dd>';
        html += '</dl>';

        return html;
    };

    this.init = function () {
        var slider  = jQuery('dl.sliderselector[rel=' + this.key_name + ']');
        var keyname = this.key_name;

        jQuery('dd', slider).click(function () {
            var trigger = jQuery(this);

            jQuery('dd', slider).removeClass('selected');
            trigger.addClass('selected');

            if (trigger.hasClass('yes')) {
                RSKSelector.Selectors.makeSelection(keyname, true);
            } else if (trigger.hasClass('no')) {
                RSKSelector.Selectors.makeSelection(keyname, false);
            } else if (trigger.hasClass('none')) {
                RSKSelector.Selectors.removeSelection(keyname);
            }

            RSKSelector.Collections.updateState(RSKSelector.Selectors.getSelections());
        });
    };

    this.reset = function() {
        var slider  = jQuery('dl.sliderselector[rel=' + this.key_name + ']');
        var item = document.getElementById(this.key_name+this.ID+'_default');

        jQuery('dd', slider).removeClass('selected');
        item.setAttribute('class', 'none selected');
    };
};

RSKSelector.ColorSelector.prototype  = new RSKSelector.Selector();
RSKSelector.SelectSelector.prototype  = new RSKSelector.Selector();
RSKSelector.SliderSelector.prototype  = new RSKSelector.Selector();
RSKSelector.CaptionSelector.prototype = new RSKSelector.Selector();


RSKSelector.Selectors = {
    __selections : [], // Getätigte Auswahlen
    __selectors  : [], // Auswahlmöglichkeiten (linke Spalte)

    add : function (selector) {
        this.__selectors.push(selector);
    },

    init : function () {
        for (var i = 0; i < this.__selectors.length; i++) {
            this.__selectors[i].init();
        }
    },

    makeSelection : function (key, value) {
        this.removeSelection(key);

        this.__selections.push({
            key_name  : key,
            key_value : value
        });

        return true;
    },

    removeSelection : function (key) {
        for (var i = 0; i < this.__selections.length; i++) {
            if (this.__selections[i].key_name == key) {
                this.__selections.splice(i, 1);
                break;
            }
        }
    },

    toggleSelection : function (key, value) {
        for (var i = 0; i < this.__selections.length; i++) {
            if (this.__selections[i].key_name == key && this.__selections[i].key_value == value) {
            	this.__selections.splice(i, 1);
            	return false;
            }
        }
        this.__selections.push({
            key_name  : key,
            key_value : value
        });
        return true;
    },

    radioSelection : function (key,value) {
    	var flag = true;
        for (var i = 0; i < this.__selections.length; i++) {
            if (this.__selections[i].key_name == key) {
            	if (this.__selections[i].key_value == value) {
            		flag = false;
            	}
            	this.__selections.splice(i, 1);
            }
        }
		if (flag) {
	        this.__selections.push({
	            key_name  : key,
	            key_value : value
	        });
		}
        return flag;
    },
    
    hasSelection : function (key, value) {
        for (var i = 0; i < this.__selections.length; i++) {
            if (this.__selections[i].key_name == key && this.__selections[i].key_value == value) {
                return true;
            }
        }

        return false;
    },

    getSelections : function () {
        return this.__selections;
    },

    buildHTML : function (container) {
        var html = '';

        html += '<div class="block selectors">';
        for (var s = 0; s < this.__selectors.length; s++) {
            html += this.__selectors[s].buildHTML();
        }        
        html += '</div>';

        container.html(html);
    },
    
    reset : function () {
		while(this.__selections.length > 0) {
            this.__selections.splice(0, 1);
		}
        for (var s = 0; s < this.__selectors.length; s++) {
        	this.__selectors[s].reset();
        }
    }
};


RSKSelector.Collection = function (name, image, products) {
    this.name = name;
    this.image = image;
    this.products = products;
    this.ID = String(Math.round(Math.random() * 1000000));

    this.applyMatch = function (selection) {
        var matches = false;

        for (var p = 0; p < this.products.length; p++) {
            if (this.products[p].applyMatch(selection)) {
                matches = true;
            }
        }

        return matches;
    };
};


RSKSelector.Product = function (name, image, url, properties, color_urls) {
    this.name = name;
    this.image = image;
    this.url = url;
    this.properties = properties;
    this.color_urls = color_urls;
    this.ID = String(Math.round(Math.random() * 1000000));

    this.applyMatch = function (selection) {
        var match_count = 0;
        var matches = false;
        var numberOfKeys = getNumberOfKeysOfSelections(selection);
        var successKeys = new Array();
        var color = '';
        
        for (var s = 0; s < selection.length; s++) {
        	if (!this.properties.hasOwnProperty(selection[s].key_name)) {
                continue;
            }

        	if (jQuery.inArray(selection[s].key_name,successKeys) == -1) {
        		if (typeof this.properties[selection[s].key_name] == "boolean") {
    				if (this.properties[selection[s].key_name] == selection[s].key_value) {
						successKeys.push(selection[s].key_name);
		                match_count++;
    				}
        		}
        		else {
					if (this.properties[selection[s].key_name].search(selection[s].key_value) != -1) {
						successKeys.push(selection[s].key_name);
		                match_count++;
		        	}
        		}
        	}
        	
        	if (selection[s].key_name == 'farbe') {
        		color = selection[s].key_value;
        	}
        }
        matches = (match_count == numberOfKeys);

    	if (jQuery.inArray('farbe',successKeys) == -1) {
            jQuery('#Product_' + this.ID+' a').attr('style','background-image:url(' + this.image + ');');
    	}
    	else {
    		if (this.color_urls[color] == undefined || this.color_urls[color] == '') {
                jQuery('#Product_' + this.ID+' a').attr('style','background-image:url(' + this.image + ');');    			
    		}
    		else {
    			jQuery('#Product_' + this.ID+' a').attr('style','background-image:url(' + this.color_urls[color] + ');');
    		}
    	}

    	if (matches || !selection.length) {
            jQuery('#Product_' + this.ID).addClass('matching');
        } else {
            jQuery('#Product_' + this.ID).removeClass('matching');
        }

        return matches;
    };
};


RSKSelector.Collections = {
    __collections : [], // Kollektionen mit Produkten

    updateState : function (selection) {
        for (var c = 0; c < this.__collections.length; c++) {
            if (this.__collections[c].applyMatch(selection) || !selection.length) {
                jQuery('#Collection_' + this.__collections[c].ID).find('.overlay').fadeOut('fast');
            } else {
                jQuery('#Collection_' + this.__collections[c].ID).find('.overlay').fadeIn('fast');
            }
        }
    },

    add : function (collection) {
        this.__collections.push(collection);
    },

    buildHTML : function (container) {
        var html = '';

        for (var c = 0; c < this.__collections.length; c++) {
            if (c%4 == 0) {
                html += '<div class="collection_row">';
            }

            html += '<div class="collection" id="Collection_' + this.__collections[c].ID + '">';
            html += '<div class="overlay"></div>';
            html += '<a href="javascript:;" style="background-image:url(' + this.__collections[c].image + ');z-index:1;"><span>' + this.__collections[c].name + '</span></a>';
            html += '</div>';

            if ((c+1)%4 == 0 || (c == this.__collections.length - 1)) {
                for (var i = 0; i < Math.min(this.__collections.length, 4); i++) {
                    var bc    = this.__collections.length < 4 ? c - this.__collections.length + i + 1 : c - 3 + i;
                    var count = this.__collections[bc].products.length;

                    if (count%3 != 0) {
                        while (++count%3 != 0);
                    }

                    html += '<div class="products" id="Products_' + this.__collections[bc].ID + '">';

                    for (var p = 0; p < this.__collections[bc].products.length; p++) {
                        var product = this.__collections[bc].products[p];
                        var classes = ['product'];
                        var classes_html = '';

                        if ((p+1)%3 == 0) {
                            classes.push('lastInRow');
                        }

                        if (p >= count - 3) {
                            classes.push('inLastRow');
                        }

                        for (var j = 0; j < classes.length; j++) {
                            classes_html += (classes[j] + " ");
                        }

                        html += '<div class="' + classes_html + '" id="Product_' + product.ID + '">';
                        html += '<div class="overlay"></div>';
                        html += '<a href="' + product.url + '" style="background-image:url(' + product.image + ');">' + product.name + '</a>';
                        html += '</div>';
                    }

                    html += '</div>'; // class="products"
                }

                html += '</div>'; // class="collection_row"
            }
        }

        container.html(html);

        jQuery('.collection a', container).click(function () {
            var collection      = jQuery(this).parent();
            var open_collection = jQuery('.collection.opened');

            if (open_collection.length) {
                RSKSelector.Collections.hide(open_collection);

                if (open_collection.attr('id') != collection.attr('id')) {
                    RSKSelector.Collections.show(collection);
                }
            } else {
                RSKSelector.Collections.show(collection);
            }
        });
    },

    show : function (collection) {
        var collection_row = collection.parent();

        collection_row.addClass('opened');
        collection.addClass('opened');
        this.findProductsDivOfCollection(collection).slideDown(400, function () {
            collection_row.addClass('opened');
        });
    },

    hide : function (collection) {
        var collection_row = collection.parent();

        this.findProductsDivOfCollection(collection).slideUp(400, function () {
            collection.removeClass('opened');
            collection_row.removeClass('opened');
        });
    },

    findProductsDivOfCollection : function (collection) {
        return jQuery('#Products_' + collection.attr('id').split('_')[1]);
    },
    
    reset : function() {
        var open_collection = jQuery('.collection.opened');
        if (open_collection.length) {
            RSKSelector.Collections.hide(open_collection);
        }
 //       for (var c = 0; c < this.__collections.length; c++) {
 //       	this.hide(this.__collections[c]);
 //       }
    }
};

getNumberOfKeysOfSelections = function (selections) {
	var keys = new Array();
	var length = 0;
    for (var i = 0; i < selections.length; i++) {
    	if (jQuery.inArray(selections[i].key_name,keys) == -1) {
    		length = keys.push(selections[i].key_name);
    	}
    }
    return length;
},



jQuery(document).ready(function(){
    jQuery().prepare_slider();
    jQuery('#slider_list li').over();
    //    if (jQuery('.slider_transparent').length > 0){
    //            jQuery('.left-top').css("background","none")
    //            jQuery('.right-top').css("background","none")
    //            jQuery('.left-bot').css("background","none")
    //            jQuery('.right-bot').css("background","none")
    //    }
    jQuery(".box-left").hover(
        function () {
            jQuery(this).addClass('box-left-hover');
        },
        function () {
            jQuery(this).removeClass('box-left-hover');
        }
        );
    jQuery(".box-right").hover(
        function () {
            jQuery(this).addClass('box-right-hover');
        },
        function () {
            jQuery(this).removeClass('box-right-hover');
        }
        );
     jQuery("img[rel]").overlay({
           expose: {
		color: '#000',
		loadSpeed: 500,
		opacity: 0.8
		},
                effect: 'apple',
           closeOnClick: true
       });
	   
	
	// Skripte für milestones carousel : changes:  Andy Weisner 
	// http://stratic.i-rsk.com/index.php/meilensteine/#
	
	// var totalMilestones=jQuery("#Meilensteine ul li").length; 
	var milestonesPosition=jQuery("#Meilensteine ul").css('top');
	// var MS_height=jQuery("#Meilensteine ul").css('height');
	// console.log("!MS_height: "+MS_height+"px");   
	
	// hide Prev 
	function hidePrev(){
		jQuery(".prev a").css("background-position","left -500px");
		jQuery(".prev a").css("width","0px");
	}
	
	function showPrev(){
		jQuery(".prev a").css("background-position","left -30px");
		jQuery(".prev a").css("width","30px");
	}
	
	function hideNext(){
		jQuery(".next a").css("background-position","left -500px");
		jQuery(".next a").css("width","0px");
	}
	function showNext(){
		jQuery(".next a").css("background-position","left -45px");
		jQuery(".next a").css("width","30px");
	}
	hidePrev();
	
	jQuery(".next a").click(
				function(){
					 showPrev();
				}
	);
	jQuery(".prev a").click(
				function(){
					showNext();
				}
	);
	
	jQuery("#Meilensteine .carousel").jCarouselLite({
	    btnNext: ".next a",
	    btnPrev: ".prev a",
	    vertical: true,
	    circular: false,
		beforeStart: function (i){
			// console.log("beforeStart callback:");
		},
		afterEnd: function(i){
			// console.log("!afterEnd callback");
			milestonesPosition=jQuery("#Meilensteine ul").css('top');
			milestonesElements=jQuery("#Meilensteine ul li").siblings().length;
			milestonesPositionMax = milestonesElements * 122 - 366;
			if(milestonesPosition == '0px'){
					hidePrev();
			}else if(milestonesPosition == '-' + milestonesPositionMax + 'px') {
					hideNext();
			}
		}
	});
});

// end Milestones carousel 

jQuery.fn.prepare_slider = function(){
        jQuery.noConflict();
        var x_pos = 0;
        var li_items_n = 0;
        var right_clicks = 0;
        var left_clicks = 0;
        var li_col = jQuery("#slider_list li.coll");
        var li_width = li_col.outerWidth(true);


        var viewWindow = 4;
        li_col.each(function(index){
            x_pos += jQuery(this).outerWidth(true);
            console.log(x_pos);
            li_items_n++;
        })

        right_clicks = li_items_n - viewWindow;
        total_clicks = li_items_n - viewWindow;

        jQuery('#slider_list').css('position','relative');
        jQuery('#slider_list').css('left','0');
        jQuery('#slider_list').css('width', x_pos+'px');

        var is_playing = false;
        var completed = function() {
            is_playing = false;
        }

        jQuery('#left_but').click( function(){
            cur_offset = jQuery('#slider_list').position().left;
            if (!is_playing){
                if (left_clicks > 0) {
                    is_playing = true;
                    jQuery('#slider_list').animate({
                        'left': cur_offset + li_width + 'px'
                    }, 700, "linear", completed);
                    right_clicks++;
                    left_clicks--;
                }
                else {
                    is_playing = true;
                    jQuery('#slider_list').animate({
                        'left':    -li_width*total_clicks	+ 'px'
                    }, 700, "linear", completed);
                    right_clicks = 0;
                    left_clicks = total_clicks;
                }
            }
        });

        jQuery('#right_but').click( function(){
            if (!is_playing){
                cur_offset = jQuery('#slider_list').position().left;
                if (right_clicks > 0) {
                    is_playing = true;
                    jQuery('#slider_list').animate({
                        'left': cur_offset - li_width + 'px'
                    },700, "linear", completed );
                    right_clicks--;
                    left_clicks++;
                }
                else {
                    is_playing = true;
                    jQuery('#slider_list').animate({
                        'left':    0	+ 'px'
                    },700, "linear", completed );
                    left_clicks = 0;
                    right_clicks = total_clicks;
                }
            }
        });
    }

    jQuery.fn.over = function(){
        jQuery(this).each(function(i){
            jQuery(this).bind("mouseover", function(){
                jQuery(this).addClass("over");
            })
            jQuery(this).bind("mouseout", function(){
                jQuery(this).removeClass("over");
            })
        });
    }