/**
 * User: lum
 *  boxen Startseite stylen
 */
$(document).ready(function(){
		 
		  //
		 // TEASERBOXEN
		//
		/*jQuery('.teaserBox').css({cursor:'pointer'});*/
        var boxen1   = jQuery('#z_1 .teaserBox');  // collection ueber grosse Boxen Zeile 1
        var deko1    = jQuery('#z_1 .dekoBox'  );  // collection ueber kleine Boxen Zeile 1
        var boxen2   = jQuery('#z_2 .teaserBox');  // collection ueber grosse Boxen Zeile 2
        var deko2    = jQuery('#z_2 .dekoBox'  );  // collection ueber kleine Boxen Zeile 2
        var boxen3   = jQuery('#z_3 .teaserBox');  // collection ueber grosse Boxen Zeile 3
        var deko3    = jQuery('#z_3 .dekoBox'  );  // collection ueber kleine Boxen Zeile 3
        var solitaer = jQuery('#boxGross_3_1'  );  // die einzeln animierte Box, Zeile 3

 //mouseenter einzeln animierte Box
   solitaer.mouseenter(function(){
        if(solitaer.width()== 248){
                        solitaer.animate({height: "244px", width : "244px"},200,"easeOutQuad").animate({height: "248px", width : "248px"},200,"easeOutQuad")
                    }else{
       $(this).animate({left: "18px",width:"248px",height:"248px"
                },1000,"easeOutCubic");
		solitaer.find('.tbd').hide();
   }
   
   });//einzeln animierte Box mouseenter end
// mouseenter Boxen zeile 1
    boxen1.mouseenter(function() {
        //feststellen ob grosse Box
        var boxnummer = $(this).index(); //Box die gross wird
        if (boxnummer == zeile1[0]) { //Nur kleine Bewegung, wenn Box schon gross
            boxen1.eq(boxnummer).animate({height: "244px", width : "244px"}, 200, "easeOutQuad").animate({height: "248px", width : "248px"}, 200, "easeOutQuad")
        } else { // wenn klein dann...
            // uebergang festlegen
            var transition = transitions[zeile1[0]]; //uebergangsreihenfolge aus Transitions Array lesen
            var dekotrans = setDekotrans(boxnummer, zeile1[0]); // Uebergaenge fuer dekoboxen setzen
            // Faelle animieren
            animation(boxen1, zeile1, transition, boxnummer, deko1, z1deko, dekotrans);
            zeile1[0] = boxnummer;
        }// ende if
    }) // boxen1 mouseenter ende

// mouseenter Boxen zeile 2
    boxen2.mouseenter(function() {
        //feststellen ob grosse Box
        var boxnummer = $(this).index(); //Box die gross wird
        if (boxnummer == zeile2[0]) { //Nur kleine Bewegung, wenn Box schon gross
            boxen2.eq(boxnummer).animate({height: "244px", width : "244px"}, 200, "easeOutQuad").animate({height: "248px", width : "248px"}, 200, "easeOutQuad")
        } else { // wenn klein dann...
            // uebergang festlegen
            var transition = transitions[zeile2[0]]; //uebergangsreihenfolge aus Transitions Array lesen
            var dekotrans = setDekotrans(boxnummer, zeile2[0]); // Uebergaenge fuer dekoboxen setzen
            // Faelle animieren
            animation(boxen2, zeile2, transition, boxnummer, deko2, z2deko, dekotrans);
            zeile2[0] = boxnummer;
        }// ende if
    }) // boxen2 mouseenter ende

// mouseenter Boxen zeile 3
    boxen3.mouseenter(function() {
        //
        // SOLITAERBOX
        //  klein machen, wenn gross
        //
        if (solitaer.width() == 248) {
            solitaer.animate({left: "122px",width:"144px",height:"144px"
            }, 1000, "easeOutCubic");
			solitaer.find('.tbd').show();
        }

        //feststellen ob grosse Box
        var boxnummer = $(this).index(); //Box die gross wird
        if (boxnummer == zeile3[0]) { //Nur kleine Bewegung, wenn Box schon gross
            boxen3.eq(boxnummer).animate({height: "244px", width: "244px"}, 200, "easeOutQuad").animate({height: "248px", width : "248px"}, 200, "easeOutQuad")
        } else { // wenn klein dann...
            // uebergang festlegen
            var transition = transitions[zeile3[0]]; //uebergangsreihenfolge aus Transitions Array lesen
            var dekotrans = setDekotrans(boxnummer, zeile3[0]); // Uebergaenge fuer dekoboxen setzen
            // Faelle animieren
            animation(boxen3, zeile3, transition, boxnummer, deko3, z3deko, dekotrans);
            zeile3[0] = boxnummer;
        }// ende if
    }) // boxen3 mouseenter ende


    //
    // startseite links auf ganze box legen.
    //
    /*boxen1.click(function(){
        var ziel = $(this).find("h2 a").attr("href");
           window.location = ziel;
    })*/
  /*  boxen3.click(function(){
           var ziel = $(this).find("h2 a").attr("href");
              window.location = ziel;
       })
 solitaer.click(function(){
           var ziel = $(this).find("h2 a").attr("href");
              window.location = ziel;
       })*/

		}); // domready ende
/* Uebergaenge der Dekoboxen bestimmen */
function setDekotrans(b,ab){ //Boxnummer aktive Box
    var temp = (ab + 1).toString()+ (b + 1).toString();
    for (i=0; i< 6; i++){
        if(temp == dekotransitions[i]  ){temp = Math.floor(i/3)}
    }
   return temp;
};
/**
 * Animation ohne bouncing
 * zuerst kleine Bewegung bei "box ist schon gross"
 */

function animation(bo, r, t, b, db, d, dt) { //Boxen(jQ-Collection), dazugehoeriges Array, Transition, DekoZielbox, Dekobox-Array,dekotrans
    bo.eq(t[0] - 1).stop(true).animate({width: boxsize[[r[t[0]][b][2]]],
        height: boxsize[[r[t[0]][b][2]]], top: r[t[0]][b][1], left: r[t[0]][b][0]}, {duration:900,specialEasing: {
        width: 'easeOutCubic',
        height: 'easeOutCubic',
        top:'easeOutCubic',
        left:'easeOutCubic'
    }});
    bo.eq(t[1] - 1).stop(true).animate({width: boxsize[[r[t[1]][b][2]]],
        height: boxsize[[r[t[1]][b][2]]], top: r[t[1]][b][1], left: r[t[1]][b][0]}, {duration:1000,specialEasing: {
        width: 'easeOutCubic',
        height: 'easeOutCubic',
        top:'easeOutCubic',
        left:'easeOutCubic'
    }});
    bo.eq(t[2] - 1).stop(true).animate({width: boxsize[[r[t[2]][b][2]]],
        height: boxsize[[r[t[2]][b][2]]], top: r[t[2]][b][1], left: r[t[2]][b][0]}, {duration:1000,specialEasing: {
        width: 'easeOutCubic',
        height: 'easeOutCubic',
        top:'easeOutCubic',
        left:'easeOutCubic'
    }});
    //dekoboxen animieren
    for (i = 0; i < d.length; i++) { //dekoboxen durchlaufen und animieren
        var fakt = dt * 3; // Array offset fuer die richtige Animation je nach Uebergang
        if (d[i][b].length == 2 || d[i][b][fakt + 2] == 1) { // Ist es eine komplexe animation : nein
            db.eq(i).stop(true).animate({ left: d[i][b][0],top: d[i][b][1]}, 900, "easeOutCubic");
        } else {                   // ja
            db.eq(i).stop(true).animate({ left: d[i][b][fakt],top: d[i][b][fakt + 1]}, d[i][b][fakt + 2], "easeOutCubic").animate({ left: d[i][b][6],top: d[i][b][7]}, d[i][b][8], "easeOutCubic");
        }
    }
	
	if(boxsize[[r[t[0]][b][2]]] == '144px'){
		bo.eq(t[0] - 1).find('.tbd').show();
	}
	else{
		bo.eq(t[0] - 1).find('.tbd').hide();
	}
	
	if(boxsize[[r[t[1]][b][2]]] == '144px'){
		bo.eq(t[1] - 1).find('.tbd').show();
	}
	else{
		bo.eq(t[1] - 1).find('.tbd').hide();
	}
	
	if(boxsize[[r[t[2]][b][2]]] == '144px'){
		bo.eq(t[2] - 1).find('.tbd').show();
	}
	else{
		bo.eq(t[2] - 1).find('.tbd').hide();
	}
}