// @version $Id: make_button.js 4489 2011-09-22 12:04:24Z sjelner $

function makeButton(els,state) {
	if(typeof(state) === 'undefined') state = 'active-big';

	$.extend(this,{
		els: els,
		imgCache: false
	});

	this.init(state);
};

$.extend(makeButton.prototype,{
	state: false,
	imgs: {
		'active-big': {
			'img': '/kabelbw/export/sites/default/resources_tv/images/make_button.png',
			'height': 34,
			'cufon': {
				'font': 'ConduitITCStd Bold',
				'cut': {
					'width': 15,
					'height': 0
				}
			},
			'pieces': {
				'left': [0,0,6,34],
				'center': [6,0,1,34],
				'right': [13,0,23,34]
			},
			'margins': {
				'right': 0,
				'left': 5
			},
			'css': {
				'color': '#FFF',
				'font-size': '20px',
				'text-transform': 'uppercase'
			}
		},
		'active-small': {
			'img': '/kabelbw/export/sites/default/resources_tv/images/make_button.png',
			'height': 26,
			'cufon': {
				'font': 'ConduitITCStd Bold',
				'cut': {
					'width': 8,
					'height': 0
				}
			},
			'pieces': {
				'left': [0,34,5,26],
				'center': [5,34,1,26],
				'right': [11,34,17,26]
			},
			'margins': {
				'right': 0,
				'left': 3
			},
			'css': {
				'color': '#FFF',
				'font-size': '14px',
				'text-transform': 'uppercase'
			}
		}
	},

	transform: function(el) {
		el.removeAttr('data-transform'); //prevent recursive transformation
		var newCan = $('<canvas/>');
		if(typeof(newCan[0].getContext) !== 'undefined') {
			//we use short variable names here to save bandwidth
			var img = this.imgs[this.state];
			var imgEl = this.imgCache[0];
			var lft = img.pieces.left;
			var ctr = img.pieces.center;
			var rgt = img.pieces.right;
			//read out and delete the text
			var txt = el.html();
			el.empty();
			//create ONE solid cufon-canvas from the given text
			var txtTmp = $('<div/>').css(img.css).html(txt);
			/*
			 * this hack is necessary for opra and webkit based browsers. otherwise
			 * the element cannot be measured, if not inserted into the body
			 */
			txtTmp.css({
				'visibility': 'hidden',
				'position': 'absolute',
				'top': -9999,
				'left': -9999,
				'display': 'block'
			});
			txtTmp.appendTo($('body'));
			Cufon.replace(txtTmp[0],{
				'fontFamily': img.cufon.font,
				'separate': 'none',
				'onAfterReplace': function(txtTmp) {
					txtTmp = $(txtTmp);
					txtTmp.css({'display':'none'});
					var txtCan = txtTmp.find('canvas');
					var txtCanDims = [
						txtCan.width()-img.cufon.cut.width,
						txtCan.height()-img.cufon.cut.height
					];
					//build the new image
					var newDims = [
						txtCanDims[0]+lft[2]+rgt[2]+img.margins.left+img.margins.right,
						img.height
					];
					newCan.attr({'width':newDims[0],'height':newDims[1]});
					var newCtx = newCan[0].getContext('2d');
					//left piece
					newCtx.drawImage(
						imgEl,
						lft[0],lft[1],lft[2],lft[3],
						0,0,lft[2],lft[3]
					);
					//stretched center piece
					newCtx.drawImage(
						imgEl,
						ctr[0],ctr[1],ctr[2],ctr[3],
						lft[2],0,(newDims[0]-lft[2]-rgt[2]),ctr[3]
					);
					//right piece
					newCtx.drawImage(
						imgEl,
						rgt[0],rgt[1],rgt[2],rgt[3],
						(newDims[0]-rgt[2]),0,rgt[2],rgt[3]
					);
					//text
					newCtx.drawImage(
						txtCan[0],
						0,0,txtCanDims[0],txtCanDims[1],
						(lft[2]+img.margins.left),((newDims[1]-txtCanDims[1])/2),
						txtCanDims[0],txtCanDims[1]
					);
					newCan.appendTo(el);
					txtTmp.remove();
					el.css('visibility','visible');
				}
			});
		};
	},

	init: function(state) {
		var that = this;
		this.state = state;
		if(typeof(this.els) !== 'undefined' && this.els.length > 0) {
			this.cacheImg(function() {
				that.els.each(function() { that.transform($(this)); });
			});
		};
	},

	cacheImg: function(callback) {
		if(this.imgCache !== false && this.imgCache.length === 1) {
			callback();
		} else {
			this.imgCache = new Image();
			this.imgCache.src = this.imgs[this.state].img;
			this.imgCache = $(this.imgCache);
			$.imgLoaded(this.imgCache,callback);
		};
	}
});