$(document).ready(function(){




$("#button").click(function(){

alert($("#select").val());

});




$(".f").each(function(i,elm){

var id = 'f_' + i;

if($(this).css('display') != 'none'){
replaceControl(id,elm);
}

});




});


function replaceControl(id,elm){

if(elm.type == 'select-one'){
//alert('select');
replaceSelect(id,elm);
}else if(elm.type == 'radio'){

replaceRadio(id,elm);

}else if(elm.type == 'checkbox'){

replaceCheckbox(id,elm);
}

}



//------------------CHECKBOX

function replaceCheckbox(id,elm){
$(elm).hide();
var img = $(document.createElement("IMG"));
img.attr({
			"class":"f_checkbox",
			id:id,
			"align":'absmiddle'
			
			});

if(elm.checked == true){
img.attr({'src':'Control/checkbox1.gif'});
}else{
img.attr({'src':'Control/checkbox0.gif'});
}

img.insertBefore(elm);

img.click(function(){

if(elm.checked == true){
elm.checked = false;
img.attr({'src':'Control/checkbox0.gif'});
}else{
elm.checked = true;
img.attr({'src':'Control/checkbox1.gif'});

}

});

}


//----------------------------------RADIO

function replaceRadio(id,elm){
$(elm).hide();
var img = $(document.createElement("IMG"));
img.attr({
			"class":"f_radio",
			id:id,
			"name":elm.name,
			"align":'absmiddle'
			});

if(elm.checked == true){
img.attr({'src':'Control/radio1.gif'});
}else{
img.attr({'src':'Control/radio0.gif'});
}

img.insertBefore(elm);

img.click(function(){

$("img[@name='" + elm.name + "']").attr({'src':'Control/radio0.gif'});




elm.checked = true;
img.attr({'src':'Control/radio1.gif'});


});

}



//------------------------------------SELECT



function replaceSelect(id,elm){




var ow = $(elm).width();
var oh = $(elm).height();


var sout = $(document.createElement("div"));
sout.attr({
			"class":"f_select",
			id:id
			});
sout.css({
'width':ow + 'px',
'float':'left',
'background':'url(fime/select.jpg)'

});

var sright = $(document.createElement("div"));
sright.attr({
'class':'selectRight'
});

var e = $(elm).children('option:selected').text();
sout.text(e);


sout.insertBefore(elm);
sright.insertAfter(sout);
//CL.insertAfter(sright);

$(elm).hide();













$(sright).click(function(){

if ( $("div.PullDownList").length > 0 ) {
noo();
//return false;
 }

var offset = $("#" + id + "").offset();
var offleft = offset.left;
var offtop = offset.top + oh + 4;

var www = sout.width() + sright.width() + 4;

var pulldownList = $(document.createElement("div"));
pulldownList.attr({id:'pulldownList',
'class':'PullDownList'
});
pulldownList.css({
'display':'none',
'position':'absolute',
'width':www + 'px',
'top':offtop + 'px',
'left':offleft + 'px',
'z-index':999
});

var numList = 0;

$(elm).children('option').each(function(){

var k = $(document.createElement("div"));
k.attr({'class':'l'
});
k.text($(this).text());
pulldownList.append(k);

numList ++;


});



if(numList > 10){

pulldownList.css({
'height':150 + 'px'
});

}
$('body').append(pulldownList);
//pulldownList.append('body');
pulldownList.slideDown(function(){

$(document).click(function(){
noo();
});

});
	
    pulldownList.bind("mouseleave",function(){    
	   setTimeout("noo()",300);
	  });
	
$(".l").click(function(){

var v = $(this).text();

sout.text(v);
$("select[@name='" + elm.name + "']").val(v);

});

});



  $(".f_select").hover(function(){
$(this).next().addClass("koko");
},function(){
$(this).next().removeClass("koko");
});



$(sout).click(function(){

if ( $("div.PullDownList").length > 0 ) {
noo();
//return false;
 }

var offset = $("#" + id + "").offset();
var offleft = offset.left;
var offtop = offset.top + oh + 4;

var www = sout.width() + sright.width() + 4;

var pulldownList = $(document.createElement("div"));
pulldownList.attr({id:'pulldownList',
'class':'PullDownList'
});
pulldownList.css({
'display':'none',
'position':'absolute',
'width':www + 'px',
'top':offtop + 'px',
'left':offleft + 'px',
'z-index':999
});

var numList = 0;

$(elm).children('option').each(function(){

var k = $(document.createElement("div"));
k.attr({'class':'l'
});
k.text($(this).text());
pulldownList.append(k);

numList ++;


});



if(numList > 10){

pulldownList.css({
'height':150 + 'px'
});

}
$('body').append(pulldownList);
//pulldownList.append('body');
pulldownList.slideDown(function(){

$(document).click(function(){
noo();
});

});
	
    pulldownList.bind("mouseleave",function(){    
	   setTimeout("noo()",300);
	  });
	
$(".l").click(function(){

var v = $(this).text();

sout.text(v);
$("select[@name='" + elm.name + "']").val(v);

});

});


}
  function noo(){
  $(".PullDownList").remove();
  $(document).unbind('click');
  }