I am new to this and i really would like a help of some expert developer that for you might be a pretty easy task but for me it is really hard to achieve. I have a javascripts and i need it turned into a widget. I really don't know what im doing as i cannot turn into a widget.

The code is below: 

2. /*
3. 
   
4. CUSTOM FORM ELEMENTS
5. 
   
6. Created by Ryan Fait
7. www.ryanfait.com
8. 
   
9. The only things you may need to change in this file are the following
10. variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
11. 
    
12. The numbers you set for checkboxHeight and radioHeight should be one quarter
13. of the total height of the image want to use for checkboxes and radio
14. buttons. Both images should contain the four staages of both inputs stacked
15. on top of each other in this order: unchecked, unchecked-clicked, checked,
16. checked-clicked.
17. 
    
18. You may need to adjust your images a bit if there is a slight vertical
19. movement during the different stages of the button activation.
20. 
    
21. The value of selectWidth should be the width of your select list image.
22. 
    
23. Visit http://ryanfait.com/ for more information.
24. 
    
25. */
26. 
    
27. var checkboxHeight = "53";
28. var radioHeight = "25";
29. var selectWidth = "190";
30. 
    
31. 
    
32. /* No need to change anything after this */
33. 
    
34. 
    
35. document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
36. 
    
37. var Custom = {
38. init: function() {
39. var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
40. for(a = 0; a < inputs.length; a++) {
41. if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
42. span[a] = document.createElement("span");
43. span[a].className = inputs[a].type;
44. 
    
45. if(inputs[a].checked == true) {
46. if(inputs[a].type == "checkbox") {
47. position = "0 -" + (checkboxHeight*2) + "px";
48. span[a].style.backgroundPosition = position;
49. } else {
50. position = "0 -" + (radioHeight*2) + "px";
51. span[a].style.backgroundPosition = position;
52. }
53. }
54. inputs[a].parentNode.insertBefore(span[a], inputs[a]);
55. inputs[a].onchange = Custom.clear;
56. if(!inputs[a].getAttribute("disabled")) {
57. span[a].onmousedown = Custom.pushed;
58. span[a].onmouseup = Custom.check;
59. } else {
60. span[a].className = span[a].className += " disabled";
61. }
62. }
63. }
64. inputs = document.getElementsByTagName("select");
65. for(a = 0; a < inputs.length; a++) {
66. if(inputs[a].className == "styled") {
67. option = inputs[a].getElementsByTagName("option");
68. active = option[0].childNodes[0].nodeValue;
69. textnode = document.createTextNode(active);
70. for(b = 0; b < option.length; b++) {
71. if(option[b].selected == true) {
72. textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
73. }
74. }
75. span[a] = document.createElement("span");
76. span[a].className = "select";
77. span[a].id = "select" + inputs[a].name;
78. span[a].appendChild(textnode);
79. inputs[a].parentNode.insertBefore(span[a], inputs[a]);
80. if(!inputs[a].getAttribute("disabled")) {
81. inputs[a].onchange = Custom.choose;
82. } else {
83. inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
84. }
85. }
86. }
87. document.onmouseup = Custom.clear;
88. },
89. pushed: function() {
90. element = this.nextSibling;
91. if(element.checked == true && element.type == "checkbox") {
92. this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
93. } else if(element.checked == true && element.type == "radio") {
94. this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
95. } else if(element.checked != true && element.type == "checkbox") {
96. this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
97. } else {
98. this.style.backgroundPosition = "0 -" + radioHeight + "px";
99. }
100. },
101. check: function() {
102. element = this.nextSibling;
103. if(element.checked == true && element.type == "checkbox") {
104. this.style.backgroundPosition = "0 0";
105. element.checked = false;
106. } else {
107. if(element.type == "checkbox") {
108. this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
109. } else {
110. this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
111. group = this.nextSibling.name;
112. inputs = document.getElementsByTagName("input");
113. for(a = 0; a < inputs.length; a++) {
114. if(inputs[a].name == group && inputs[a] != this.nextSibling) {
115. inputs[a].previousSibling.style.backgroundPosition = "0 0";
116. }
117. }
118. }
119. element.checked = true;
120. }
121. },
122. clear: function() {
123. inputs = document.getElementsByTagName("input");
124. for(var b = 0; b < inputs.length; b++) {
125. if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
126. inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
127. } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
128. inputs[b].previousSibling.style.backgroundPosition = "0 0";
129. } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
130. inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
131. } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
132. inputs[b].previousSibling.style.backgroundPosition = "0 0";
133. }
134. }
135. },
136. choose: function() {
137. option = this.getElementsByTagName("option");
138. for(d = 0; d < option.length; d++) {
139. if(option[d].selected == true) {
140. document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
141. }
142. }
143. }
144. }
145. window.onload = Custom.init;

As you can see this is a code downloaded from a great website ryanfait but i cannot use it as it is i have to transform it into a widget.

Can anyone please help me out with this issue. 

Regards & Thanks

M