/*
This scrip includes a function for applying a skin to Browse button of the fileupload control.
The function creates a text box and image html controls. Those controls are positioned with css styles on front of the fileUpload
control. The fileupload control is actually invisible, but active. 
When the image is clicked, we clicked on the Browse button behind the image. 
The function also provides functionality the file path to be copied in the fake text box and to be seen from the end user.
*/
function CreateFakeFileUpload()
{
    var W3CDOM = (document.createElement && document.getElementsByTagName);
    if (!W3CDOM) return;
    if (document.getElementById("divFileUploader") != null)
    {
        var fakeFileUpload = document.createElement('div');
        fakeFileUpload.className = 'fakefile';
        fakeFileUpload.appendChild(document.createElement('input'));
        var image = document.createElement('img');
        image.src='../App_Themes/HfDefault/Images/browseButton.png';
        fakeFileUpload.appendChild(image);
        var x = document.getElementsByTagName('input');
        for (var i=0; i<x.length; i++) 
        {
            if ((x[i].type == 'file') && x[i].getAttribute('noscript'))
            {
                x[i].className = 'filehidden';
                var clone = fakeFileUpload.cloneNode(true);
                x[i].parentNode.appendChild(clone);
                x[i].relatedElement = clone.getElementsByTagName('input')[0];
                x[i].onchange = x[i].onmouseout = function () {
                    this.relatedElement.value = this.value;
                    }
                break;
            }
        }
    }
}