var Dom = YAHOO.util.Dom;
var Anim = YAHOO.util.Anim;
var Ev = YAHOO.util.Event;
		
var isLoading = true;
var isTweening = false;
var pagesObj = {};
var toPage = 'overview';
var planeModel = '';


	function loadingDown(){
		
			var attFadeOutLoading = {
				   opacity : {
						to : 0.0
					}
				}
				
		var loadingOutAnim = new Anim(Dom.get('loadingInfo'),attFadeOutLoading,0.2,YAHOO.util.Easing.easeOut);
			loadingOutAnim.onComplete.subscribe(function(){Dom.setStyle(Dom.get('loadingInfo'), 'display', 'none'); var isLoading = false;})
			loadingOutAnim.animate();
	}
	
	function loadingUp(){
			var isLoading = true;
			Dom.setStyle(Dom.get('loadingInfo'), 'opacity', 0.0); 
			Dom.setStyle(Dom.get('loadingInfo'), 'display', 'block'); 
			var isLoading = false;
			
			var attFadeInLoading = {
				   opacity : {
						to : 1.0
					}
				}
				
		var loadingOutAnim = new Anim(Dom.get('loadingInfo'),attFadeInLoading,0.2,YAHOO.util.Easing.easeOut);
			loadingOutAnim.animate();
	}


	function changePicture(){
		if (Dom.get('planeModel')!=null){
			var topLayerFrame = Dom.get('top-pic-frame-layertop');
			var lowLayerFrame = Dom.get('top-pic-frame-layerlow');
			
			lowLayerFrame.innerHTML = "<img src='/images/content/products/"+planeModel+"-"+toPage+".jpg' alt='' />";
			
			var attFadeOut = {
				   opacity : {
						to : 0.0
					}
				}
				
			var topLayerOutAnim = new Anim(topLayerFrame,attFadeOut,0.3,YAHOO.util.Easing.easeOut);
			topLayerOutAnim.onComplete.subscribe(
													function(){
														topLayerFrame.innerHTML = lowLayerFrame.innerHTML
														Dom.setStyle(topLayerFrame, 'opacity', 1.0)
													},topLayerFrame, lowLayerFrame
											  )
			topLayerOutAnim.animate();			
		}

		
	}

	function changeFolder(){
			changePicture();
			isTweening = true;
			var loadingOverlay = Dom.get('loadingOverlay');
			var newHeight = pagesObj[toPage].offsetHeight;
			Dom.setStyle(loadingOverlay, 'opacity', 0.0);
			Dom.setStyle(loadingOverlay, 'display', 'block');
			
			var attFadeIn = {
				   opacity : {
						to : 1.0
					}
				}
			var attFadeOut = {
				   opacity : {
						to : 0.0
					}
				}
				
			var attToHeight = {
				   height : {
						to : newHeight,
						units : "px"
					}
				}
			
		var coverOutAnim = new Anim(loadingOverlay,attFadeOut,0.1,YAHOO.util.Easing.easeOut);
		coverOutAnim.onComplete.subscribe(
												function(){
													Dom.setStyle(loadingOverlay, 'display', 'none');
													isTweening = false;
												},loadingOverlay										  
										  )
		
		var toHeightAnim = new Anim(Dom.get('contentFrame'),attToHeight,1.0,YAHOO.util.Easing.easeBoth);
		var toHeightAnimLoading = new Anim(loadingOverlay,attToHeight,1.0,YAHOO.util.Easing.easeBoth);
		toHeightAnim.onComplete.subscribe(		
										  		function(){

													Dom.get('contentFrame').innerHTML = pagesObj[toPage].innerHTML;
													if (isLoading){loadingDown()}
													coverOutAnim.animate();
												},loadingOverlay,coverOutAnim 
											)
		
		var coverInAnim = new Anim(loadingOverlay,attFadeIn,0.2,YAHOO.util.Easing.easeOut);
		coverInAnim.onComplete.subscribe(
												function(){
														Dom.get('contentFrame').innerHTML = "";
														toHeightAnim.animate();
														toHeightAnimLoading.animate();
														
													},toHeightAnim
												)
		
		loadingUp();
		coverInAnim.animate();	
		
		
		
	}

		
	function switchFolder(e, folderLink){
		
		Ev.stopEvent(e);
		
		if ((!Dom.hasClass(folderLink, 'activeFolder')) && (isTweening == false)){
			Dom.removeClass(Dom.getChildren('folder-menu'), 'activeFolder');			
			Dom.addClass(folderLink, 'activeFolder');
			toPage = folderLink.rel;
			changeFolder();
						
		} else {
			
			return false
			
		}
		
		
	}	
		
		
	function foldersPagingInit(){


		if (Dom.get('planeModel')!=null){
			planeModel = Dom.get('planeModel').innerHTML;			
		}

		var folderLinks = Dom.getChildren(Dom.get('folder-menu'));

		for (var i=0; i<folderLinks.length; i++){
			Ev.addListener(folderLinks[i], 'click', switchFolder, folderLinks[i])
			if (folderLinks[i].rel == toPage){Dom.addClass(folderLinks[i], 'activeFolder')}
		}
			

		// vytvorim si objekt pro stranky
		pages = Dom.getElementsByClassName('folderContainer');	
		for (var z=0; z<pages.length; z++ ){
			pagesObj[pages[z].id] = pages[z];
		}

		// a jedem kotata
		changeFolder()
	}
	
	Ev.onDOMReady(foldersPagingInit);