TT_Finder = Class.create();
TT_Finder.prototype = {
  	initialize: function(options) {
  	    this.id = '';
  	    this.nav = {};
  	    this.data = {};
  	    this.path = '/';
  	    this.cur = '';
  	    this.showField = true;
  	    this.inputvalue = '';
  	    this.inputname = 'myfile';
        this.onSelected = new Function;
  	    this.container = new Element('div',{});
  	    this.uploadaction = ANTIKGUIDE_PATH+'photos/finderUpload';
  	    this.getimgsaction = ANTIKGUIDE_PATH+'photos/finderData';
        Object.extend(this, options);
        if (this.showField) this.tt_create();
        else this.tt_onShow();
  	},

    tt_getValue: function () {
        return $(this.id+'_image').value;
    },

    tt_initObserve: function () {
        var onUpload = this.tt_onUpload.bindAsEventListener(this);
        var onCancel = this.tt_onCancel.bindAsEventListener(this);
        Event.observe('btn_upload', 'click', onUpload, false);
        Event.observe('btn_cancel', 'click', onCancel, false);
    },

    /************************************************************\
     Create Input Image
    \************************************************************/
    tt_create: function () {
        var html = '';
        html += '<div class="finder_field">';
        html += '<input id="'+this.id+'_image" class="finder_input" ';
        html +=     'type="text" value="'+this.inputvalue+'" />';
        html += '</div>';
        html += '<div class="finder_buttons">';
        html += '<a href="javascript://" id="'+this.id+'_btn_insert" ';
        html +=     '>Browse</a>';
        html += '</div>';
        this.container.innerHTML = html;
        var onShow = this.tt_onShow.bindAsEventListener(this);
        Event.observe(this.id+'_btn_insert', 'click', onShow, false);
    },

    /************************************************************\
     Create Finder
    \************************************************************/
	tt_createFinder: function () {
        var html = '';
        html += '<table class="finder_table"><tbody><tr>';
        html += '<td valign="top" class="finder_nav_col">';
        html +=     '<div id="finder_nav" ';
        html +=         'class="finder_nav">';
        html +=     this.tt_createNavigation();
        html += '</div></td>';
        html += '<td valign="top"><div id="finder_content" ';
        html +=     'class="finder_content"></div>';
        html +=     this.tt_createUploadForm();
        html += '</td>';
        html += '</tr></tbody></table>';
        html += '<div id="finder_path">Menu</div>';
        this.dialog.content = html;
        this.dialog.tt_loadContent();
        this.tt_initObserve();
        this.tt_loadContent();
    },
    
    /************************************************************\
     Create Finder Navigation
    \************************************************************/
    tt_createNavigation: function () {
        var html = '';
        html += '<div class="finder_nav_item finder_nav_root">';
        html +=     '<a class="finder_expanded" ';
        html +=         'href="javascript://">&nbsp;</a>';
        html +=     '<a id="root_0" href="javascript://" ';
        html +=         'onclick="onFolderClick(this)">Menu</a>';
        html += '</div>';
        html += '<div class="finder_nav_item finder_nav_root">';
        html +=     this.tt_createNav(this.nav, 'root', 0);
        html += '</div>';
        return html;
    },
    
    tt_createNav: function (_data, folder, lavel, path) {
        var images = [], html = '', style='';
        if (_data.length!=undefined) return '';
        var items = $H(_data).keys();
        for (var i=0; i<items.length; i++) {
            var item = items[i];
            if (item.indexOf('.')<=0) {
                var childHTML = this.tt_createNav(_data[item], item, lavel+1, path);
                var title = item, id = item+'_'+(lavel+1);
                html += this.tt_createNavItem(id, title, childHTML);
            } else images.push(_data[item]);
        }
        this.data[folder+'_'+lavel] = images;
        if (lavel>0) style = 'style="display:none;"';
        var htmlstr  = '<ul id="finder_nav_lavel_'+lavel+'" ';
        htmlstr += 'title="'+folder+'"';
        htmlstr += 'class="nav" '+style+' >'+html+'</ul>';
        return htmlstr;
    },
    
    tt_createNavItem: function (id, title, childHTML) {
        var html = '';
        html += '<li>';
        html += '<a class="collapsed" href="javascript://" ';
        html +=     'onclick="finderNavExpand(this)">&nbsp;</a>';
        html += '<a id="'+id+'" class="folder" title="'+title+'" href="javascript://"';
        html +=     'onclick="onFolderClick(this)">'+title+'</a>';
        html += childHTML+'</li>';
        return html
    },
    
    tt_navExpand : function (elm) {
        if (elm.parentNode==undefined)
            elm = elm.currentTarget;
        var parent = elm.parentNode;
        var child = parent.childNodes[2];
        if (child) child.show();
        elm.removeClassName('collapsed');
        elm.addClassName('expanded');
        elm.onclick = this.tt_navCollaps.bindAsEventListener(this);
    },
    
    tt_navCollaps : function (e) {
        var elm = e.currentTarget;
        var parent = elm.parentNode;
        var child = parent.childNodes[2];
        if (child) child.hide();
        elm.removeClassName('expanded');
        elm.addClassName('collapsed');
        elm.onclick = this.tt_navExpand.bindAsEventListener(this);
    },
    
    /************************************************************\
     Create Finder Upload Form
    \************************************************************/
    tt_createUploadForm: function () {
        var html = '';
        html += '<form id="frm_upload" name="frm_upload" class="finder_form" ';
        html +=     'method="post" enctype="multipart/form-data" target="ajax_upload_target">';
        html += '<input type="hidden" id="upload_dir" name="directory" value="/" />'
        html += '<div class="buttons">';
        html +=     '<input type="file" id="finder_upload" ';
        html +=         'name="'+this.inputname+'" value="" />';
        html +=     '<input type="button" id="btn_upload" value="Upload" />';
        html +=     '<input type="button" id="btn_cancel" value="Cancel" />';
        html += '</div>';
        html += '</form>';
        return html
    },
    
    /************************************************************\
     Load/Update Finder Content
    \************************************************************/
    tt_loadContent: function (folder) {
        var html = '';
        if (!folder) folder='root_0';
        var imgs = this.data[folder];
        this.cur = folder;
        if (imgs!=undefined) {
            for (var i=0; i<imgs.length; i++) {
                html += '<img width="100" src="'+imgs[i]+'"';
                html +=     'onclick="onSlcImage(this)" />';
            }
        }
        $('finder_content').innerHTML = html;
    },

    tt_updateContent: function (img) {
        var html = '';
        if (img) {
            html += '<img width="100" src="'+img+'"';
            html +=     'onclick="onSlcImage(this)" />';
            $('finder_content').innerHTML += html;
            if (this.data[this.cur])
                this.data[this.cur].push(img);
            else this.data[this.cur] = new Array;
        }
        this.dlgLoading.tt_close();
    },

    /************************************************************\
     Finder Events
    \************************************************************/    
    tt_onShow: function () {
        this.dialog = new TT_Form({
            width: 600,
            title: 'Image Browser'
        });
        new Ajax.Request( this.getimgsaction, {
            onComplete: function (transport) {
                var r = transport.responseText;
                try {this.nav = eval('obj='+r);
                } catch (e) {this.nav = {}};
                window.onSlcImage = this.tt_onSelected.bind(this);
                window.onFolderClick = this.tt_onFolderClick.bind(this);
                window.finderNavExpand = this.tt_navExpand.bind(this);
                this.tt_createFinder();
            }.bind(this)
        });
    },

    tt_onFolderClick: function (elm) {
        if (elm.id=='root_0') {
            this.path = '/';
            $('upload_dir').value = '/'
            $('finder_path').innerHTML = 'Menu/';
            this.tt_loadContent(elm.id);
            this.dialog.tt_setTitle('Image Browser');
            return;
        }
        var parent = elm.parentNode;
        this.tt_navExpand(parent.childNodes[0]);
        parent = parent.parentNode;
        this.path = elm.title;
        while (parent.id!='finder_nav_lavel_0') {
            this.path = parent.title + '/' + this.path;
            parent = parent.parentNode;
            parent = parent.parentNode;
        }
        $('upload_dir').value = '/' + this.path + '/';
        $('finder_path').innerHTML = 'Menu/' + this.path;
        this.dialog.tt_setTitle('Image Browser - '+this.path);
        this.tt_loadContent(elm.id);
    },

    tt_onSelected: function (imgElm) {
        var imgSRC = imgElm.src;
        var idx = imgSRC.indexOf('//');
        imgSRC = imgSRC.substring(idx+2);
        var idx = imgSRC.indexOf('/');
        var l = ANTIKGUIDE_PATH.length;
        imgSRC = imgSRC.substring(idx+l);
        var imgField = $(this.id+'_image');
        if (imgField) imgField.value = imgSRC;
        this.dialog.tt_close();
        if (typeof this.onSelected=='function')
            this.onSelected(imgElm.src);
        window.onSlcImage = new Function;
        window.onFolderClick = new Function;
        window.finderNavExpand = new Function;
    },
    
    tt_onUpload: function () {
        if (this.path=='/') {
            var msg = 'Please choose menu folder (e.g Portlet) !';
            new TT_Error(msg); return;
        }
        if ($('finder_upload').value=='') return;
        this.dlgLoading = new TT_Form({title:'Loading...', zIndex: 12000});
        new Ajax.Upload({
            url: this.uploadaction,
            uploadform: document['frm_upload'],
            onComplete: this.tt_updateContent.bind(this)
        });
    },
    
    tt_onCancel: function () {
        window.onSlcImage = new Function;
        window.onFolderClick = new Function;
        window.finderNavExpand = new Function;
        this.dialog.tt_close();
    }
}