/**
* @author: Jan Mentzel - http://jan.islandofwaiting.de
* @date:   2006-01-14
*/

/*
* Helper functions
*/
function $(id) {
	return document.getElementById(id);
}
function patchIE() {
	debug('patchIE()');
	var as = document.getElementsByTagName('a');
	for(var i=0; i < as.length; i++) {
		var a = as[i];
		if(a.href) continue;
		a.href = 'javascript:void(null);';
	}
}
function onloadBody() {
	PPWindow.preloadProjectImg();
	var m = /MSIE\s*(\d+)(\.\d+)?/.exec(navigator.appVersion);
	if(m) {
		if((m[1]-0) < 7) {
			patchIE();
			PPWindow.MSIE6 = true;
		}
		PPWindow.MSIE = true;
	}
	PPWindow.KHTML = (navigator.appVersion.indexOf('KHTML') != -1)
	debug("PPWindow.KHTML:"+ PPWindow.KHTML);
}

/**
* Class PPWindow
*/
function PPWindow(name) {
	this.name = name;
	PPWindow.__windows__[name] = this;
	this.w = $(name);
	if(!this.w)
		alert('PPWindow() no element found! id:'+ name);
	this.mem = {
		  startpage     : null
		, currentItem   : null
		, currentImg    : 0
		, currentNavItem: null
	}
	this.data = PPWindow.data;
	this.bounds = {x:0, y:0, w:100, h:200}; // overwrite this
	this.animator = new Animator($('animator'));
	//this.animator = new Animator(this.w, true);
	this.animator.fps = 31;
	this.animator.duration = .4;
}
// static
PPWindow.__windows__ = {};
PPWindow.closeAll = function(e) {
	for(var i in PPWindow.__windows__) {
		PPWindow.__windows__[i].hide(e);
	}
}
PPWindow.clicked = function(e) {
	if(!e) var e = window.event;
	var target = e.target || e.srcElement;
	//debug('PPWindow.bodyClicked target:'+ target.tagName +'#'+ target.id);
	if(target.id == 'main' || target.id == 'footer' || target.tagName == 'BODY' || target.tagName == 'HTML')
		PPWindow.closeAll(e);
}
document.onclick = PPWindow.clicked;

PPWindow.setData = function(d) {
	PPWindow.data = d;
}

var p = PPWindow.prototype;

p.hide = function(e) {
	var s = $(this.name).style;
	if(s.display && s.display != 'none') {
		s.display = 'none';
		this.animator.setColor('#bbb');
		if(this.animator.zoomOut(this.bounds, 0.8, 0.4)) {
			this.animator.onEnd = this.animator.hide;
		}
	}
}
p.close = p.hide;

p.show = function(e) {
	$(this.name).style.display = 'block';	
}
p.toggle = function(e) {
	debug(this.name+'.toggle()');
	var w = $(this.name);
	if(w.style.display=='' || w.style.display=='none') {
		// animiertes oeffnen
		this.animator.setColor('#eee');
		if(this.animator.standUp(this.bounds, 0.15, 0.3)) {
			this.animator.onEnd = function() {
				this.hide();
				this.onEnd.o.show();
			}
			this.animator.onEnd.o = this;
		}
	} else {
		this.hide(e);
	}
	if(this.onToggle)
		this.onToggle(e);
}

p.logo = function(e) {
	debug('logoLeftClicked');
	
	PPWindow.closeAll(e);
	
	// animiertes oeffnen
	this.animator.setColor('#eee');
	if(this.animator.zoomIn(this.bounds, 0.5, 0.2)) {
		this.animator.onEnd = function() {
			this.element.style.display = 'none';
			this.onEnd.o.show();
		}
		this.animator.onEnd.o = this;
	}
	var bild = $('img_'+ this.name);
	if(!this.mem.startpage && bild)
		this.mem.startpage = bild.innerHTML;
}

p.navi = function(e, a, item) {
	debug(this.name +'.navi: '+ item);
	this.mem.currentItem = item;
	this.mem.currentImg = 0;
	if(this.mem.currentNavItem)
		this.mem.currentNavItem.className = '';
	this.mem.currentNavItem = a;
	this.mem.currentNavItem.className = 'here';
	if(!this.data[this.mem.currentItem]) {
		debug('ERROR: mem['+ this.mem.name +'].'+ this.mem.currentItem +' is not defined');
		return;
	}
	//window.setTimeout(this.name +'.render()', 10);
	//window.setTimeout(this.name +'.preloadProject()', 100);
	this.render();
	this.preloadProject();
}

p.feature = function(e) {
	debug('feature()');
	if(this.onFeature)
		this.onFeature(e);
}

p.image = function(e) {
	debug('image()');
	this.next();
}
p.next = function(e) {
	if((this.mem.currentImg + 1) >= this.data[this.mem.currentItem].length) {
		this.mem.currentImg = 0;
	} else {
		this.mem.currentImg++;
	}
	this.render();
}
p.previous = function(e) {
	if((this.mem.currentImg - 1) < 0) {
		this.mem.currentImg = 0;
	} else {
		this.mem.currentImg--;
	}
	this.render();
}
/**
* @param i int, 1 based
*/
p.jump = function(i) {
	if(i < 1 || i > this.data[this.mem.currentItem].length) {
		debug('ERROR in '+ this.name +'.jump('+ i +') out of range!');
		this.mem.currentImg = 0;
	} else {
		this.mem.currentImg = i-1;
	}
	this.render();
}

p.head = function(e) {
	if(this.mem.startpage)
		$('img_'+ this.name).innerHTML = this.mem.startpage;
	if(this.mem.currentNavItem)
		this.mem.currentNavItem.className = '';
	this.mem.currentNavItem = null;
	PPWindow.preloadProjectImg();
}

p.render = function() {
	var s = '';
	var item = this.data[this.mem.currentItem];
	if(item.type) {
		if(item.type == 'flash') {
			var swf = '/projects/'+ this.mem.currentItem +'/'+ item.swf +'?vidURL='+ item.movie;
			var w = item.width || 360;
			var h = item.height || 320;
			var left = item.left || 0;
			var top = item.top || 0;
			
			var s = '<div class="img" style="background-image: url(/projects/'+ this.mem.currentItem +'/'+ item.bg +');">\n'
				+( PPWindow.MSIE
					? '<div style="height:'+ top +'; font-size:1px;">&nbsp;</div>\n<object'
					: '<object style="position: absolute; left:'+ left +'; top:'+ top +'"'
				 )
				+' classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="360" height="320" id="videoplayer_minga" align="middle">\n'
				+'<param name="allowScriptAccess" value="sameDomain" />\n'
				+'<param name="movie" value="'+ swf +'" />\n'
				+'<param name="quality" value="high" />\n'
				+'<param name="bgcolor" value="#000000" />\n'
				+'<embed src="'+ swf +'" quality="high" bgcolor="#000000" width="360" height="320" name="videoplayer_minga" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'
				+'</object>\n'
				+'</div>\n';
		} else {
			s = '<div class="img">ERROR<br />\ntype unknown: '+ item.type +'</div>\n'
		}
	} else {
		var total = item.length;
		var current = this.mem.currentImg +1;
		var alt = 'foto '+ current +' / '+ total;
		s = '<img src="/projects/'+ this.mem.currentItem +'/'+ item[this.mem.currentImg] 
			//+'" onclick="'+ this.name +'.image(event)" title="'+ alt +' | '+ (current<total ? 'next' : 'first') +' ..."'
			+'" onclick="'+ this.name +'.image(event)" title="click!" alt="" class="clickable" />\n';
		
		var pagertext = '';
		for(var i=1; i<=total; i++) {
			var call = this.name+'.jump('+i+')';
			var onclick = PPWindow.MSIE6 ? ' href="javascript:'+ call +'"' : ' onclick="'+ call +'"';
			pagertext += '<a'+( i==current ? ' class="here"' : '' )+ onclick +'>'+ i +'</a>';
		}
		s += '<div class="pager'+(PPWindow.KHTML?'-khtml':'')+'" title="click on foto to see next">'+ pagertext +'</div>';
		
		/*
		s = '<div class="img" style="background-image: url(/projects/'+ this.mem.currentItem +'/'+ item[this.mem.currentImg] +');\n'
			+'" onclick="'+this.name+'.image(event)" title="'+ alt +' | '+ (current<total ? 'next' : 'first') +' ..."'
			+' alt="" class="clickable">&nbsp;</div>\n';
		*/
	}
	//debug('<pre>'+ s.replace(/\</g, '&lt;').replace(/\>/g, '&gt;') +'</pre>');
	$('img_'+ this.name).innerHTML = s;
}
p.preloadProject = function() {
	var s = '';
	var images = this.data[this.mem.currentItem];
	if(images.type) {
		return;
	}
	debug('preloadProject() '+ this.mem.currentItem +' n:'+ (images.length -1));
	for(var i=1; i<images.length; i++) {
		s += '<img src="/projects/'+ this.mem.currentItem +'/'+ images[i] +'" /> ';
	}
	$('preload').innerHTML = s;
}
// static
PPWindow.preloadProjectImg = function() {
	var data = this.data;
	var s = '';
	var n=0;
	for(var i in data) {
		var d = data[i];
		var file = null;
		if(d.type) {
			file = d.bg;
		} else {
			file = d[0];
		}
		if(!file) {
			debug('WARNING in preloadProjectImg(): data['+ i +'][0] or bg is undefined!');
			continue;
		}
		n++;
		s += '<img src="/projects/'+ i +'/'+ file +'" /> ';
	}
	//debug('preloadProjectImg() n:'+ n);
	$('preload').innerHTML = s;
}
p.dump = function() {
	debug('side:'+ currentSide.name +' item:'+ currentSide.currentItem +' img:'+ currentSide.currentImg);
}
delete(p);

/**
* Class Animator
*/
function Animator(element, noclone) {
	this.ID = Animator.__ID__++;
	Animator.__instances__[this.ID] = this;

	if(noclone) {
		this.element = element;
	} else {
		this.element = element.cloneNode(true);
		this.element.setAttribute('id', element.id + this.ID);
		element.parentNode.appendChild(this.element);
	}
	// public
	this.fps = 20;
	this.duration = 0.5; // [sec]
	// private
	this._running = false;
}
Animator.__ID__ = 0;
Animator.__instances__ = [];
Animator.nextFrame = function(id) {
	Animator.__instances__[id].nextFrame();
}

var p = Animator.prototype;

p.hide = function() {
	this.element.style.display = 'none';
}
p.show = function() {
	this.element.style.display = 'block';
}
/**
* @param rgb CSS compatible Value. e.g. #eeffaa or #fff
*/
p.setColor = function(rgb) {
	this.element.style.borderColor = rgb;
}
p.nextFrame = function() {
	this.frame++;
	
	this.paint();
	/*
	debug('Animator.nextFrame() '+ this.nFrames +'~'+ this.frame
		+' '+ this.element.style.width +' '+ this.element.style.height);
	*/
	if(this.frame >= this.nFrames) {
		debug('Animator.nextFrame() clearInterval('+ this.thread +')');
		window.clearInterval(this.thread);
		this._running = false;
		if(this.onEnd) {
			this.onEnd();
			this.onEnd = null;
		}
	}
}
/**
* @param duration float sec optional if null this.duration is used
*/
p._start = function(duration) {
	if(this._running) {
		debug('Animator._start() allready running - ignored');
		return false;
	}
	this._running = true;
	debug('Animator._start()');

	duration = duration || this.duration

	this.frameDuration = duration / this.fps;
	this.nFrames = Math.round(duration * this.fps) -0;

	this.stepW = (this.targetW - this.startW) / this.nFrames;
	this.stepH = (this.targetH - this.startH) / this.nFrames;

	this.stepX = (this.targetX - this.startX) / this.nFrames;
	this.stepY = (this.targetY - this.startY) / this.nFrames;

	this.frame = 0;

	var s = this.element.style;
	s.left   = Math.round(this.startX) +'px';
	s.top    = Math.round(this.startY) +'px';
	s.width  = Math.round(this.startW) +'px';
	s.height = Math.round(this.startH) +'px';
	s.display = 'block';

	this.thread = window.setInterval('Animator.nextFrame('+ this.ID +')', this.frameDuration*1000);
	if(this.onStart) {
		this.onStart();
		this.onStart = null;
	}
	if(!this.thread) {
		this._running = false;
		throw('Animator._start() thread is null!');
	}
	return true;
}
p.paintRounded = function() {
	var s = this.element.style;
	s.width  = Math.round(this.startW + this.frame * this.stepW) +'px';
	s.height = Math.round(this.startH + this.frame * this.stepH) +'px';
	s.left   = Math.round(this.startX + this.frame * this.stepX) +'px';
	s.top    = Math.round(this.startY + this.frame * this.stepY) +'px';
}
/*
* @param rect Rectangle {x,y,w,h}
* @param startSize float 0.1 = 10% of rect's size
* @param duration seconds, optional
*/
p.zoomIn = function(rect, startSize, duration) {
	this.targetX = rect.x;
	this.targetY = rect.y;
	this.targetW = rect.w;
	this.targetH = rect.h;
	
	this.startX = this.targetX + this.targetW * (0.5 - startSize*0.5);
	this.startY = this.targetY + this.targetH * (0.5 - startSize*0.5);
	this.startW = this.targetW * startSize;
	this.startH = this.targetH * startSize;

	this.paint = this.paintRounded;
	return this._start(duration);	
}
/*
* @param rect Rectangle {x,y,w,h}
* @param startSize float 0.1 = 10% of rect's size
* @param duration seconds, optional
*/
p.zoomOut = function(rect, targetSize, duration) {

	this.targetX = rect.x + rect.w * (0.5 - targetSize*0.5);
	this.targetY = rect.y + rect.h * (0.5 - targetSize*0.5);
	this.targetW = rect.w * targetSize;
	this.targetH = rect.h * targetSize;
	
	this.startX = rect.x;
	this.startY = rect.y;
	this.startW = rect.w;
	this.startH = rect.h;

	this.paint = this.paintRounded;
	return this._start(duration);	
}
/**
* 
* @param rect Rectangle {x,y,w,h}
* @param startSize float 0.1 = 10% of rect's height (h)
* @param duration seconds, optional
*/
p.standUp = function(rect, startSize, duration) {
	this.targetX = rect.x;
	this.targetY = rect.y;
	this.targetW = rect.w;
	this.targetH = rect.h;
	this.fixedBase = rect.y + rect.h;
	
	this.startX = this.targetX;
	this.startY = this.targetY + this.targetH * (1.0 - startSize);
	this.startW = this.targetW;
	this.startH = this.targetH * startSize;
			
	this.paint = function() {
		var s = this.element.style;
		var top = Math.round(this.startY + this.frame * this.stepY);
		s.top    = top +'px';
		s.height = (this.fixedBase - top) +'px';
	}
	return this._start(duration);	
}
delete(p);