/**
 * Global variables.
 */
permFiles        = null;
preselectedItem  = 0;  // Preselected option/folder
imgId            = 0;
limtedObjects    = false;

/**
 * Adds or removes tag from the file based if the file is tagged
 * with the selected tag or not.
 *
 * @param id  - Id of the file
 * @param tag - The tag
 */
function updateTag(fileId, tagId, tagName) {
    if (typeof(tagName) == 'undefined') { 
        tagName = '';
    }
    new Ajax.Request('/ajax/group/'+globalGroupId+'/updateTag', {
        parameters: 'fileId='+fileId+'&tagId='+tagId+'&tagName='+tagName,
        onFailure: displayAjaxError
    });
}

/**
 * Initialize the process of changing file information such as tags, filename etc.
 *
 * @param indexUrl - Url sent by view to receive json object from.
 */
function initEditFile(fileId)
{
    /* Untoggle if the form is visible  */
    if ($('fileInformation').style.display == 'none') {
        toggleBlind('fileInformation', 'edit');
    } 
    /* Remove the current DOMs build by displayEditForm() */
    for(x=$('editFile').childNodes.length-1; x>=0; x--) {
        $('editFile').removeChild($('editFile').childNodes[x]);
    }
    var indexUrl = "/ajax/group/"+globalGroupId+"/file/"+fileId;
    new Ajax.Request(indexUrl, {
        parameters: '',
        onSuccess: displayEditForm,
        onFailure: displayAjaxError
    });
}

/**
 * Builds all all DOM objects except the folder list needed to change file information
 *
 * @todo str_replace om comment
 * @todo Delete function
 *
 * @param t - Sent by initEditPicture(). Json object with all information needed to build DOMs.
 */
function displayEditForm(t) {
    var serverData          = eval('(' + t.responseText + ')');
    var permGallery         = serverData.showTags;
    var fileBasePath        = serverData.fileBasePath;
    var uploader            = serverData.uploader;
    var folderList          = serverData.folderList;
    var title               = serverData.title;
    var size                = serverData.size;
    var mimeType            = serverData.mimeType;
    var ctime               = serverData.ctime;
    var comment             = serverData.comment;
    var fileId              = serverData.id;
    var tags                = serverData.groupTags;
    var folderId            = serverData.folderId;
    var textTitle           = serverData.textTitle;
    var textSize            = serverData.textSize;
    var textMimeType        = serverData.textMimeType;
    var textCtime           = serverData.textCtime;
    var textUploader        = serverData.textUploader;
    var textFolder          = serverData.textFolder;
    var textComment         = serverData.textComment;
    var textDownload        = serverData.textDownload;
    var textAltDownload     = serverData.textAltDownload;
    var textShow            = serverData.textShow;
    var textAltShow         = serverData.textAltShow;
    var textDelete          = serverData.textDelete;
    var textAltDelete       = serverData.textAltDelete;
    var textAddOrRemoveTags = serverData.textAddOrRemoveTags;
    var replaceFile         = serverData.replaceFile;
    var replaceFileWith     = serverData.replaceFileWith;
    var tagTopicText        = serverData.tagTopic;
    permFiles               = serverData.userInteractivable;
    
    // Main div 
    var div = Builder.node('div');
    div.id = 'mainElement';
    
    // Hidden input containing id
    var hiddenInput = Builder.node('input', {'type': 'hidden'});
    hiddenInput.value = fileId;
    hiddenInput.name = 'fileId';
    div.appendChild(hiddenInput);
    
    var hiddenFolderId = Builder.node('input', {'type': 'hidden'});
    hiddenFolderId.value = folderId;
    hiddenFolderId.name = 'uploadFolderId';
    div.appendChild(hiddenFolderId);

    // Picture link
    var a = Builder.node('a');
	a.rel = tags ? 'lightbox' : null;
    a.title = comment;
    div.appendChild(a);
    
    // Picture
    var img = Builder.node('img');
    img.style.position = 'relative';
    img.alt = comment;

    img.style.cssFloat = 'right';
    img.style.styleFloat = 'right';
    img.style.border = '1px solid #CCCCCC';
    switch (mimeType) {
        case 'image/jpeg':
        case 'image/pjpeg':
        case 'image/gif':
        case 'image/png':
            a.href = fileBasePath+'/file/show/'+fileId;
            img.src = fileBasePath+'/file/show/'+fileId+'?width=150&height=150';
        break; 
        default: 
            a.href = fileBasePath+'/file/show/'+fileId;
            img.src = '/images/x-office-document.png';
            img.width = 150;
            img.height = 150;
        break;
    }
    a.appendChild(img);

    /** 
     * Definition list
     */
    var dl = Builder.node('dl');
    div.appendChild(dl);
    
    // Name
    var dt = Builder.node('dt');
    dt.innerHTML = textTitle;
    dl.appendChild(dt);    
    
    var dd = Builder.node('dd');
    dl.appendChild(dd);

    var pFileNameEditor = Builder.node('p');
    pFileNameEditor.id = 'fileNameEditor';
    pFileNameEditor.innerHTML = title;
    dd.appendChild(pFileNameEditor);

    if (permFiles) {
        var fileNameImg = Builder.node('img');
        fileNameImg.id = 'editFileNameImg';
        fileNameImg.src = '/images/accessories-text-editor.png';
        dt.appendChild(fileNameImg);
    }
    
    // MIME
    var dt1 = Builder.node('dt');
    dt1.innerHTML = textMimeType;
    dl.appendChild(dt1);    

    var dd1 = Builder.node('dd');
    dd1.innerHTML = mimeType;
    dl.appendChild(dd1);

    // File size
    var dt2 = Builder.node('dt');
    dt2.innerHTML = textSize;
    dl.appendChild(dt2);    
    
    var dd2 = Builder.node('dd');
    dd2.innerHTML = size;
    dl.appendChild(dd2);

    // Time of last change
    var dt3 = Builder.node('dt');
    dt3.innerHTML = textCtime;
    dl.appendChild(dt3);    

    var dd3 = Builder.node('dd');
    dd3.innerHTML = ctime;
    dl.appendChild(dd3);
    
    // Uploaded by
    var dt4 = Builder.node('dt');
    dt4.innerHTML = textUploader;
    dl.appendChild(dt4);    

    var dd4 = Builder.node('dd');
    dd4.innerHTML = uploader;
    dl.appendChild(dd4);

    // Stored in folder
    var dt5 = Builder.node('dt');
    dt5.innerHTML = textFolder;
    //        dl.appendChild(dt5);    

    var dd5 = Builder.node('dd');
    dd5.id = 'folderListNode';
    //        dl.appendChild(dd5);
    
    // Uploaded by
    var dt6 = Builder.node('dt');
    dt6.innerHTML = textComment;
    dl.appendChild(dt6);    

    var dd6 = Builder.node('dd');
    dl.appendChild(dd6);
    
    if (permFiles) {
        // Comment
        var commentImg = Builder.node('img');
        commentImg.style.top = '1px';
        commentImg.id = 'editFileCommentImg';
        commentImg.src = '/images/accessories-text-editor.png';
        commentImg.alt = 'Edit';
        dt6.appendChild(commentImg);
    }
    
    var p = Builder.node('p');
    p.id = 'fileCommentEditor';
    p.innerHTML = comment;
    dd6.appendChild(p); 
    
    /**
     * Action bar
     */
    

    // Download
    var actionBar = Builder.node('div');
    actionBar.style.borderTop = '1px solid #CCCCCC';
    div.appendChild(actionBar);       
    
    var aDownload = Builder.node('a');
    aDownload.className = 'actionButton';
    aDownload.href = fileBasePath+'/file/download/'+fileId;
    aDownload.title = textAltDownload;
    actionBar.appendChild(aDownload); 

    var imgDownload = Builder.node('img');
    imgDownload.src = '/images/document-save.png';
    imgDownload.alt = textAltDownload;
    imgDownload.style.valign = 'middle';
    aDownload.appendChild(imgDownload);

    var divDownload = Builder.node('div');
    divDownload.innerHTML = textDownload;
    divDownload.className = 'buttonText';
    aDownload.appendChild(divDownload);
   


    // Show
    var aShow = Builder.node('a');
    aShow.className = 'actionButton';
    aShow.href = fileBasePath+'/file/show/'+fileId;
    aShow.title = textAltShow;
    actionBar.appendChild(aShow); 

    var imgShow = Builder.node('img');
    imgShow.src = '/images/document-save.png';
    imgShow.alt = textAltShow;
    imgShow.style.valign = 'middle';
    aShow.appendChild(imgShow);

    var divShow = Builder.node('div');
    divShow.innerHTML = textShow;
    divShow.className = 'buttonText';
    aShow.appendChild(divShow);







    if (permFiles) {
        // Delete
        var aDelete = Builder.node('a', { 'onclick': 'if (!confirm(\'Are you sure you want to delete this file?\')) { return false; }' });
        aDelete.className = 'actionButton';
        aDelete.href = fileBasePath+'/file/delete/'+fileId;
        aDelete.title = textAltDelete;
        actionBar.appendChild(aDelete); 

        var imgDelete = Builder.node('img');
        imgDelete.src = '/images/edit-delete.png';
        imgDelete.alt = textAltDelete;
        imgDelete.style.valign = 'middle';
        aDelete.appendChild(imgDelete);

        var divDelete = Builder.node('div');
        divDelete.innerHTML = textDelete;
        divDelete.className = 'buttonText';
        aDelete.appendChild(divDelete);

		var actionBarClearBoth = Builder.node('div', { 'style': 'clear: both' });
		actionBar.appendChild(actionBarClearBoth);

        var replaceDiv = Builder.node('div');
        replaceDiv.className = 'box';
        div.appendChild(replaceDiv);
   
        var labelForReplaceFile = Builder.node('label');
        labelForReplaceFile.style.fontWeight = '800';
        labelForReplaceFile.innerHTML = replaceFileWith;
        replaceDiv.appendChild(labelForReplaceFile);

        var replaceBr = Builder.node('br');
        labelForReplaceFile.appendChild(replaceBr);

        var replaceInput = Builder.node('input', { 'type': 'file' });
        replaceInput.id = 'replaceFile';
        replaceInput.name = 'replaceFile';
        replaceInput.size = 15;
        replaceDiv.appendChild(replaceInput);
        
        var replaceSubmit = Builder.node('input', { 'type': 'submit' });
        replaceSubmit.value = replaceFile;
        replaceSubmit.name = 'postReplace';
        replaceDiv.appendChild(replaceSubmit);
    }

    // Br clear to fix floating 
    var emptyDiv = Builder.node('div');
    emptyDiv.style.clear = 'both';
    div.appendChild(emptyDiv);   
    if (permGallery) {
        var tagContainer = Builder.node('div');
        tagContainer.className = 'box';
        tagContainer.id = 'tagContainer';
        div.appendChild(tagContainer);

        var tagCoTitle = Builder.node('strong');
        tagCoTitle.innerHTML = textAddOrRemoveTags;
        tagContainer.appendChild(tagCoTitle);

        var newTagDiv = Builder.node('div');
        tagContainer.appendChild(newTagDiv);            
        var tagTopicDiv = Builder.node('div');
        tagContainer.appendChild(tagTopicDiv);
       
        var tagTopicBr = Builder.node('br');
        tagTopicDiv.appendChild(tagTopicBr);
        
        var tagTopic = Builder.node('strong');
        tagTopic.innerHTML = tagTopicText;
        tagTopicDiv.appendChild(tagTopic);
        // Draw tags
        
        if (tags) {
            tags.each(function(tag) {
                drawTag(tag, fileId, tagContainer);
            }); 
        }

        var newTag = Builder.node('input', { 'type': 'text' });
        newTag.className = 'textarea';
        newTag.id = 'newTagName';
        newTagDiv.appendChild(newTag);
        var tagSubmit = Builder.node('input', { 'type': 'button', 'onclick': 'createNewTag($(\'newTagName\').value, '+fileId+', \'tagContainer\')' });
        tagSubmit.className = 'submit';
        tagSubmit.value = 'Add';
        newTagDiv.appendChild(tagSubmit);
    }
    
    if (permFiles) {
        aclEditor = Builder.node('div');
        aclEditor.className = 'box';
        div.appendChild(aclEditor);        
        var aclDiv = Builder.node('div');
        aclEditor.appendChild(aclDiv);
        var aStrong = Builder.node('strong');
        aStrong.innerHTML = ' Åtkomstregler';
        aclDiv.appendChild(aStrong);
        showAcl = Builder.node('div', { id: 'aclArea' }, [ initAclArea('/file/acl/'+fileId) ]);
        showAcl.id = 'aclArea';
        showAcl.style.display = 'block';
        showAcl.style.position = 'relative';
        aclEditor.appendChild(showAcl);
    }
    
    // Br clear to fix floating 
    var emptyDiv = Builder.node('div');
    emptyDiv.style.clear = 'both';
    div.appendChild(emptyDiv);
    // Create element
    $('editFile').appendChild(div);
    // In place editor
    if (permFiles) {
        new Ajax.InPlaceEditor('fileNameEditor', '/file/rename/'+fileId, {
            externalControl: 'editFileNameImg',
            size: 10,
            ajaxOptions: {onFailure: displayAjaxError, on403: displayAjaxError}
        }); 
        new Ajax.InPlaceEditor('fileCommentEditor', '/file/recomment/' + fileId, {
            externalControl: 'editFileCommentImg',
            rows: 3,
            cols: 30,
            ajaxOptions: {onFailure: displayAjaxError, on403: displayAjaxError}
        });
    }
}

function drawTag(tag, fileId, where) {
    if (tag.set) {
        var tagCheck = Builder.node('input', { 'type': 'checkbox', 'onchange': 'updateTag('+fileId+', '+tag.id+')', 'checked': 'true' });
    } else {
        var tagCheck = Builder.node('input', { 'type': 'checkbox', 'onchange': 'updateTag('+fileId+', '+tag.id+')' }); // IE need this
    }
    tagCheck.id = tag.name;
    if (!permFiles) { tagCheck.disabled = 'true'; }
    where.appendChild(tagCheck);
    var tagLabel = Builder.node('label', { 'for': tag.name });
    tagLabel.innerHTML = tag.name;
    where.appendChild(tagLabel);
} 

function createNewTag(tagName, fileId, where)
{
    if ($(tagName) != undefined) {
        displayError('Error', 'Duplicated entry of tag '+tagName);
        return false;
    }
    if (tagName.length < 1) {
        displayError('Error', 'Name is too sort.');
        return false;
    }
    updateTag(fileId, null, tagName);
    tag = new Object();
    tag.id = fileId;
    tag.name = tagName;
    tag.set = true;
    drawTag(tag, fileId, $(where));
}

/**
 * Builds the DOM objects used for listing folders and moving the file to new folders
 *
 * @param folderList    - An array of all folders and subfolders
 * @param folderId      - Pre-selected folder
 * @param appendTo      - Node id of DOM node to append objects to
 * @param onChangeEvent - onChange event when you select another folder
 * @param selectId      - Id of the select
 */
function listFolder(folderList, folderName, selectedFolder, appendTo, onChange, permFiles) {
    preselectedItem = 0;
    
    var selectDiv = Builder.node('div');
    $(appendTo).appendChild(selectDiv);
    var select = Builder.node('select', { 'onchange': ''+onChange+''/*, 'style': 'width: 10em;' */});
    select.name = folderName;
    select.id = getRandom();
    if (!permFiles) { select.disabled = 'true'; }
    option = Builder.node('option');
    option.value = 0;
    option.innerHTML = '/';
    select.appendChild(option);
    _recursiveFolderRender(folderList, selectedFolder, 1, select);
    select.selectedIndex = preselectedItem;
    selectDiv.appendChild(select);
}

/**
 * Builds the <select> based on folderList. It descends into subfolders by recursion.
 *
 * @param folderList - An array of all folders and subfolders
 * @param folderId   - The id of the folder the file is located in
 * @param steps      - How many "spaces" the subfolders should have
 * @param selectId   - Id of the select
 */
function _recursiveFolderRender(folderList, folderId, steps, select)
{
    var tmpSelected = 0;
    folderList.each(function(folder) {
        tmpSelected = tmpSelected+1;
        if(folderId == folder.id) { preselectedItem = tmpSelected; }

        var nbsp = "\u00A0".repeat(4*steps);
        subFolder = Builder.node('option', {value: folder.id}, nbsp+folder.name);
        select.appendChild(subFolder);

        if(folder.subfolders.length >= 1) {
            _recursiveFolderRender(folder.subfolders, folderId, steps+1, select);
        }
     });
}

/**
 * Repeat a "string" with .repeat(x);
 */
String.prototype.repeat = function(l){
    return new Array(l+1).join(this);
};

/**
 * Initialize the process of building all tags.
 *
 * @param indexUrl - Url sent by view to receive json object from.
 * @param groupId  - Id of the group sent by the view.
 * @param ofo      - One file only. If this param is set to true. You will only be able to select one file
 *                   All existing files will be unselected and faded
 */
function initShowTags(multipleSelected)
{
    limtedObjects = multipleSelected ? true : false;
    indexUrl = '/gallery/show/group/'+globalGroupId+'/galleries'
        new Ajax.Request(indexUrl, {
        onSuccess: displayTags,
        onFailure: displayAjaxError
    });
}

/**
 * List tags based on json return initialized by initShowTags().
 *
 * @param t - Json object
 */
function displayTags(t) {
    var serverData = eval('(' + t.responseText + ')');
    serverData.each(function(tag) {
        if (tag.total_images >= 1) {
            var node = document.createElement('option');
            node.text = tag.name;
            node.value = tag.id;
            try {
                $('availableTags').add(node, null);
            } catch(ex) {
                $('availableTags').add(node); // IE fix
            }
/*
            fontsize = largest * Math.sqrt(tag.tag_hits) + 7;
            var a = Builder.node('a', {href: '#', onclick: 'getTaggedFiles('+tag.id+'); return false;', style: 'font-size: '+fontsize+'px', 'class': 'tags' });
            a.innerHTML = tag.name+' ';
            $('viewTags').appendChild(a); */
        }
    });
}


function getTaggedFiles(tagId) {
    new Ajax.Request('/group/'+globalGroupId+'/gallery/fetchTaggedFiles', {  
        method: 'post',
        postBody: 'tagId='+tagId,
        parameters: '',
        onSuccess: displayTaggedFiles,
        onFailure: displayAjaxError
    });
}

function getTaggedFilesByName(tagName) {
    new Ajax.Request('/group/'+globalGroupId+'/gallery/fetchTaggedFiles', {  
        method: 'post',
        postBody: 'tagName='+tagName,
        parameters: '',
        onSuccess: displayTaggedFiles,
        onFailure: displayAjaxError
    });
}

/**
 * Display the tagged files
 *
 * @param t - Json object
 */
function displayTaggedFiles(t) {
    undisplayFiles('viewPictures');
    var serverData = eval('(' + t.responseText + ')');
    serverData.each(function(file) {
        var mainDiv = Builder.node('div');
        mainDiv.className = 'picture_frame';
        mainDiv.style.display = 'block';
        mainDiv.id = 'fileFrame';

        var div = Builder.node('div');
        div.style.cssFloat = 'right';
        div.style.styleFloat = 'right';
        mainDiv.appendChild(div);

        var pictureDiv = Builder.node('div');
        pictureDiv.style.clear = 'both';
        pictureDiv.style.display = 'block';
        div.appendChild(pictureDiv); 

        var a = Builder.node('a', { 'onclick': 'selectFile('+file.id+', \''+file.mime_type+'\', \''+file.name+'\', \''+file.comment+'\'); return false;' });
        a.id = 'tfIconId:'+file.id;
        a.alt = file.comment;
        a.href = '#';
        pictureDiv.appendChild(a);
        
        var img = Builder.node('img');
        img.className = 'picture';
        img.title = file.comment;
        img.src = 'http://www.sportnik.com/file/show/'+file.id+'?width=74&height=74';
        a.appendChild(img);

        var divContaingName = Builder.node('div');
        divContaingName.style.overflow = 'hidden';
        divContaingName.style.fontSize = '10px';
        divContaingName.innerHTML = file.name;

        $('viewPictures').appendChild(mainDiv);    
//        Effect.Appear('fileFrame', { duration: 0.2, scope: 'queue', queue: 'end' });
    });
    
    var divClearBoth = Builder.node('div');
    divClearBoth.style.clear = 'both';
    $('viewPictures').appendChild(divClearBoth);
}

/**
 * Removes the DOM objects
 */
function undisplayFiles(element) {
    for(x=$(element).childNodes.length-1; x>=0; x--) {
        $(element).removeChild($(element).childNodes[x]);
    }
}

/**
 * Fades away selected image
 */
function unselectFile(node) {
    new Effect.Fade(node, { duration: 0.5, afterFinish: deleteObj });
}

/**
 * Unselect/removed selected image
 */
function deleteObj(obj)
{
    $('selectedPictures').removeChild(obj.element); 
}

/**
 * Display the selected files under "Selected Attachments"
 *
 * @param id   - Id of the file
 * @param mime - MIME Type
 */
function selectFile(id, mime, name, comment) {
    if (limtedObjects) undisplayFiles('selectedPictures');

    if ($('fileId'+id)) {
        return;
    }
    // Everything seems fine
    var mainDiv = Builder.node('div');
    mainDiv.className = 'picture_frame';
    mainDiv.style.display = 'block';
    mainDiv.id = 'fileId'+id;
    
    var floatDiv = Builder.node('div');
    floatDiv.style.cssFloat = 'right';
    floatDiv.style.styleFloat = 'right';
    mainDiv.appendChild(floatDiv);

    var a = Builder.node('a', { 'onclick': 'unselectFile(this.parentNode.parentNode); return false;' });
    a.className = 'remove';
    a.title = 'Unselect';
    a.href = '#';
    floatDiv.appendChild(a);

    var img = Builder.node('img');
    img.alt = 'Unselect';
    img.src = '/images/emblem-unreadable.png';
    a.appendChild(img);

    var clearBothDiv = Builder.node('div');
    clearBothDiv.style.clear = 'both';
    clearBothDiv.style.display = 'block';
    mainDiv.appendChild(clearBothDiv);

    var cbA = Builder.node('a', { 'onclick': 'return false;' });
    cbA.id = 'thumbnailLinkId'+id,
    cbA.title = comment;
    cbA.href = '#';
    clearBothDiv.appendChild(cbA);

    var input = Builder.node('input', { 'type': 'hidden' });
    input.name = 'img['+imgId+']';
    input.value = id;
    mainDiv.appendChild(input);

    var divName = Builder.node('div');
    divName.style.overflow = 'hidden';
    divName.style.fontSize = '10px';
    divName.innerHTML = name;
    mainDiv.appendChild(divName);

    var thumbnail  = Builder.node('img');
    thumbnail.alt = comment;
    switch (mime) {
        case 'image/jpeg':
        case 'image/pjpeg':
        case 'image/png':
        case 'image/gif':
            thumbnail.src = 'http://www.sportnik.com/file/show/'+id+'?width=74&height=74';
        break;
        default:
            thumbnail.src = '/images/x-office-document_64.png';
        break;
    }
            
    $('selectedPictures').appendChild(mainDiv);
    $('thumbnailLinkId'+id).appendChild(thumbnail);
//    Effect.Appear('fileId'+id, { duration: 0.5 });
    imgId++;
}