var portal;

var Portal = new Class({
	
	options: {},
	
	initialize: function() {
		this.ie6 = Browser.Engine.trident && Browser.Engine.version == 4;
		this.editor = null;
		this.initializeButtons();
		this.initializeFormValidation();
		this.initializeDatePickers();
		this.initializeEditors();
		if($chk($('SortableList'))) {
			this.sortableList = new Sortables({
			    clone: true,
				revert: { duration: 500, transition: 'elastic:out' }
			});
			$('SortableList').getChildren().each(function(el) {
				this.addImageToSlideShow(el.getFirst('img'));
				el.dispose().destroy();
			}.bind(this));

		}
	},
	
	addImageToSlideShow : function(el) {
		
		var workarea = $('workarea').getFirst('ul');
		var slideShowImage = new Element('img', { 'class' : 'SlideShowImage', 'src' : el.src, 'name' : el.get('name'), 'styles' : { 'padding' : '3px' } });				
		var slideShowImageContainer = new Element('li', { 'class' : 'SlideShowImageContainer', 'align' : 'left', 'styles' : { 'display' : 'block', 'margin' : '3px 0px', 'padding' : '3px 0px', 'width' : '98%' }});
		var secondUL = new Element('ul', {'styles' : { 'cursor' : 'pointer'}});
		var secondLI = new Element('li', {'styles' : { 'display' : 'block', 'width' : '100%', 'background-color' :'#726a57', 'text-align' : 'right' }} );
		var thirdLI =  new Element('li', {'styles' : { 'display' : 'block', 'width' : '100%', 'background-color' :'#a4997f' }} );
		var dragAnchor = new Element('a', { 'html' : 'drag', 'styles' : { 'margin-right' : '6px', 'cursor' : 'pointer', 'color' : '#f1edc9' } });
		dragAnchor.inject(secondLI);
		slideShowImage.inject(thirdLI);
		secondLI.inject(secondUL);
		thirdLI.inject(secondLI, 'after');
		secondUL.inject(slideShowImageContainer);
		slideShowImageContainer.inject(workarea);
		this.sortableList.addItems(slideShowImageContainer);

	},
	
	initializeButtons : function() {

		$$('input.FormButton').each(function(el) {
			el.addEvents({
				'mouseenter' : function(e) {
					this.setStyles({ 'padding' : '10px 58px 5px 0px' });
					this.src = "/WebObjects/HPMemberPortal.woa/Contents/WebServerResources/images/registration/buttonRoll.gif";
				}.bind(el),
				'mouseleave' : function(e) {
					this.setStyles({ 'padding' : '10px 58px 5px 0px' });
					this.src = "/WebObjects/HPMemberPortal.woa/Contents/WebServerResources/images/registration/button.gif";
				}.bind(el)
			});	
		});
	},
	
	initializeDatePickers : function() {
		if($$('.dateinput').length > 0) {
			new DatePicker(".dateinput", { pickerClass : 'datepicker', inputOutputFormat : 'Y/m/d', format : 'Y/m/d' });
		}
	},
	
	initializeEditors : function() {
		if($('editor')) {
			this.editor = new Editor();
			this.editor.setValue($('EditorTarget').value);
			this.editor.render($('editor'));
		}
	},
	
	initializeFormValidation : function() {
		if($('ValidationForm') != null) { new FormCheck('ValidationForm'); }
	},
	
	modalize: function(modalFunc) {
		var overlay = new Element('div').set({
			'align' : 'center',
			'id' : "PortalOverlay",
			"styles" : {
				backgroundColor: "#000",
				left: 0,
				height: Window.getScrollSize().y,
				opacity: 0,
				position: 'absolute',
				top: 0,
				width: "100%",
				zIndex: 42
			}
		});
		overlay.inject(document.body);
		overlay.addEvents({
			'click' : function(el) {
				$('PortalWindow').dispose().destroy();
				this.dispose().destroy();
			}.bind(overlay) 
		});
		new Fx.Tween(overlay).start('opacity', 0.8).chain(eval(modalFunc));

	},
	
	updateEditorTarget : function() {
		$('EditorTarget').set('value', portal.editor.getValue());
		return true;
	},
	
	demodalize: function() {
		setTimeout(function() {
			$('PortalWindow').dispose().destroy();
			return true;
		}, 1000);
	},
	
	processSlideShow : function(dest) {
		var s= "";
		var index = $$('div#workarea img').length;
		var i = 0;
		$$('div#workarea img').each(function(el) {
			i++;
			s += el.get('name');
			s += (i < index) ? "," : "";
		});
		$(dest).value = s;
		return true;
	},

	processingWindow: function() {
		var w = 400;
		var h = 100;
		$(window).scrollTo(0, 0);
		var myImage = new Asset.image('/WebObjects/HPMemberPortal.woa/Contents/WebServerResources/images/site/processing.gif', {
			id : "PortalImage",
			onload: function() {
				myImage.inject(new Element('div', {
					'align' : 'center',
					'id' : 'PortalWindow',
					styles : {
						height : h,
						left: (Window.getWidth() - w) / 2,
						opacity: 1.0,
						position: 'fixed',
						top : 100,
						width : w,
						zIndex: 43
					}
				}).inject(document.body));
			}.bind(myImage)
		});
	}
});

window.addEvent('domready', function() {
	portal = new Portal();
});