circleloader

loader

	var CircleLoaderView = require("CircleLoaderView");

	var myloader = new CircleLoaderView({
		width : 200,
		centerWidth : 100,
		backgroundColor : "#fff",
		tintColor : "blue",
		textColor : "red",
		labelFontSize : 28

	});

	self.add(myloader);

module

function CircleLoaderView(params) {

	var _width = params.width || 100;
	var _centerWidth = params.centerWidth || 50;
	var _radius = _width - 20;

	var _top = params.top || 'auto';
	var _bottom = params.bottom || 'auto';
	var _left = params.left || 'auto';
	var _right = params.right || 'auto';

	var _bgColor = params.backgroundColor || 'white';

	var _tintColor = params.tintColor || 'red';
	var _textColor = params.textColor || 'red';

	var _fontSize = params.labelFontSize || 22;

	var value = 0;

	var self = Ti.UI.createView({
		height : _width,
		width : _width,
		borderRadius : 0,
		left : _left,
		top : _top,
		right : _right,
		bottom : _bottom
	});

	var label = Ti.UI.createLabel({
		text : value,
		width : '100%',
		height : 'auto',
		color : _textColor,
		font : {
			fontSize : _fontSize,
			fontWeight : "bold"
		},

		left : 0,
		textAlign : "center"
	});

	var outerCircle = Ti.UI.createView({
		width : _radius,
		height : _radius,
		backgroundColor : _bgColor,
		borderColor : _tintColor,
		borderRadius : _radius / 2,
		borderWidth : 2,
		zIndex : 0
	});

	var innerCircle = Ti.UI.createView({
		width : _radius - 8,
		height : _radius - 8,
		backgroundColor : _tintColor,
		borderRadius : (_radius / 2) - 4,
		zIndex : 1
	});

	var leftMaskView = Ti.UI.createView({
		width : (_radius / 2) - 4,
		left : 0,
		height : _radius - 8,
		backgroundColor : _bgColor,
		zIndex : 1,
		anchorPoint : {
			x : 1,
			y : 0.5
		},
		zIndex : 0
	});

	var rightRotateView = Ti.UI.createView({
		zIndex : 1,
		backgroundColor : _bgColor,
		width : (_radius / 2) - 4,
		left : (_radius / 2) - 4,
		height : _radius - 8,
		anchorPoint : {
			x : 0,
			y : 0.5
		}
	});

	var centerCircle = Ti.UI.createView({
		width : _centerWidth,
		height : _centerWidth,
		backgroundColor : _bgColor,
		borderRadius : _centerWidth / 2,
		zIndex : 2
	});

	innerCircle.add(rightRotateView);

	var m;
	var l;

	self.setValue = function(e) {

		value = e.value;

		var isAnimated = e.animate || false;

		if (e.value < 0) {
			value = 0;
		}
		if (100 < e.value) {
			value = 100;
		}

		label.text = parseInt(value);

		if (value <= 50) {
			rightRotateView.backgroundColor = _bgColor;
			m = Ti.UI.create2DMatrix({
				rotate : value * 3.6
			});

			l = Ti.UI.create2DMatrix({
				rotate : 0
			});
			if (isAnimated) {
				leftMaskView.animate({
					transform : l,
					duration : 150
				});
				rightRotateView.animate({
					transform : m,
					duration : 150
				});

			} else {
				leftMaskView.transform = l;
				rightRotateView.transform = m;
			}

		} else {

			m = Ti.UI.create2DMatrix({
				rotate : 0
			});

			rightRotateView.transform = m;
			rightRotateView.backgroundColor = _tintColor;

			l = Ti.UI.create2DMatrix({
				rotate : (value - 50) * 3.6
			});

			if (isAnimated) {
				leftMaskView.animate({
					transform : l,
					duration : 150
				});

			} else {
				leftMaskView.transform = l;

			}

		}

	}

	innerCircle.add(leftMaskView);
	self.add(centerCircle);
	outerCircle.add(innerCircle);
	self.add(outerCircle);

	centerCircle.add(label);

	return self;
}

//make constructor function the public component interface
module.exports = CircleLoaderView;