var materials = new Array();
materials[1] = 'barsony';
materials[2] = 'beduin';
materials[3] = 'eros_vaszon';
materials[4] = 'gordon_vaszon';
materials[5] = 'london';
materials[6] = 'neon_vaszon';
materials[7] = 'pluss';
materials[8] = 'szenny';
materials[9] = 'textilbor';
materials[10] = 'vizlepergeto';

var materialNames = new Array();
materialNames[1] = 'Bársony';
materialNames[2] = 'Beduin';
materialNames[3] = 'Er&#337s Vászon';
materialNames[4] = 'Gordon Vászon';
materialNames[5] = 'London';
materialNames[6] = 'Neon Vászon';
materialNames[7] = 'Plüss';
materialNames[8] = 'Szenny taszító';
materialNames[9] = 'Textilb&#337r';
materialNames[10] = 'Vízleperget&#337 ';

var colors = new Array();
colors[1] = 4;
colors[2] = 14;
colors[3] = 12;
colors[4] = 11;
colors[5] = 5;
colors[6] = 2;
colors[7] = 15;
colors[8] = 6;
colors[9] = 12;
colors[10] = 11;

var kulsofile = Array();
kulsofile[1] = 'gamer';
kulsofile[2] = 'maxi';
kulsofile[3] = 'pate';
kulsofile[4] = 'pufi';
kulsofile[5] = 'rufi';
kulsofile[6] = 'teglapufi';
kulsofile[7] = 'tron';

function changeBackground(material, colorid){
    //alert('back '+material + " " + colorid);
    var kulso = document.getElementById("kulso2");
    kulso.style.backgroundImage = 'url(images/20X20/'+ materials[material] + '/'+materials[material]+colorid+'.jpg)';
    var kulso_div = document.getElementById("kulso_div");
	kulso_div.innerHTML = 'images/20X20/'+ materials[material] + '/'+materials[material]+colorid+'.jpg';
}
function changeForeground(material, colorid){
    //alert('fore '+material + " " + colorid);
    var belso = document.getElementById("belso");
    var shapeURL = belso.style.backgroundImage;
    var first = shapeURL.indexOf('images/');
    var second = shapeURL.indexOf('/',first+7);
    var third = shapeURL.indexOf('/',second+1);
    var shape = shapeURL.substring(second+1, third);
    
    
    //alert("url(images/belso_png/"+shape+"/"+shape+"_"+materials[materialID]+colorID+".png)");
    belso.style.backgroundImage = 'url("images/belso_png/'+shape+"/"+shape+"_"+materials[material]+colorid+".png\")";
var belso_div = document.getElementById("belso_div");
	belso_div.innerHTML = 'images/belso_png/'+shape+"/"+shape+"_"+materials[material]+colorid+".png";
    //alert( belso.style.backgroundImage );
    //alert('url(images/belso_png/'+shape+"/"+shape+"_"+materials[materialID]+colorID+".png)");
}

function changeMaterial(){
    //alert(materialID);
    var dropdown = document.getElementById("tipus");
    var materialID = dropdown.options[dropdown.selectedIndex].value;

    var anyag = document.getElementById("anyag");
	anyag.innerHTML = materialID;
	leiras(materialID);
    var felirat = document.getElementById("felirat");
    felirat.innerHTML = materialNames[materialID];
    var felirat2 = document.getElementById("felirat2");
    felirat2.innerHTML = materialNames[materialID];
    var szinpaletta = document.getElementById("szinpaletta");
    szinpaletta.innerHTML = "";
    for(i=1;i<=colors[materialID];i++){
        szinpaletta.innerHTML += '<div class="szin_20x20" onclick="changeBackground('+materialID+', '+i+')"><img src="images/20X20/'+materials[materialID]+'/'+materials[materialID]+i+'.jpg" width="20" height="20" /></div>';
    }
    var szinpaletta2 = document.getElementById("szinpaletta2");
    szinpaletta2.innerHTML = "";
    for(i=1;i<=colors[materialID];i++){
        szinpaletta2.innerHTML += '<div class="szin_20x20" onclick="changeForeground('+materialID+', '+i+')"><img src="images/20X20/'+materials[materialID]+'/'+materials[materialID]+i+'.jpg" width="20" height="20" /></div>';
    }

changeBackground(materialID,1);
changeForeground(materialID,2);

szamol();
}

function changeShape(shape, term_id){
    var kulso = document.getElementById("kulso");
    var belso = document.getElementById("belso");
    var transp_div = document.getElementById("transp_div");
    var belso_div = document.getElementById("belso_div");
    var term = document.getElementById("term");
	term.innerHTML = term_id;
    materialID = document.getElementById("anyag").innerHTML;
    colorID = 2;
    kulso.src = "images/transparens/"+kulsofile[shape]+"_transparens.png";
    belso.style.backgroundImage = 'url(images/belso_png/'+kulsofile[shape]+"/"+kulsofile[shape]+"_"+materials[materialID]+colorID+".png)";

	belso_div.innerHTML = 'images/belso_png/'+kulsofile[shape]+"/"+kulsofile[shape]+"_"+materials[materialID]+colorID+".png";
	transp_div.innerHTML = "images/transparens/"+kulsofile[shape]+"_transparens.png";
szamol();
}