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

var objFrame;
var objUploadMessage;
var objUploadProgress;
var objFramePicture;

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

function initPhotoUpload()
{
    objFrame = document.getElementById('divFrame');
    objUploadMessage = document.getElementById('divUploadMessage');
    objUploadProgress = document.getElementById('divUploadProgress');
    objFramePicture = document.getElementById('ifrPhoto');

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

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

        //Baisic validation for Photo
        objUploadMessage.style.display = 'none';

        if (filPhoto.value.length == 0)
        {
            objUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Please specify the file.</span>';
            objUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

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

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

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

function beginPhotoUploadProgress()
{
    objUploadProgress.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);
    }

    objUploadProgress.style.display = 'none';
    objUploadMessage.style.display = 'none';
    objFrame.style.display = '';

    if (message.length)
    {
        var color = (isError) ? '#ff0000' : '#008000';

        objUploadMessage.innerHTML = '<span style=\"color:' + color + '\;font-weight:bold">' + message + '</span>';
        objUploadMessage.style.display = '';

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

function resizePicture()
{
    var objImage = document.getElementById('imgPicture');
    if (objImage.src.length == 0) {
        objImage.style.visibility = 'hidden';}
    else {
        var objControlContainer = objImage.parentElement.parentElement; //we skip the Ajax panel to get to its container
        var width = objControlContainer.offsetWidth;
        var height = objControlContainer.offsetHeight;
        var screenRatio = height / width;
        var imageRatio = objImage.height / objImage.width;  
        if (screenRatio < imageRatio) {
                objImage.style.height = height + 'px';
                objImage.style.width = null; }
        else {
               objImage.style.width = width + 'px';
               objImage.style.height = null; }      
        objImage.style.visibility = 'visible';}
}