/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */




smrgFKList = {
    list:[
    {
        k:'kelime01',
        a:'anlam01'
    },

    {
        k:'kelime02',
        a:'anlam02'
    },

    {
        k:'kelime03',
        a:'anlam03'
    }
    ]
}


var smrgFKicerik0;
var smrgFKicerik1;
var smrgFKicerik2;

function smrgFK(k){
    $("#smrgFK").css("border", "solid 1px red");
    $("#smrgFK").height(250);
    $("#smrgFK").width(350);

    var icerik = ".........."
    $("#smrgFK").html(icerik);
	
	var cbf = function(data){
		smrgFKList = data
		
		kartlariAyarla();
	}
	
	var params = {isim:k};
	
	$.post("servis/kelimeKarti.php", params, cbf, "json");

}


function kartlariAyarla(){

    var icerik = "<div style='background-color:#bbb;'><span class='smrgFKMnCl' id='smrgFKMnCl0' >Liste</span><span class='smrgFKMnCl' id='smrgFKMnCl1'>Kartlar</span><span class='smrgFKMnCl' id='smrgFKMnCl2'>Kartlar[Anlam]</span></div> <div id='_smrgFK'></div>"
    $("#smrgFK").html(icerik);

    $(".smrgFKMnCl").each(function(i) {
        $(this).bind('mouseover', {
            index:i
        }, function(e){
            $("#smrgFKMnCl"+e.data.index).css("background-color","white");
        });

        $(this).bind('mouseout', {
            index:i
        }, function(e){
            $("#smrgFKMnCl"+e.data.index).css("background-color","#bbb");
        });

        $(this).bind('click', {
            index:i
        }, function(e){
            $("#_smrgFK").html(eval("smrgFKicerik"+e.data.index));
        });
    });


    var l = 0;
    //Kelime Listesi icin iccerik olustur
    smrgFKicerik0 = "<div style='text-align:center; height:80%; overflow:auto;' ><table>";
    for (l in smrgFKList.list) {
        smrgFKicerik0 += "<tr><td>"+smrgFKList.list[l].k+"</td><td>"+smrgFKList.list[l].a+"</td></tr>";
    }
    smrgFKicerik0 += "</table></div>";


    //Kelime Kartlari icin iccerik olustur
    var temp = smrgFKList.list.slice(0);
    temp = shuffle(temp);
    smrgFKicerik1 = "<div id='smrgFKicerik1_9999' style='text-align:center;cursor:pointer;' > <span onClick='smrgFKicerik1_KartCevir(0)' >BAŞLA</span> <br> Kelime -> Anlam </div>";
    for (l in temp) {
        smrgFKicerik1 += "<div id='smrgFKicerik1_"+l+"' style='text-align:center; display:none;' >";
        smrgFKicerik1 += "<div style='font-size:30px;color:red;'>"+temp[l].k+"</div>";
        smrgFKicerik1 += "<div id='smrgFKicerik1_"+l+"_A' style='font-size:30px;display:none;'>"+temp[l].a+"</div>";
        smrgFKicerik1 += "<div style='cursor:pointer;' id='smrgFKicerik1_"+l+"_C' onClick='smrgFKicerik1_KartCevap("+l+")' >Cevap</div>";
        smrgFKicerik1 += "<div id='smrgFKicerik1_"+l+"_S' onClick='smrgFKicerik1_KartCevir("+(l*1+1)+")' style='display:none;cursor:pointer;' >Sonraki</div>";
        smrgFKicerik1 += "</div>";
    }
    smrgFKicerik1 += "<div id='smrgFKicerik1_"+(l*1+1)+"' style='text-align:center; display:none;' > BİTTİ </div>";


    //Kelime Kartlari icin iccerik olustur
    var temp = smrgFKList.list.slice(0);
    temp = shuffle(temp);
    smrgFKicerik2 = "<div id='smrgFKicerik2_9999' style='text-align:center;cursor:pointer;' > <span onClick='smrgFKicerik2_KartCevir(0)' >BAŞLA</span> <br> Anlam -> Kelime </div>";
    for (l in temp) {
        smrgFKicerik2 += "<div id='smrgFKicerik2_"+l+"' style='text-align:center; display:none;' >";
        smrgFKicerik2 += "<div style='font-size:30px;color:red;'>"+temp[l].a+"</div>";
        smrgFKicerik2 += "<div id='smrgFKicerik2_"+l+"_A' style='font-size:30px;display:none;'>"+temp[l].k+"</div>";
        smrgFKicerik2 += "<div style='cursor:pointer;' id='smrgFKicerik2_"+l+"_C' onClick='smrgFKicerik2_KartCevap("+l+")' >Cevap</div>";
        smrgFKicerik2 += "<div id='smrgFKicerik2_"+l+"_S' onClick='smrgFKicerik2_KartCevir("+(l*1+1)+")' style='display:none;cursor:pointer;' >Sonraki</div>";
        smrgFKicerik2 += "</div>";
    }
    smrgFKicerik2 += "<div id='smrgFKicerik2_"+(l*1+1)+"' style='text-align:center; display:none;' > BİTTİ </div>";



    $("#_smrgFK").html("<br><br><span style='color:red;' >Liste:</span> Kelime Listesi<br><span style='color:red;' >Kartlar:</span> Karışık olarak kelimeleri görüp anlamını tahmin etmek için <br><span style='color:red;' >Katlar[Anlam]:</span> Karışık olarak anlamları görüp, kelimeleri tahmin etmek için");

}


function smrgFKicerik1_KartCevir(i){
    if(i==0) $("#smrgFKicerik1_9999").hide();
    else  $("#smrgFKicerik1_"+(i-1)).hide();

    $("#smrgFKicerik1_"+i).show();
}

function smrgFKicerik1_KartCevap(i){
    $("#smrgFKicerik1_"+i+"_C").hide();
    $("#smrgFKicerik1_"+i+"_S").show();
    $("#smrgFKicerik1_"+i+"_A").show();
}


function smrgFKicerik2_KartCevir(i){
    if(i==0) $("#smrgFKicerik2_9999").hide();
    else  $("#smrgFKicerik2_"+(i-1)).hide();

    $("#smrgFKicerik2_"+i).show();
}

function smrgFKicerik2_KartCevap(i){
    $("#smrgFKicerik2_"+i+"_C").hide();
    $("#smrgFKicerik2_"+i+"_S").show();
    $("#smrgFKicerik2_"+i+"_A").show();
}


shuffle = function(o){ //v1.0
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	/*
    for (l in o) {
        alert(o[l].k);
    }*/

    return o;
};