Ext.onReady(function() {
	var left = Ext.fly('left');
	var leftDiv = Ext.get('left-div');
	var height = left.getComputedHeight() - 10;
	leftDiv.setHeight(height);
	
	Ext.select('.roll img').on({ 
		mouseover: function(e) {
			var fragments = this.src.split(".");
			fragments[fragments.length - 2] = fragments[fragments.length - 2] + "_over";
			this.src = fragments.join(".");
		},
		mouseout: function(e) {
			var fragments = this.src.split(".");
			var fragment = fragments[fragments.length - 2];
			fragments[fragments.length - 2] = fragment.substr(0, fragment.length - 5);
			this.src = fragments.join(".");
		}
	});
	
	var current = Ext.get('current');
	var x = parseInt((current.getComputedWidth() - 15) / 2);
	var doc = Ext.DomHelper.append('current', {
		tag: 'div', id: 'pointer', html: ' ', style: 'position: relative;'
	});
	Ext.get(doc).setX(current.getX() + x);
	
	// for popup images
	// 712, 567
	Ext.select('.images img').on({
		click: function(e) {
			var fragments = this.src.split(".");
			fragments[fragments.length - 2] = fragments[fragments.length - 2] + "-pop";
			var url = fragments.join(".");
			var left = (screen.width - 712) / 2;
			var top = (screen.height - 567) / 2;
			var w = window.open('about:blank', 'Seamark', 'top=' + top + ',left=' + left + ',locationbar=0,statusbar=0,toolbar=0,menubar=0,status=0,scrollbars=0,resizable=0,width=712,height=567,directories=0');
			w.document.open();
			
			w.document.write('<link rel="stylesheet" href="stylesheets/popup.css" />');
			w.document.write('<div class="container"><img src="' + url + '" /></div>');
			w.document.close();
		}
	});
});