// View Layer - main image viewer code, animations, transitions, pre-loaders etc.

var PanelView = new Class({	
	initialize: function(view) {
		window.Panel = this;
		
		this.busy = false;
		this.viewer = $(view);
		this.loader = this.create_loader();
		this.hints = this.viewer.getChildren('.hints');
		
		this.before = this.create_holder().addClass('before');
		this.after = this.create_holder().addClass('after');
		this.load_hold = this.create_holder().addClass('after holder');

		this.viewer.adopt([this.loader,this.before,this.after,this.load_hold]);
	},
	
	create_subtle_controls: function() {
		this.viewer.adopt(this.actions = this.create_action_hits());
		this.fireEvent('subtleControlsCreated');
	},
	
	render: function(item, infull) { 
		this.fireEvent('renderStart', infull);
		infull ? this.render_infull(item) : this.render_split(item); 
	},
	
	render_infull: function(item) {
			this.load_hold.setStyle("opacity",0)

		// if (Model.next_is_change) {
		// 	this.load_hold.setStyle("opacity",0)
		// } else {
		// 	this.load_hold.setStyle("opacity",1)
		// 	this.load_hold.setStyles(this.after.getStyles("background")).setStyle('opacity', 1);
		// }
		this.before.setStyles('background: url('+item.get('before_url')+') top left no-repeat; width:100%')
		this.after.setStyles('background: url('+item.get('after_url')+') top right no-repeat; width:100%')
		
		this.busy = true;
		util.startLater(new Fx.Style(this.load_hold, 'opacity', {onComplete: function() {
			this.load_hold.setStyle('opacity', 0)
			this.load_hold.setStyle('background', 'none');
			this.busy = false;
			this.fireEvent('renderComplete');
		}.bind(this)}),0,700)
		
	},
	
	render_split: function(item) {
		this.before.setStyles('background: url('+item.get('before_url')+') top left no-repeat; width:100%')
		this.after.setStyles('background: url('+item.get('after_url')+') top right no-repeat; width:100%')
		
		this.busy = true;
		util.startLater(new Fx.Style(this.after, 'width', {unit: '%', duration: 1000, onComplete: function() {
			this.after.setStyle('width', '50%');
			this.busy = false;
			this.fireEvent('renderComplete');
		}.bind(this)}),50,1500);
	},
	
	show_loader: function(fade) {
		this.busy = true;
		if(fade) 
			this.loader.effect('opacity').set(1);
		else
			this.loader.effect('opacity').set(1);
	},
	
	hide_loader: function() {
		util.startLater(new Fx.Style(this.loader, 'opacity'),0,500);
	},
	
	toggle_before: function(e, out) {
		new Event(e).preventDefault();
		if (!this.busy) out != true ? this.after.setStyle('width', '0%') : this.after.setStyle('width', '50%');
	},
	
	toggle_after: function(e, out) {
		new Event(e).preventDefault();
		if (!this.busy) out != true ? this.after.setStyle('width', '100%') : this.after.setStyle('width', '50%');
	},
	
	toggle_hints: function(e) {
		new Event(e).preventDefault();
		if (!this.busy) this.hints.toggleClass("hidden");
	},
	
	create_loader: function() { return new Element('div', {'id':'loader'}).addClass('block'); },
	create_holder: function() { return new Element('div', {'class':'holder'}).addClass('holder'); },
	create_action_hits: function() { 
		return new Element('div', {'id': 'actions'}).adopt([
			new Element('span', {'class': 'before'}),
			new Element('span', {'class': 'after'})
		]);
	}
});

PanelView.implement(new Events);

window.loadedAssetLength +=1;