var panes_sortable;
var mySlide_V;
var maskfx;
var ztools_fx;
var level4_fx;
var showingPanes;
var z_pane_open = false;
var z_pane_anim;
var zs;

var Panes = {
	
	scrollWhat2Where: function( _wrap, anchor ){
		var wrap = $(_wrap);
		if( !wrap.scrollfx ){
			wrap.scrollfx = new Fx.Scroll(wrap, {
				wait: false,
				duration: 500,
				transition: Fx.Transitions.Quad.easeOut
			});
		}	
		wrap.scrollfx.toElement(anchor);
	},
	
	showPage: function(){
		showingPanes = false;
		mySlide_Vfx.start(112);
		maskfx.start(1);
		ztools_fx.start(0);
		level4_fx.start(1);
	},
	showPane: function(){
		showingPanes = true;
		mySlide_Vfx.start(-500);
		maskfx.start(0);
		ztools_fx.start(1);
		level4_fx.start(0);
	},
	showFrontSection: function( h ){
		mySlide_Hfx.start( -h );
		if( showingPanes ) Panes.showPage();
	},

	hideLevel4: function(){
		level4_fx.start(0);
	},
	
	
	start: function(){
		Panes.initPanes();
		
		Panes.z_init();
		
		level4_fx = new Fx.Style($('level4'), 'opacity', {
			duration: 1000,
			wait: false,
			transition: Fx.Transitions.Quart.easeOut
		}).set(1);
		
		ztools_fx = new Fx.Style($('btm_tools'), 'opacity', {
			duration: 1000,
			wait: false,
			transition: Fx.Transitions.Quart.easeOut
		}).set(0);
		
		maskfx = new Fx.Style($('cmask'), 'opacity', {
			duration: 500,
			wait: false,
			transition: Fx.Transitions.Quart.easeOut,
			onStart: function(){	
				if( !$('content_panes_ul')) return;
				
				if( showingPanes ) $('content_panes').setStyle('top', 0 );

				var ds = document.getOffsetSize();				
				var h = ds.y-110;
				$('content_panes').setStyle('height', h );
				$('page').setStyle('height', h );
				$('content_panes_ul').setStyle('width', ds.x*10);
				$('content_panes_ul').setStyle("display", "block");
				
			},
			onComplete: function(){
				if( !$('content_panes_ul')) return;
			
				if( showingPanes ){
					Panes.updatePanes();
				}else{
					$('content_panes').setStyle('top', 100000 );
				}
			}
		});
		
		
		mySlide_Vfx = new Fx.Style($('display'), 'top', {duration: 1000, wait: false, transition: Fx.Transitions.Quart.easeOut});
		mySlide_V = new Slider($('vslider'), $('vslider_thumb'), {
			steps: 610,
			onChange: function(step){
				$('vslider_value').setHTML("y: "+ step);
				//$('display').setStyle("top", 112-step);
				
				$('frontpage').setStyle("left", -step);
			}
		}).set(0);
		
		var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 1);
		mySlide_Hfx = new Fx.Style($('frontpage'), 'left', {duration: 1000, wait: false, transition: Fx.Transitions.Quart.easeOut}); // Fx.Transitions.Quart.easeOut
	},
	
	z_click_test:function(itm){
		var thecid = itm.id.split('z_')[1];
		//var thecid_e = $(thecid);
		// scroll the corresponding pane into view
		var a = panes_sortable.serialize();
		for(var i=0; i<a.length; i++){
			if( a[i] == thecid ){
				z_contentpanes_anim.start( -(i*337) );
			}
		}
	},
	
	z_capture_submit:function(e){
		e.stop();
		$('z_btn_do_save').fireEvent('click');
	},
	z_init: function(){
		z_contentpanes_anim = new Fx.Style($('content_panes_ul'), 'left', {duration: 1000, wait: false, transition: Fx.Transitions.Quart.easeOut});
		
		$('z_save_form').addEvent('submit', Panes.z_capture_submit);

		z_pane_anim = new Fx.Styles($('z_pane'), {duration:500, wait:false, transition:Fx.Transitions.Quart.easeOut});
		$('z_btn_save').addEvent('click', Panes.z_toggle);
		$('z_btn_cancel_save').addEvent('click', Panes.z_toggle);

		/* PDF tmp*/
		$('zs_btn_save_pdf').addEvent('click', Panes.showPdf);
		
		
		
		$('z_btn_do_save').addEvent('click', function(e) {
			if(e) e = new Event(e).stop();
			// submit the form, show response, delay, close the pane
			
			var zname = $('z_nameinput').getValue();
			
			var nzs = panes_sortable.serialize();
			// We cant have search results included:
			nzs = Panes.util_cleanSerial(nzs);
		
			new Ajax('/ajax/z_save.php?cid='+ nzs +'&name='+ zname, {
					method: 'get',
					update: $('z_result_msg'),
					onSuccess: function(){						
						$('z_pane_col').setStyles({'opacity':0, 'background-color':'#80ff00'});
						$('z_pane_col').effects({duration: 100, transition: Fx.Transitions.Quart.easeOut}).start(
							{'opacity':0.5}).chain( function(){
								this.start.delay(600, this, {'opacity':0});
							});						
						Panes.z_toggle.delay(1000);
					}
				}).request();
		});
		
	},
	z_toggle: function(){
		if( z_pane_open ){
			// close
			//z_pane_anim.start({'margin-top': 0});
			z_pane_anim.start({'margin-top': 31});
			$('z_btn_save').src = '/images/btn_z_save.gif';
		}else{
			// open
			//z_pane_anim.start({'margin-top': -31});
			z_pane_anim.start({'margin-top': 0});
			//$('z_btn_save').src = '/images/btn_z_cancel_save.gif';
			$('z_result_msg').innerHTML = "";
		}
		z_pane_open = !z_pane_open;
	},
	z_update: function(){
		
		var nzs = panes_sortable.serialize();
		// We cant have search results included:
		nzs = Panes.util_cleanSerial(nzs);
		
		if( nzs == zs ) return;
		if( nzs.length < 1 ) return;
		
		zs = nzs;

		// Fetch images
		new Ajax('/ajax/z_get_image.php?cid='+ zs, {onSuccess: function(){
			$('z_images').setHTML( this.response.text );
		}}).request();

		
		// Update permalink
		//$('z_permalink').setHTML( '<a href="http://opennetwork.dk/?cid='+ zs +'" alt="opennetwork.dk Permalink" target="_self">Bookmark</a>' );
		$('zs_btn_bookmark').setProperty("href", 'http://opennetwork.dk/?cid='+ zs);
		
	},
	
	showPdf: function(){
		var _cids = panes_sortable.serialize();
		window.open("http://opennetwork.dk/pdf/make.php?cid="+_cids, "PDF");	
	},
	
	util_cleanSerial: function(a){
		c = [];
		a.each( function(b){
			if(  (b.substr(0,1)!='Q') ) c.push(b);
		});
		return c;
	},
	
	removePane: function( cid ){
		var e = $(cid);
		if( e ){
			e.remove();
			Menu.Update_Selections_Level3();
			
			var p = panes_sortable.serialize();
			if( p.length == 0 ){
				Panes.showPage();
			}else{
				Panes.updatePanes();
				Panes.z_update();
			}
		}
	},
	
	replacePane: function( ccid, ncid ){		
		// Create a new node, replace the current pane with it, fetch the new pane, add it.
		var tmp = document.createElement("div");
		tmp.injectBefore( $(ccid) );
		new Ajax('/ajax/pane.php?cid='+ncid+'&ccid='+ccid, {
				method: 'get',
				update: tmp,
				onStart: function(){
					$(ccid).setOpacity(0.5);
				},
				onSuccess: function(res){
					var q = net.splitQuery(this.url);
					var cid = q["cid"];
					var ccid = q["ccid"];					
					
					var cid = this.url.split("cid=")[1];
					cid = cid.split("&")[0];
					var ccid = this.url.split("ccid=")[1];
					ccid = ccid.split("&")[0];
					
					$(ccid).replaceWith( tmp.firstChild );
					tmp.remove();
					//
					Panes.initFlashContent( cid );
					Panes.initPanes();
					Panes.updatePanes();
					Menu.Update_Selections_Level3();
				}
			}).request();
	},


	loadPaneByCid: function( ccid, ncid ){
		// Used by the SearchPane
		
		// Create a new node, replace the current pane with it, fetch the new pane, add it.
		var tmp = document.createElement("div");
		tmp.injectBefore( $(ccid) );
		new Ajax('/ajax/pane.php?cid='+ncid+'&ccid='+ccid, {
				method: 'get',
				update: tmp,
				onStart: function(){
					$(ccid).setOpacity(0.5);
				},
				onSuccess: function(res){
					var cid = this.url.split("cid=")[1];
					cid = cid.split("&")[0];
					
					var html = tmp.innerHTML;
					tmp.remove();
					
					Panes.addPane( html, "?cid="+ cid);
				}
			}).request();
	},
	
	
	tearoffPane: function( acid, id ){
		//console.log("tearoffPane: "+ acid +", id:"+ id);
		Panes.loadPaneByCid(acid, id);
	},
	
	
	addPane: function( html, url ){
		
		//console.log("addPane html, url:"+ url);
		
		/* make sure the panes containers is in place */
		if( !$('content_panes') ){
			//$('page').setHTML('<div id="content_panes"><ul id="content_panes_ul"></ul></div>');
		}
		
		/* if the CID already is loaded, remove it */
		var q = net.splitQuery(url);
		var cid  = q["cid"]; //url.split("cid=")[1]; //H.9.113 ///ajax/pane.php?cid=H.9.113
		var mode = q["mode"];
		//console.log("addPane.cid: "+ cid );
				
		if( !q["cid"] ){
			cid = url.split("cid=")[1];
			//console.log("addPane.cid FIX:"+ cid);
		}
		
		
		var cids = panes_sortable.serialize();
		if( cids.in_array(cid) && (mode!="REPLACE") ){
			//console.log("addPane.cid: PRESENT");
			Panes.removePane(""+cid);
			
		}else{
			//console.log("addPane.cid: NOT PRESENT");
			$('content_panes_ul').innerHTML = html + $('content_panes_ul').innerHTML;
			Panes.initFlashContent( cid );
		}
		Panes.initPanes();
		Panes.updatePanes();
		
		Menu.Update_Selections_Level3();
	},
	
	initFlashContent: function( cid ){
		
		//console.log("initFlashContent: cid: "+ cid);
		
		var ssp_id	= 'ssp_flashcontent_'+cid;
		var sspd_id	= 'sspd_flashcontent_'+cid;
		var found   = false;
		
		
		if( $(ssp_id) ){
			//console.log("initFlashContent: SSP found! "+ ssp_id);
			
			var swf_id   = $(ssp_id);
			var xmlfile	 = "/dynxml.php?cid="+cid;
			var xmltype  = "Default";
			found		 = true;
		}

		if( $(sspd_id) ){
			//console.log("initFlashContent: SSPD found! "+ sspd_id);

			var swf_id   = $(sspd_id);			
			var album    = swf_id.innerHTML.split('albumId_')[1];
			var xmlfile	 = "http://opennetwork.dk/admin/ssp_director/images.php?album="+album;
			var xmltype  = "Director";
			found		 = true;
		}
		
		
		if( found ){
			// TODO: Check if the FlashPlayer is installed before this...
			var ssp_file = "/swf/ssp.swf";
			var so = new SWFObject(ssp_file, "ssp_"+cid, "301", "326", "9", "#fff");
			so.addVariable("xmlfile", xmlfile);
			so.addParam("xmlfile", xmlfile);
			so.addVariable("xmltype", xmltype);
			so.addParam("xmltype", xmltype);
			so.addParam("wmode", "opaque");
			so.write(swf_id);		
		}
		
	},
	
	
	initPanes: function(){
		//console.log("Panes:initPanes");
		panes_sortable = new Sortables($('content_panes_ul'), {
			cloneOpacity:.2,
			handle: 'span.pane_handle',
			clone: true,
			revert: true,
			constrain: true,
			onComplete: function(){
				//console.log(panes_sortable.serialize());
				Panes.z_update();
			}
		});
		Panes.z_update();	
	},
	
	updatePanes: function(){
		// Called on Load/Resize
		
		if( !$('content_panes') ) return;
		
		var ds = document.getOffsetSize();
		
		// W
		var pane_width = 0;
		$$('#content_panes_ul li.pane_li').each( function(e){
			pane_width += e.getCoordinates().width;
		});
		pane_width = Math.max(340, pane_width);
		$('content_panes_ul').setStyle('width', pane_width);
		
		// H
		var pane_height = ds.y - $("page").getPosition().y;
		pane_height = Math.max(ds.y-110, pane_height);
		var panes_height = pane_height;
		
		// subtract space for bottom scrollbar ?
		if( pane_width > ds.x ) panes_height -= 14;	
		
		// subtract space for the Z-tools
		pane_height  -= 31;	
		panes_height -= 31;
		
		$('content_panes').setStyle('height', pane_height );
		$('page').setStyle('height', ds.y );
		
		$$('#content_panes_ul li.pane_li').each( function(e){
			e.setStyle('height', panes_height);
		});
		$('content_panes').setStyle('overflow', 'auto' );
		
	}
};