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

var bewegungs_timer;
var richtung = 0;


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: 1,
            minimum: 0,
			sliderValue: 0.75,
            onSlide: slideChange,
			onChange: slideChange
        });
				
		$('gradient_right').observe('mouseover', function(){coverFlow(-1, 25); s2.setValue(0.75);});
		$('gradient_left').observe('mouseover', function(){coverFlow(1, 25); s2.setValue(0.25);});
		$('gradient_right').observe('mouseout', function(){richtung=-1;});
		$('gradient_left').observe('mouseout', function(){richtung=1;});
		$('bestseller').observe('mouseout', function(){ coverFlow(richtung, 25); }); //Automatische Bewegung soll angehalten werden
		$('bestseller').observe('mouseover', function(){ coverFlow(0, 25); });
		
		setTimeout(coverFlowInit, 500);
		
    }
	
	if (Prototype.Browser.IE) {
		$$('#promo .links')[0].update("&nbsp; ".times(1000));
		$$('#promo .rechts')[0].update("&nbsp; ".times(2000));
	}
	
}

function slideChange(value) {
		var speed = (1/Math.abs(value-0.5))*6;
		if (value > 0.5)		coverFlow(-1, speed);
		else if (value < 0.5) 	coverFlow(1, speed);
		else 					coverFlow(0, 25);			
}


function coverFlowInit() {
	var cover = $$('#bestseller > div');
	var breite = 124;
	cover.each(function(el,n){
		$(el).setStyle({left: (n*breite)+"px"});
	});
	coverFlow(-1 , 25);
}

function coverFlow(dir, speed) {
	var cover = $$('#bestseller > div');
	var breite = 124;	
	clearInterval( window.bewegungs_timer);
	if (dir == 0) return; //Wenn direction 0 dann stop
	bewegungs_timer = setInterval( coverMove.curry(dir, breite, cover) , speed);
}

function coverMove(dir, breite, cover) {
	var dir = dir || -1;
	//var cover = $$('#bestseller > div'); 
	cover.each(function(el,n) {
		var left = parseInt($(el).getStyle('left'));
		var newleft = left + dir;
		if (newleft < -breite) newleft = (cover.length-1) * breite;
		if (newleft > (cover.length-1) * breite) newleft = -breite;
		$(el).setStyle({left: newleft+"px"});
	});
}



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);
		if (img.src.search(/shop/)) return; //Bestellbuttons sollen nicht spiegeln, deswegen werden die hier übersprungen
		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});
	});
}