jQuery(document).ready( function( $){

    //callback function for tooltip
    var refer_tip = function(){
        var refTips = $('.refer_tip');
        var refDics = $('.REFERENCES dl dt');
        var tipTarget = {};
        var tip = {};

        //hide arrow_top icon
        $(this).find('.colorbox-start, .nextback').hide();
        
        //check tooltip is needed
        if( refDics.length == 0){
            return false;
        }

        //get tooltip uniq id
        refTips.each( function( i){
            var aTarget = $(this).attr('href').split('#');
            $(this).attr( 'id', 'utip'+ i);
            tipTarget[ 'utip'+ i] = aTarget[ 1];
        });
        //get tooltip titles and descriptions
        refDics.each( function(){
            var id = $(this).attr('id');
            if( tip[ id] == undefined){
                tip[ id] = {};
            }
            tip[ id][ 'title'] = $(this).html();
            tip[ id][ 'description'] = $(this).next().html();
        });
        //set tooltip using with extjs
        for( var uid in tipTarget){
            var tid = tipTarget[ uid];
            new Ext.ToolTip({
                title   : tip[ tid][ 'title'],
                html    : '<div class="description">'+ tip[ tid][ 'description'] +'</div>',
                target  : uid,
                frame   : true,
                autoHide: true,
                //autoHide: false,
                //closable: true,
                hideDelay: 500,
                dismissDelay: 0
            });
        }
    };

    /**
     * colorbox settings
     *
     *  appendix:
     *    When you add class "colorbox" to "a" tag in HTML source,
     *    the target block will be hidden and the link will open
     *    it using with colorbox.
     */
    var leftside = $('.LEFTSIDE');
    var references = ( $('.REFERENCES').length == 0) ? ',.REFERENCES' : '';   //for getting REFERENCES from remote HTML
    var cboxHref = {};      //for colorbox
    var ajaxTarget = {};    //for ajaxload
    var inline = false;
    var i = 0;
    var j = 1;

    //get ajaxload target and colorbox target
    $('a.colorbox').each( function(){
        var ref = $(this).attr( 'href');
        var h   = ref.split( '#');

        if( ref.indexOf( '#') >= 0 && h.length > 1){
            //get target id
            //init for colorbox
            if( cboxHref[ '#'+ h[ 1]] == undefined){
                cboxHref[ '#'+ h[ 1]] = {};
                cboxHref[ '#'+ h[ 1]][ 'inline'] = ( h[ 0] == "") ? true : false;   //inline or not
                cboxHref[ '#'+ h[ 1]][ 'obj'] = [];
            }
            cboxHref[ '#'+ h[ 1]][ 'obj'].push( $(this));
            //init for ajaxload. jump this in case of inline
            if( h[ 0] != ""){
                if( ajaxTarget[ h[ 0]] == undefined){
                    ajaxTarget[ h[ 0]] = [];
                }
                ajaxTarget[ h[ 0]].push( '#'+ h[ 1]);
            }
            i++;
        }
    });
    //console.log( cboxHref);
    //console.log( ajaxTarget);

    if( i > 0){
        //auto ajaxload
        for( var page in ajaxTarget){
            leftside.append('<div id="show-colorbox-'+ j +'"></div>');
            var t = page +' '+ ajaxTarget[ page].join();
            //console.log( t);
            $('#show-colorbox-'+ j).hide().load( t + references, refer_tip);   //load remote html
            j++;
        }
        //set inline and colorbox
        leftside.append('<div id="show-colorbox"></div>');
        $('#show-colorbox').hide();
        for( var hrefInline in cboxHref){
            //set inline
            if( cboxHref[ hrefInline][ 'inline']){
                $(hrefInline.toString()).appendTo( '#show-colorbox');   //move the block
                $('#show-colorbox .nextback').hide();    //hide arrow_top icon
                eval( refer_tip());   //set tooltip
            }
            //set colorbox
            var obj = cboxHref[ hrefInline][ 'obj'];
            for( var k=0; k<obj.length; k++){
                obj[ k].colorbox({
                    maxWidth : '610px',
                    maxHeight: '95%',
                    inline : true,
                    href   : hrefInline,
                    opacity: 0.3,
                    close  : '閉じる'
                });
            }
        }//end for
    }
    else{
        eval( refer_tip());   //set tooltip
    }

    //hide tooltip block
    $('.colorbox-start, .REFERENCES').hide();

});