var ComponentViewer;

$(document).ready(function() {
    ComponentViewer = {
        diagramBox: $('#diagramBox'),
        diagram: $('#diagram'),
        diagramHelper: $('#dragHelper'),
        tbody: $('div.fauxScrollableTable'),
		originalTbodyHeight: $('div.fauxScrollableTable').height(),
        startHeight: null,
        totalHeight: null,
        maxZoom: null,
        minZoom: null,
        currentZoom: null,
        init: function() {
            ComponentViewer.startHeight = ComponentViewer.tbody.height();
            ComponentViewer.totalHeight = ComponentViewer.tbody.height() + ComponentViewer.diagramBox.height();
            if(ComponentViewer.diagram.hasClass('fullsize')) { 
                ComponentViewer.maxZoom = 7;
                ComponentViewer.minZoom = 0;
                ComponentViewer.currentZoom = 4;
            } else {
                ComponentViewer.maxZoom = 7;
                ComponentViewer.minZoom = 0;
                ComponentViewer.currentZoom = 0;
            }
            var aspect = ComponentViewer.diagram.width() / ComponentViewer.diagram.height();
            ComponentViewer.diagram.width(ComponentViewer.diagramBox.width());
            ComponentViewer.diagram.height(ComponentViewer.diagram.height() * aspect);
            
            ComponentViewer.diagram.css('cursor','move');
            
            ComponentViewer.startDrag();
            ComponentViewer.resetDrag();
            
            // Make table resizable
            ComponentViewer.tbody.Resizable({ minHeight: 0, maxHeight: ComponentViewer.totalHeight, handlers: { s: '#resizeHandle' }, 
                onResize: function(size){ 
                    ComponentViewer.tbody.show();
                    ComponentViewer.tbody.css('overflow-y','scroll');
                    ComponentViewer.diagramBox.css('height', ComponentViewer.totalHeight - size.height);
                    ComponentViewer.resetDrag(ComponentViewer.diagram);
                } 
            });
        },
        startDrag: function() {
        	
        	var num_baseY = 0;
			var num_initY = 0;
			
			var num_baseX = 0;
			var num_initX = 0;
			
			ComponentViewer.diagram.mouseup(
					function(event){
						num_baseY = ComponentViewer.diagramBox.scrollTop();
						num_baseX = ComponentViewer.diagramBox.scrollLeft();
						$("body").unbind("mousemove");
						ComponentViewer.diagram.unbind("mousemove");
					}
				);
			
			window.onmouseup = function(){
				num_baseY = ComponentViewer.diagramBox.scrollTop();
				num_baseX = ComponentViewer.diagramBox.scrollLeft();
				ComponentViewer.diagram.unbind("mousemove");
			}
			
			ComponentViewer.diagram.mousedown(
					function(event){
						
						event.preventDefault();
						
						num_initX = event.pageX;
						num_initY = event.pageY;
						
						$(this).mousemove(
						
							function(event){
								
								var num_distanceX = -(event.pageX - num_initX);
								var num_distanceY = -(event.pageY - num_initY);
								
								ComponentViewer.diagramBox.scrollLeft(num_baseX + num_distanceX);
								ComponentViewer.diagramBox.scrollTop(num_baseY + num_distanceY);
							}
						)
					}
				);
           
        },
        resetDrag: function() { 
            ComponentViewer.diagram.DraggableDestroy();
            ComponentViewer.startDrag();
        },
        zoom: function(zoomDirection) {
            if(zoomDirection == 'in' && ComponentViewer.currentZoom < ComponentViewer.maxZoom) {
				ComponentViewer.diagram.css('width', Math.round(ComponentViewer.diagram.width() * 1.20));
				ComponentViewer.diagram.css('height', Math.round(ComponentViewer.diagram.height() * 1.20));
                ComponentViewer.currentZoom++;
            }
            if(zoomDirection == 'out' && ComponentViewer.currentZoom > ComponentViewer.minZoom) {
				ComponentViewer.diagram.css('width', ComponentViewer.diagram.width() * 0.80);
				ComponentViewer.diagram.css('height', ComponentViewer.diagram.height() * 0.80);
                ComponentViewer.currentZoom--;
            }
            return false;
        },
        hideList: function() {
			ComponentViewer.tbody.css('height',0);
			ComponentViewer.tbody.css({ overflow: 'scroll', overflowX: 'hidden', overflowY: 'scroll' });
			ComponentViewer.diagramBox.css('height', ComponentViewer.totalHeight);
            ComponentViewer.resetDrag();
			$('#hideList').hide();
			$('#showList').show();
            return false;
        },
		showList: function() {
			ComponentViewer.tbody.css('height', ComponentViewer.originalTbodyHeight);
			ComponentViewer.tbody.css({ overflow: 'scroll', overflowX: 'hidden', overflowY: 'scroll' });
			ComponentViewer.diagramBox.css('height',ComponentViewer.totalHeight - ComponentViewer.originalTbodyHeight);
			ComponentViewer.resetDrag();
			$('#showList').hide();
			$('#hideList').show();
			return false;
		}
    };
    
    /* Inits
    ------------------------------------------------------------------------- */ 
    ComponentViewer.init();
    
    /* Event handlers
    ------------------------------------------------------------------------- */
    // Zoom
    $('.zoom').click(function() {
        ComponentViewer.zoom($(this).attr('href').split('#')[1]);
        return false;
    });
    // Hide list
    $('#hideList').click(function() { 
        ComponentViewer.hideList(); 
        return false; 
    });
	// Show list
	$('#showList').click(function() {
		ComponentViewer.showList();
		return false;
	});
});