document.observe('dom:loaded', init);

function init(){

	//Bilder transparenter machen
//	switchMirror('.box > img'); //Spiegelbilder durch Canvas tauschen
	//setTimeout(switchMirror,200); //Spiegelbilder durch Canvas tauschen
//	$$('.box > img').each(function(el){$(el).setStyle('opacity:0.5');});
//	$$('img.mirror').each(function(el){$(el).setStyle('opacity:0.5');});
	

    //Overgrafiken registrieren für die Navigation
    $A($$('#navigation a img')).concat($A($$('#categories img'))).each(function(el){
        $(el).observe('mouseover', function(e){
            var img = Event.element(e);
			img.src = img.src.replace(/(0)\./, '1.');
        });
        $(el).observe('mouseout', function(e){
            var img = Event.element(e);
			img.src = img.src.replace(/(1)\./, '0.');
        });
    });
    
	if(Prototype.Browser.IE) 
		if($('right').getHeight() > $('maincontent').getHeight())
			$('maincontent').setStyle('height:'+$('right').getHeight()+"px");	
	
	
    if (typeof($('top10')) == "object") {//TOP10 existiert
        new Vertical_Scroll('scroll', {
            down: 'top10-up',
            up: 'top10-down'
        });
    }
    
    if (typeof($('neuerscheinungen_side')) == "object") {//Neuerscheinungen existiert, dann Spiegelungen transparent machen
        var bilder = $$('#neuerscheinungen_side .pic_mirror img');
        for (a = 1; a < bilder.length; a = a + 2) {
            $(bilder[a]).setStyle('opacity:0.5');
        }
    }
    
    if (typeof($('bestseller')) == "object") {//Besteller SLider
        s2 = new Control.Slider('bestseller_schieber', 'bestseller_track', {
            maximum: 0.7,
            minimum: 0,
            onSlide: function(value){
                var neu = ((value * g.getWidth()) * -1) / 3;
				var neu = $$('#bestseller')[0].down().getWidth() * (value*($$('#bestseller')[0].getWidth()/$$('#bestseller')[0].down().getWidth())) * -1;
				var neu = (($('bestseller').down().getWidth()-$('bestseller').getWidth()) * value) * -1;
                $$('#bestseller')[0].down().setStyle('left:' + neu + 'px');
            }
        });
		
        var g = new Gallery('bestseller', {
            right: 'bestseller_right',
            left: 'bestseller_left',
            scrollOne: 1,
            regler: s2
        }); 
        var bilder = $$('#bestseller img');
        for (a = 1; a < bilder.length; a = a + 2) {
            $(bilder[a]).setStyle('opacity:0.2');
        }
        $('bestseller_track').setStyle('opacity:0.85');
        $('bestseller_schieber').setStyle('opacity:0.85');
		
		//Mouseover um die Titel anzuzeigen
		$$('#bestseller div').invoke('observe','mouseover',function(e){ var el = Event.findElement(e,'div'); $$('#bestseller_wrapper .namen')[0].innerHTML = $(el).select('span')[0].innerHTML; })
		$$('#bestseller div').invoke('observe','mouseout',function(e){ var el = Event.findElement(e,'div'); $$('#bestseller_wrapper .namen')[0].innerHTML = ""; })
		
		$('gradient_right').observe('mouseover', function(){bewegung('rechts');});
		$('gradient_left').observe('mouseover', function(){bewegung('links')});
		$('gradient_right').observe('mouseout', function(){bewegung('stop');});
		$('gradient_left').observe('mouseout', function(){bewegung('stop')});

		var bewegungs_timer;
		function bewegung(richtung) {
			if (richtung == 'rechts')
				bewegungs_timer = window.setInterval("if (parseInt($$('#bestseller')[0].down().getStyle('left')) > $$('#bestseller')[0].down().getWidth()*-1+$$('#bestseller')[0].getWidth()) {$$('#bestseller')[0].down().setStyle('left:'+ (parseInt($$('#bestseller')[0].down().getStyle('left'))-3) + 'px' );s2.setValue(parseFloat(parseInt($$('#bestseller')[0].down().getStyle('left')) / ($('bestseller').down().getWidth()-$('bestseller').getWidth()) )*-1);}", 50);
			else 
				if (richtung == 'stop') 
					window.clearInterval(bewegungs_timer);
				else 
					bewegungs_timer = window.setInterval("if (parseInt($$('#bestseller')[0].down().getStyle('left')) < 0) { $$('#bestseller')[0].down().setStyle('left:'+ (parseInt($$('#bestseller')[0].down().getStyle('left'))+3) + 'px' );s2.setValue(parseFloat(parseInt($$('#bestseller')[0].down().getStyle('left')) / ($('bestseller').down().getWidth()-$('bestseller').getWidth()) )*-1); } ", 50);
		}
		
    }
    
    
}

function move(dir){
    var el = $$('#top10 .scroll')[0];
    new Effect.Move(el, {
        y: -50
    });
}

var Vertical_Scroll = Class.create({
    initialize: function(id, options){
        //User Parameters
        this.btn_u = options.up || null;
        this.btn_d = options.down || null;
        this.index = options.index || null;
        //this.index.default = options.index.default || null;
        this.scrollOne = options.scrollOne || 0; //Per Element oder per Seite scrollen?
        this.g = { //Id im g Object
            id: id
        }
        //Intern Parameters
        this.effectoptions = {};
        this.effectoptions = (options.duration) ? $H({
            duration: options.duration
        }) : this.effectoptions;
        this.effectoptions = (options.transition) ? this.effectoptions.update({
            transition: options.transition
        }) : this.effectoptions;
        
        this.css = new Template('##{id} > *'); //CSS Template String für $$ Funktion
        this.cssitems = new Template('##{id} li'); //CSS Template String für $$ Funktion
        this.items = $$(this.cssitems.evaluate(this.g)).length -
        parseInt($$(this.cssitems.evaluate(this.g)).reverse().collect(function(n){
            return n.getHeight()
        }).inject(0, function(n, m, c){
            return (n + m <= $(id).getHeight()) ? n + m : (n.toString().startsWith('#')) ? n : "#" + (c - 1);
        }).substr(1)); //Anzahl der Elemente abzüglich Elemente der letzten Seite
        this.itemsHeight = $$(this.cssitems.evaluate(this.g)).collect(function(n){ //GesamtHöhe aller Elemente
            return n.getHeight()
        }).inject(0, function(n, m){
            return n + m;
        });
        this.objectShown = 0; //Aktuell sichtbares/angewähltes Element 
        //Intern Functions
        this._wrap(); //Fügt einen DIV Container hinzu und legt die Elemente dort rein. CSS Template wird abgeändert
        if (this.btn_u) {
            $(this.btn_u).observe('mouseover', this._move.bindAsEventListener(this, "next"));
            $(this.btn_u).observe('click', this._move.bindAsEventListener(this, "next"));			
        }
        if (this.btn_d) {
            $(this.btn_d).observe('mouseover', this._move.bindAsEventListener(this, "previous"));
            $(this.btn_d).observe('click', this._move.bindAsEventListener(this, "previous"));			
        }
        this.goto(0);
    },
    _wrap: function(){
        $(this.g.id).setStyle('overflow:hidden');
        var wrapperDiv = document.createElement('div');
        $$(this.css.evaluate(this.g)).invoke('wrap', wrapperDiv, {
            style: 'position:absolute;height:' + this.itemsHeight + 'px'
        });
        this.css.template = '##{id} div li'; //Template muss wegen WRAP geändert werden
    },
    _move: function(e, wert){
        this.goto(wert);
    },
    goto: function(i){
        switch (i) {
            case "last":
                i = this.items - 1;
                break;
            case "first":
                i = 0;
                break;
            case "next":
                i = this.objectShown + 1;
                break;
            case "previous":
                i = this.objectShown - 1;
                break;
        }
        if (i >= this.items) 
            i = this.items - 1;
        if (this.scrollOne) { //Per Element scrollen
            if (i < 0) 
                return;
            var biggestPos = -this.itemsHeight + $(this.g.id).getHeight();
            if (i >= this.items - 1) 
                var newPos = biggestPos;
            else {
                var newPos = -1 *
                ($A($$(this.css.evaluate(this.g)).collect(function(n){
                    return n.getHeight()
                }).inGroupsOf(i + 1, 0)[0]).inject(0, function(n, m){
                    return n + m;
                }) -
                $$(this.css.evaluate(this.g))[0].getHeight());
            }
            if (newPos < biggestPos) 
                newPos = biggestPos;
            var options = $H({
                y: newPos,
                x: 0,
                mode: 'absolute'
            });
            options.update(this.effectoptions);
            new Effect.Move($(this.g.id).down(), options.toObject(), {
                queue: 'end'
            });
            this.objectShown = i;
        }
        else { //Per Seite scrollen
            var newPos = ($(this.g.id).getHeight() * -i) / 1.5;
            if (newPos < -this.itemsHeight || newPos > 0) {
                return;
            }
            var options = $H({
                y: newPos,
                x: 0,
                mode: 'absolute'
            });
            options.update(this.effectoptions);
            new Effect.Move($(this.g.id).down(), options.toObject(), {
                queue: 'end'
            });
            this.objectShown = i;
        }
        if (this.objectShown <= 0) {
            //            $(this.btn_d).fade();
        }
        else {
            //            $(this.btn_d).appear();
        }
        if (this.objectShown >= this.items - 1) {
            //            $(this.btn_u).fade();
        }
        else {
            //            $(this.btn_u).appear();
        }
        if (this.index) 
            this._drawIndex();
        
    }
});

function switchMirror(css) {
	$$(["img.mirror",".box > img"]).each( function(el) {
		$(el).remove();
	} );
	$$(['.productListing-data img','.box img']).each(function(el){
		var img = $(el);
		var width = $(el).getWidth();
		if (width==0) return;
		var height = 30;
		var canvas = new Element('canvas', { width: width, height: height}).setStyle({width: width+'px'});
		var ctx = canvas.getContext('2d');
		ctx.translate(width ,height);
		ctx.rotate(Math.PI*2/2);
		var original_height = $(img).getHeight(); 
//		if (original_height<60) return;
		for (var i=1; i<width; i++) ctx.drawImage(img, i, 0, 1, original_height, width-i-1, -original_height+30, 2, original_height);		
		var verlauf = ctx.createLinearGradient(0,0,0,60);
		
		if (!$(el).up('.productListing-odd')) verlauf.addColorStop(0.15,'rgba(255,255,255,1)');
		else verlauf.addColorStop(0.15,'rgba(242,242,242,1)');		

		verlauf.addColorStop(1,'rgba(255,255,255,0)');
		ctx.fillStyle = verlauf;		
		ctx.fillRect(0,0,width,30);
		$(el).insert({after: canvas});
	});
}