/*
 * Contoh penggunaan event delegation dalam aplikasi nyata
 * http://gedex.web.id/
 *
 * Copyright (c) 2009 Akeda Bagus
 * Licensed under the MIT licenses.
 *
 * Date: 2009-05-07
 */
jQuery(document).ready(function() {
    function mycarousel_initCallback(carousel) {
        jQuery('#blockGoto a').bind('click', function() {
            var index = $(this).attr("id").split("_");
            
            carousel.scroll(jQuery.jcarousel.intval(index[1]));
    		$('#blockGoto ul a').removeClass("blockGoto-active");
    		$(this).addClass("blockGoto-active");
            return false;
        });
    }
    function nextCallback(carousel, li, index){
    	$('#blockGoto a').removeClass("blockGoto-active");
    	$("#block_" + index).addClass("blockGoto-active");
    }
    
    jQuery('#block-container').jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        itemVisibleInCallback: nextCallback
    });
    
    $('#block-container').mouseover(function(e){
        $target = $(e.target);
        
        if ( $target.hasClass('cell') ) {
            $target.addClass('cellHover');
        }
    }).
    mouseout(function(e) {
        $target = $(e.target);
        
        if ( $target.hasClass('cell') ) {
            $target.removeClass('cellHover');        
        }
    }).click(function(e) {
        $target = $(e.target);
        
        if ( $target.hasClass('cell') ) {
            var offset = $target.offset();
            
            var targetID = $target.attr('id');
            var targetBlock = $target.attr('cellblock');
            var targetRow = $target.attr('cellrow');
            var targetCol = $target.attr('cellcol');
            var dialogID = 'dialog_' + targetID;
            
            $("body").prepend('<div class="cellPopup" id="' + dialogID + '" title="Cell Information">Loading...</div>');
            
             $("#" + dialogID).load("box_ajax.php?block=" + targetBlock  + "&row=" + targetRow + "&col=" + targetCol, {}, function(data){
                 if ( data ) {
                    $(this).html( data );
                 }
            });
            
            // set as UI dialog
            $("#" + dialogID).dialog({
                position: [offset.left, offset.top],
                bgiframe: true,
                modal: true,
                stack: false		
            });

        }
    });
    
});