var swiffy;

function openTC() {
	var box = new MooBox();
	box.setOptions({	
		template: 'coolbox_tc'
	});
	box.show();
}

function openForgottenPassword() {
	var box = new MooBox();
	box.setOptions({	
		template: 'coolbox_forgotten'
	});
	box.show();
}
		
function openLogin() {
	var box = new MooBox();
	box.setOptions({  
		template: 'coolbox_login' 
	});	
	box.show();
}

function openAddAlbum(groupId) {
	var params;
	if(groupId) params = "nav=group&group_id=" + groupId;
	else params = "nav=user";
		
	var box = new MooBox();
	box.setOptions({
		template: 'coolbox_album',
		params: params
	});
	box.show();
}

function openAddVideo(pickerMode, objectId, holderElementId) {

	var box = new MooBox();
	var params = "picker_mode=" + pickerMode + "&object_id=" + objectId;
	if(holderElementId) params = params + "&holder=" + holderElementId;
	box.setOptions({
		template: 'coolbox_video',
		params: params
	});
	box.show();
}

function openInviteToCooltribe() {
	var box = new MooBox();
	box.setOptions( { 
		template: 'coolbox_message',
		params: 'mode=invite_to_cooltribe'
	});
	box.show();
}

function openInviteToGroup(memberId) {
	var box = new MooBox();
	box.setOptions( { 
		template: 'coolbox_message',
		params: 'mode=invite_to_group&group_id=' + memberId
	});
	box.show();
}

function openWriteMessage(memberId) {
	var box = new MooBox();
	box.setOptions( { 
		template: 'coolbox_message',
		params: 'mode=write_message&member_id=' + memberId
	});
	box.show();
}

function openRecommendContent(memberId, tableName, primaryKey) {
	var box = new MooBox();
	box.setOptions( { 
		template: 'coolbox_message',
		params: 'mode=recommend_content' 
			+ '&member_id=' + memberId
			+ '&table_name=' + tableName
			+ '&primary_key=' + primaryKey
	})
	box.show();
	return false;
}

function closeBox() {
	if(swiffy) {
		swiffy.box.setStyles({ border: ''	});
		swiffy.box.innerHTML = "";
		swiffy.box = null;
		swiffy = null;
	}
	new MooBox().close();
}

/**
 * Open add images
 */

function openAddImage(pickerMode, objectId, holder) {
	window.scrollTo(0,0);
	
	var box = new MooBox();
	var params = "picker_mode=" + pickerMode + "&object_id=" + objectId;
	if(holder) params = params + "&holder=" + holder;
	box.setOptions({
		template: 'coolbox_image_upload_tab',
		params: params	
	});
	box.removeEvents("onLoaded");
	box.addEvent("loaded",  function() { onUploadImageOpened() } );
	box.show();
}

function showUploadTab(pickerMode, objectId, holder) {
	window.scrollTo(0,0);
	swiffy = null;
	var box = new MooBox();
	var params = "picker_mode=" + pickerMode + "&object_id=" + objectId;
	if(holder) params = params + "&holder=" + holder;	
	box.setOptions({ 
		template: 'coolbox_image_upload_tab',
		params:  params
	});
	box.removeEvents("onLoaded");
	box.addEvent("loaded",  function() { onUploadImageOpened() } );
	box.load();
}
 
function showPickerTab(pickerMode, objectId, holder) {
	window.scrollTo(0,0);
	var box = new MooBox();
	var params = "picker_mode=" + pickerMode + "&object_id=" + objectId;
	if(holder) params = params + "&holder=" + holder;	
	box.setOptions({ 
		template: 'coolbox_image_picker_tab',
		params:  params,
		onLoaded: "" // PROBLEM: This does not clear the 
 	});
	box.removeEvents("onLoaded");
	box.load();
}


/**
 * Changing profile image
 */

function openProfileImage(memberId) {
	var box = new MooBox({ 
		debug: true,
		template: 'coolbox_profileimg',
		params: 'member_id=' + memberId,
		onLoaded: function() { onProfileImageOpened() } 	
	});

	box.show();
}

function onProfileImageOpened() {
	window.scrollTo(0,0);
	if(window.console) console.log("### onProfileImageOpened");

	var url = gBaseUrl + 'readfilesscript.php?mode=profile';

	if(!swiffy) {
		if(window.console) console.log("Creating new swiffy");
		swiffy = new AdvantageUpload('profile-photo-upload', {
			'useCurrentProgressBar': true,
			'useOverallProgressBar': false,		
			'url': url,
			'fieldName': 'photoupload',
			'path': gSwfFile,
			'onLoad': function() {
				//$('demo-status').removeClass('hide');
				//$('member-thumbnail-upload').destroy();
			},
			'onComplete' : function() {
				onProfileImageUploaded(swiffy.uploadedFilename);
			},
			'limitFiles' : 1,
			'debug' : true,
			'instantStart' : true,
			target: 'browse-files'
		});
		$('browse-files').addEvent('click',browseFilesOnClick);
	} else {
		if(window.console) console.log("Swiffy found");
		swiffy.render();
		$('browse-files').addEvent('click',browseFilesOnClick);
	}	
}

// following three functions are executed in chain onProfileImageUploaded => onProfileImageCreated => onProfileImageLoaded

function onProfileImageUploaded(filename) {
	// create the image 
	if(!filename) return false;
	var fragment = "remote.php?mode=create_profile_image" + 
	"&id=" + $("member_id").value + 
	"&filename=" + URLEncode(filename) + 
	"&date=" + Date();
	loadFragment(fragment, onProfileImageCreated);
}

function onProfileImageCreated(np) {
	// load the new image
	var fragment = "remote.php?mode=get_profile_image" +
		"&id=" + $("member_id").value +
		"&date=" + Date();
	loadFragment(fragment, onProfileImageLoaded);
}

function onProfileImageLoaded(imageData) {
	// replace all profile images with new image
	var elems = $$(".memberimage_holder");
	for(i=0;i<elems.length;i++) {
		elems[i].innerHTML = imageData;
	}
}

/**
 * Function converts class into a Singleton
 *
 * Usage: MooBox.toSingleton(); // where MooBox is my class to be used as a singleton
 *
 * Based http://forum.mootools.net/viewtopic.php?id=6409 about Singleton Classes in Mootools way
 * Thank you nwhite, http://www.nwhite.net/
 */
Class.prototype.toSingleton = function(){
	var p = this.prototype;
	var instance = undefined;
 
	if($defined(p.initialize) && $type(p.initialize) == 'function') var init = p.initialize;
 
	p.initialize = function(){
		if(!$defined(instance)){
			if($defined(init) && $type(init) == 'function') init.apply(this,arguments);
			instance = this;
		}
		return instance;	
	}
};

/**
 * Moobox class
 * 
 * Events: onComplete
 */
var MooBox = new Class({
	Implements: [Options, Events],
	timerCenter: null,
	elemFilter: null,
	elemBox: null,
	options: {
		debug: true,
		template: '',
		params: ''
	},
	initialize: function(options) {

		this.log('Initialising the box');
		this.setOptions(options);
	},
	show: function() {		
		this.log('Showing AdvantageUpload');
		// hide invalid elements
		var elems = $$("OBJECT");
		for(i=0; i<elems.length; i++) {
			try {
				if($(elems[i].id)) $(elems[i]).addClass('hide_under_moobox');
			} catch (e) {
				// ignore : Hack for IE causing problems with Swiff objects...
			}			
		}
		
		// Load content and show
		this.create();
		this.load();
		this.centerBox();
		this.test = 10;
		this.timerCenter = setInterval(this.centerBox.bind(this),1000);
	},
	create: function() {
		this.log('Creating the box');
		this.filter = $('cool_filter');
		this.filter.setStyle('top','0px');
		this.filter.setStyle('height',document.body.offsetWidth+"px");
		var ef_one = new Fx.Morph(this.filter, {duration: 300, transition: Fx.Transitions.Sine.easeIn});
 		ef_one.start({'opacity': [0, .9] });

		this.elemBox = $('cool_box');
		this.elemBox .innerHTML = "";
		this.elemBox.setStyle('top','0px');
		this.elemBox.setStyle('height','auto');
		var ef_two = new Fx.Morph(this.elemBox, { duration: 600, transition: Fx.Transitions.Sine.easeIn});
 		ef_two.start({'opacity': [0, 1] });
	
 		var url = "templates/" + this.options.template + ".php";

 		if(this.options.params) url = url + "?" + this.options.params;
	
	},
	onStartLoad: function() {
		this.elemBox.innerHTML = "<img src='images/ajax_working.gif' />";
	},
	onGetCompleted: function() {
		this.fireEvent("loaded");
	},
	centerBox: function(){
		// center box horizontally		
		var halfboxWidth = this.elemBox.getStyle('width').toInt() / 2;
		var browserWidth = document.body.offsetWidth;
		var targetWidth = (browserWidth / 2) - halfboxWidth;
		var ef_three = new Fx.Morph(this.elemBox, { duration: 100, transition: Fx.Transitions.Quad.easeOut});
 		ef_three.start({'left': targetWidth + "px"  });
	},
	load: function(options) {
		this.setOptions(options);
		this.log('Loading box content');
		
		// create url and amend params
		var url = "templates/" + this.options.template + ".php";
 		if(this.options.params) url = url + "?" + this.options.params + "&date" + Date();
	
		var req = new Request.HTML({  
			method: "get",   
			url: url,  
			data: null,	
			update: this.elemBox,
			onComplete: this.onGetCompleted.bind(this)
		});		
		//req.addEvent('complete', this.onGetCompleted.bind(this));
		req.addEvent('request', this.onStartLoad.bind(this));
		req.send();
	},
	clear: function() {
		var elems = $$("OBJECT");
		for(i=0; i<elems.length; i++) {
			try {
				$(elems[i].id).removeClass('hide_under_moobox');					
			} catch (e) {
				// ignore
			}				
		}
		this.elemBox.innerHTML = "";
		
	},
	close: function(){
		this.log('Closing box');		
		// show elements
		// close
		clearInterval(this.timerCenter);
		
		setTimeout(  this.clear.bind(this), 900);
		var ef_one = new Fx.Morph(this.filter, {duration: 600, transition: Fx.Transitions.Sine.easeIn});
		ef_one.start({'opacity': [.9, 0] });
		
		var ef_two = new Fx.Morph(this.elemBox, { duration: 300, transition: Fx.Transitions.Sine.easeIn});
		ef_two.start({'opacity': [1, 0] });
	},	
	postForm: function(frmID){
		this.log('Posting form');		
		var elemForm = $(frmID)
		var postString = "";

		for(i=0; i<elemForm.elements.length; i++){
			if(elemForm.elements[i].type == "checkbox") {
				if(elemForm.elements[i].checked) postString += (elemForm.elements[i].id + "=" + elemForm.elements[i].value + "&");			
			} else {
				if(elemForm.elements[i].type == "textarea") {
					postString += (elemForm.elements[i].id + "=" + URLEncode(elemForm.elements[i].value) + "&");
				} else {
					postString += (elemForm.elements[i].id + "=" + URLEncode(elemForm.elements[i].value) + "&");
				}
				

			}
		}
		this.log('Post ajax ' + postString);
		var req = new Request.HTML({  
			method: "post",  
			url: elemForm.action,  
			data: postString,
			update: this.elemBox
			}).send();  
		//req.addEvent('complete', this.onGetCompleted.bind(this));
		//req.addEvent('request', this.onStartLoad.bind(this));	
	},
	log: function(text, args) {
		if (this.options.debug && window.console) console.log(text.substitute(args || {}));
	}	
});

// Use the helping function to convert this call into a Singleton
MooBox.toSingleton();