var InfoPanel = Class.create();

InfoPanel.prototype = {
	isOpen : false,
	panel : null,
	parentObj : null,
	closeImage: 'http://core.patricksteel.co.uk/images/furniture/lightbox/close.png',
	
	initialize : function( parentId, _dat, footerInfo ) {
		this.isOpen = false;
		this.parentObj = $( parentId );
		this.update( _dat, footerInfo );
	},
	update : function( _dat, footerInfo ) {
		function addCommas(nStr)
		{
			nStr += '';
			x = nStr.split('.');
			x1 = x[0];
			x2 = x.length > 1 ? '.' + x[1] : '';
			var rgx = /(\d+)(\d{3})/;
			while (rgx.test(x1)) {
				x1 = x1.replace(rgx, '$1' + ',' + '$2');
			}
			return x1 + x2;
		}

		var sizeAndPriceContent = [];
        var contentHd = "<tr>"+
                            "<th>Size</th>"+
                            "<th class='padded-cell'>Edition</th>"+
                            "<th class='padded-cell'>Price</th>"+
                            "<th class='action-cell'></th>"+
                        "</tr>";
        sizeAndPriceContent.push( contentHd );
		
		for( i=0; i<_dat.length; ++i )
		{
			var url = _dat[i].url;
			var size = _dat[i].size;
			var price = addCommas(_dat[i].price);
			var quantity = _dat[i].quantity;
			var contentItem = "<tr>"+
                                "<td>"+size+"</td>"+
                                "<td class='padded-cell'>"+quantity+"</td>"+
                                "<td class='padded-cell'>"+price+"</td>"+
                                "<td class='action-cell'><a class='aquireBtn' href='"+url+"'>Acquire print</a></td>"+
                               "</tr>";
			sizeAndPriceContent.push( contentItem );
		}
		
		if( this.panel )
		{
			$('infoPanelContainer').remove();
		}

		this.parentObj.appendChild( 
			Builder.node('div', { id : 'infoPanelContainer' }, 
				Builder.node( 'div', { id : 'infoPanel' }, [
					Builder.node('div', { id : 'panelHeader' }, [
						Builder.node('a',{id:'panelClose', href: '#' },
							Builder.node('img', { src: this.closeImage })),
						Builder.node('p', {id:'panelCloseP'},
							Builder.node('a', {id:'panelCloseLink', href : "#"}, "View sizes and prices"))
					]),
					Builder.node('div', { id : 'panelBody' }, [
                        Builder.node( 'div', { id:'tableHolder' }),
						Builder.node( 'hr' )
					]),
					Builder.node('div', { id : 'panelFooter' } )
				])
			)
		);
		
        this.tableHolder = $('tableHolder');
        var tableContent = "";
        for(var i=0; i<sizeAndPriceContent.length; ++i){
            tableContent+=sizeAndPriceContent[i];
        }
        this.tableHolder.update("<table>"+tableContent+"</table>");
        
        
		this.panel = $('infoPanelContainer');

		$('panelClose').observe('click', function(event){ event.stop(); this.close(); }.bind(this));
		$('panelCloseLink').observe('click', function(event){ event.stop(); this.close(); }.bind(this));
		
		$('panelFooter').innerHTML = footerInfo;
		this.panel.setStyle({right:(this.parentObj.getWidth() - this.parentObj.descendants()[0].getWidth())/2+'px'});
	},
	open : function() {
		this.isOpen = true;
		this.show();
		$('infoPanel').hide();
		new Effect.SlideDown( $('infoPanel'), {
			scaleFrom : 0,
			scaleTo : 100
		});
	},
	close : function() {
		this.isOpen = false;
		new Effect.SlideUp( $('infoPanel'), {
			afterFinish : (function(){
				this.hide();
				this.panel.fire("panel:closed");
			}).bind(this)});
	},
	hide : function() {
		this.isOpen = false;
		this.panel.hide();
	},
	show : function() {
		this.panel.show();
	}
}