var PROGRESS_INTERVAL = 500;
var PROGRESS_COLOR = '#000080';

var _divFrame;
var _divUploadMessage;
var _divUploadProgress;
var _ifrPhoto;

var _loopCounter = 1;
var _maxLoop = 10;
var _photoUploadProgressTimer;

function initPhotoUpload()
{
    _divFrame = document.getElementById('divFrame');
    _divUploadMessage = document.getElementById('divUploadMessage');
    _divUploadProgress = document.getElementById('divUploadProgress');
    _ifrPhoto = document.getElementById('ifrPhoto');

    var btnUpload = _ifrPhoto.contentWindow.document.getElementById('btnUpload');

    btnUpload.onclick = function(event)
    {
        var filPhoto = _ifrPhoto.contentWindow.document.getElementById('filPhoto');

        //Basic validation for Photo
        _divUploadMessage.style.display = 'none';

        if (filPhoto.value.length == 0)
        {
            _divUploadMessage.innerHTML = '<span class=\"ErrorText\">Please specify the file.</span>';
            _divUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

        //var regExp = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF|.png|.PNG|.bmp|.BMP)$/;
        var regExp = /(.*).(.jpg|.JPG|.gif|.GIF|.jpeg|.JPEG|.bmp|.BMP|.png|.PNG)$/;

        if (!regExp.test(filPhoto.value)) //Somehow the expression does not work in Opera
        {
            _divUploadMessage.innerHTML = '<span class=\"ErrorText\">Invalid file type. Only supports jpg, gif, png and bmp.</span>';
            _divUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

        beginPhotoUploadProgress();
        _ifrPhoto.contentWindow.document.getElementById('photoUpload').submit();
        _divFrame.style.display = 'none';
    }
}

function beginPhotoUploadProgress()
{
    _divUploadProgress.style.display = '';
    clearPhotoUploadProgress();
    _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
}

function clearPhotoUploadProgress()
{
    for (var i = 1; i <= _maxLoop; i++)
        document.getElementById('tdProgress' + i).style.backgroundColor = 'transparent';

    document.getElementById('tdProgress1').style.backgroundColor = PROGRESS_COLOR;
    _loopCounter = 1;
}

function updatePhotoUploadProgress()
{
    _loopCounter += 1;

    if (_loopCounter <= _maxLoop)
        document.getElementById('tdProgress' + _loopCounter).style.backgroundColor = PROGRESS_COLOR;
    else 
        clearPhotoUploadProgress();

    if (_photoUploadProgressTimer)
        clearTimeout(_photoUploadProgressTimer);

    _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
}

function photoUploadComplete(message, isError)
{
    clearPhotoUploadProgress();
    
    if (_photoUploadProgressTimer)
        clearTimeout(_photoUploadProgressTimer);
    
    // case of the image was uploaded successfuly
    if (isError == false && message == "SUCCESS")
    {
		// trigger the event for displying the image
		var lnkShowUploadedImage = document.getElementById(lnkUploadedImageId);
		if (lnkShowUploadedImage.dispatchEvent)
		{
			var e = document.createEvent("MouseEvents");
			e.initEvent("click", true, true);
			lnkShowUploadedImage.dispatchEvent(e);
		}
		else
		{
			lnkShowUploadedImage.click();
		}
		
		// set the layout
		_divUploadProgress.style.display = 'none';
		_divUploadMessage.style.display = 'none';
		_divFrame.style.display = 'none';
    }
    else
    {
		_divUploadProgress.style.display = 'none';
		_divUploadMessage.style.display = 'none';
		_divFrame.style.display = '';

		if (message.length)
		{
			_divUploadMessage.innerHTML = '<span class=\"ErrorText\">' + message + '</span>';
			_divUploadMessage.style.display = '';

			if (isError)
			{
				_ifrPhoto.contentWindow.document.getElementById('filPhoto').focus();
			}
		}
    }
}