var style = document.createElement("link"),head = document.getElementsByTagName('head')[0];
style.type = "text/css";
style.rel = "stylesheet";
style.href = "/common/css/init.css";
head.appendChild( style );

var w  = 960;
var h = 580;

var startPosiX;
var startPosiY;
var endPosiX = 0;
var endPosiY = 0;
var minPosiX = w*-3;
var maxPosiX = 0;
var maxPosiY = 0;
var posiX;
var dir;
var movX = 0;
var movY = 0;
var flg = false;

var duration = 'slow';
var easing = 'easeOutCubic';

var files = 0;

function hideController(){
	$('#contents ul.nav, #contents div.arrow').css('display','none');
	$('#contents div.rightLine').css('background','none');
};

function showController(){
	$('#contents ul.nav, #contents div.arrow').fadeIn('slow');
	$('#contents div.rightLine').css('background','url(/common/img/bg2.gif) no-repeat 0% 0%');
};
	
$(function(){

	$('<div />')
		.attr('id','hidden')
		.css('display','none')
		.appendTo('#wrapper');
	
	$('#contents > *')
		.clone()
		.appendTo('#hidden');
		
	$('#contents > *').remove();
		
	
	$('#contents')
		.css({
			'width':w*4,
			'height':h*4,
			'top':startPosiY,
			'left':startPosiX
		})
		.draggable({
			start:function(){
				$.fancybox.close();
				hideController();
			},
			drag:function(){
			},
			stop:function(){
			
				posiX = $(this).position().left; 
				posiY = $(this).position().top;
			
				if(startPosiX == w*-1 || startPosiX == w*-2){
					movX = Math.abs(Math.abs(startPosiX)-Math.abs(posiX));
					movY = Math.abs(Math.abs(startPosiY)-Math.abs(posiY));
					
					if(Math.max(movX,movY) == movX){					
						if(startPosiY == 0){
						
							dir = (Math.abs(startPosiX) - Math.abs(posiX) < 0)? -1 : 1;
							
							if(posiX <= minPosiX){
								endPosiX = minPosiX;
							}else if(posiX >= maxPosiX){
								endPosiX = maxPosiX;
							}else{
								endPosiX = (dir != 1)? (Math.ceil(Math.abs(posiX) / w)*w)*dir : startPosiX + w;
							};
							
							endPosiY = startPosiY;
						}else{
							endPosiX = startPosiX; 
						};
						
					}else{
					
						dir = (Math.abs(startPosiY) - Math.abs(posiY) < 0)? -1: 1;
						
						var minPosiY = (startPosiX == w*-1)? h*-3 : h*-2 ;
						
						if(posiY <= minPosiY){
							endPosiY = minPosiY;
						}else if(posiY >= maxPosiY){
							endPosiY = maxPosiY;
						}else{
							endPosiY = (dir != 1)? (Math.ceil(Math.abs(posiY) / h)*h)*dir : startPosiY + h;
						};
						
						endPosiX = startPosiX;
						
					};
				}else{
				
					dir = (Math.abs(startPosiX) - Math.abs(posiX) < 0)? -1 : 1;
				
					if(posiX <= minPosiX){
						endPosiX = minPosiX;
					}else if(posiX >= maxPosiX){
						endPosiX = maxPosiX;
					}else{
						endPosiX = (dir != 1)? (Math.ceil(Math.abs(posiX) / w)*w)*dir : startPosiX + w;
					};
					
					endPosiY = startPosiY;

				}
				
				$(this).animate(
					{
						top:endPosiY,
						left:endPosiX
					},
					duration,
					easing,
					function(){
						startPosiX = endPosiX;
						startPosiY = endPosiY;
						showController();
					}
				);
			
			}
		})
		.wrap('<div id="drag"></div>')
		.append('<img src="/common/img/spacer.gif" id="bg" width="'+w*4+'"  height="'+h*4+'" style="position: absolute; top:0; left:0; z-index: 1; cursor: pointer;" />');
		
		
		$('<p id="loading" style="position: absolute; top: 5px; left: 5px; z-index: 5; padding: 5px;"><img src="/common/img/ajax-loader.gif" alt="" /></p>')
			.appendTo('#drag')
		
	

    $(window)
    	.load(function(){
    	
    		$('#hidden #menu li a')
		    	.each(function(){
		    		
			    	var u = this.href;
			    	var id = $(this).parents('li').attr('id');
			    	var col = id.substring(1,2)-1;
			    	var row = (id.length == 3)? id.substring(2,3) : null ;
			    	if(row == 'a') {
			    		row = 1;
			    	}else if(row == 'b') {
			    		row = 2;
			    	}else if(row == 'c') {
			    		row = 3;
			    	}else{
			    		row = 0;
			    	}
			    		
			    	$.ajax({
			    		type:'GET',
			    		url:u,
			    		dataType:'html',
			    		cashe:true,
			    		success:function(html){
			    		    		
			    			files++;
			    			
			    			var contents = $(html).find('#contents');
			    			
			    			$(contents)
			    				.attr('id',id)
			    				.attr('class','contents')
			    				.css({
			    					'z-index':2,
			    					'position':'absolute',
			    					'top':row*h,
			    					'left':col*w
			    				})
			    				.find('ul.nav')
						    		.mouseover(function(){
										$('#contents').draggable('disable');
									})
									.mouseout(function(){
										$('#contents').draggable('enable');
									})
								.end()
			    				.find('#arrowR a')
			    					.click(function(){
			    					
			    						$('#contents').animate(
											{
												left:startPosiX-w
											},									
											duration,
											easing,
											function(){
												startPosiX = startPosiX-w;
												showController();
											}
										);
										
										hideController();
				    					return false;
										
			    					})
			    					.mouseover(function(){
			    						$('#contents').draggable('disable');
			    					})
			    					.mouseout(function(){
			    						$('#contents').draggable('enable');
			    					})
			    				.end()
			    				.find('#arrowL a')
			    					.click(function(){
			    						
			    						$('#contents').animate(
											{
												left:startPosiX+w
											},																
											duration,
											easing,
											function(){
												startPosiX = startPosiX+w;
												showController();
											}
										);
										
										hideController();
				    					return false;
										
			    					})
			    					.mouseover(function(){
			    						$('#contents').draggable('disable');
			    					})
			    					.mouseout(function(){
			    						$('#contents').draggable('enable');
			    					})
			    				.end()
			    				.find('#arrowT a')
			    					.click(function(){
			    						
			    						$('#contents').animate(
											{
												top:$('#contents').position().top+h
											},																
											duration,
											easing,
											function(){
												startPosiY = startPosiY+h;
												showController();
											}
										);
										
										hideController();
				    					return false;
										
			    					})
			    					.mouseover(function(){
			    						$('#contents').draggable('disable');
			    					})
			    					.mouseout(function(){
			    						$('#contents').draggable('enable');
			    					})
			    				.end()
			    				.find('#arrowB a')
			    					.click(function(){
			    						
			    						$('#contents').animate(
											{
												top:$('#contents').position().top-h
											},																
											duration,
											easing,
											function(){
												startPosiY = startPosiY-h;
												showController();
											}
										);
										
										hideController();
				    					return false;
										
			    					})
			    					.mouseover(function(){
			    						$('#contents').draggable('disable');
			    					})
			    					.mouseout(function(){
			    						$('#contents').draggable('enable');
			    					})
			    				.end()
			    				.find('#topBack')
			    					.click(function(){
			    						
			    						$('#contents').animate(
					    						{
													top:0
												},
												duration,
												easing,
												function(){
													startPosiY = 0;
													showController();
												}
											);
										
										hideController();
				    					return false;
											
			    					})
			    					.mouseover(function(){
			    						$('#contents').draggable('disable');
			    					})
			    					.mouseout(function(){
			    						$('#contents').draggable('enable');
			    					})
			    				.end();
			    			$('#contents')
			    				.append(contents);
			    				
			    			if(files > 8) {
			    				$(contents).append('<script type="text/javascript" src="/common/fancybox/init.js"></script>');
			    				$('#contents').fadeIn('slow');
			    				$('#loading').fadeOut('fast');
			    			};
			    			
			    		}
			    	});
			    
			    });
			    
			    $('#contents')
			    	.draggable({
						start:function(){
							$.fancybox.close();
							hideController();
						},
						drag:function(){
						},
						stop:function(){
						
							posiX = $(this).position().left; 
							posiY = $(this).position().top;
						
							if(startPosiX == w*-1 || startPosiX == w*-2){
								movX = Math.abs(Math.abs(startPosiX)-Math.abs(posiX));
								movY = Math.abs(Math.abs(startPosiY)-Math.abs(posiY));
								
								if(Math.max(movX,movY) == movX){					
									if(startPosiY == 0){
									
										dir = (Math.abs(startPosiX) - Math.abs(posiX) < 0)? -1 : 1;
										
										if(posiX <= minPosiX){
											endPosiX = minPosiX;
										}else if(posiX >= maxPosiX){
											endPosiX = maxPosiX;
										}else{
											endPosiX = (dir != 1)? (Math.ceil(Math.abs(posiX) / w)*w)*dir : startPosiX + w;
										};
										
										endPosiY = startPosiY;
									}else{
										endPosiX = startPosiX; 
									};
									
								}else{
								
									dir = (Math.abs(startPosiY) - Math.abs(posiY) < 0)? -1: 1;
									
									var minPosiY = (startPosiX == w*-1)? h*-3 : h*-2 ;
									
									if(posiY <= minPosiY){
										endPosiY = minPosiY;
									}else if(posiY >= maxPosiY){
										endPosiY = maxPosiY;
									}else{
										endPosiY = (dir != 1)? (Math.ceil(Math.abs(posiY) / h)*h)*dir : startPosiY + h;
									};
									
									endPosiX = startPosiX;
									
								};
							}else{
							
								dir = (Math.abs(startPosiX) - Math.abs(posiX) < 0)? -1 : 1;
							
								if(posiX <= minPosiX){
									endPosiX = minPosiX;
								}else if(posiX >= maxPosiX){
									endPosiX = maxPosiX;
								}else{
									endPosiX = (dir != 1)? (Math.ceil(Math.abs(posiX) / w)*w)*dir : startPosiX + w;
								};
								
								endPosiY = startPosiY;
			
							}
							
							$(this).animate(
								{
									top:endPosiY,
									left:endPosiX
								},
								duration,
								easing,
								function(){
									startPosiX = endPosiX;
									startPosiY = endPosiY;
									showController();
								}
							);
						
						}
					});

    	})
    	.unload(function(){
    	});
});