//サポートブラウザの判別
(function() {
	var allows = ['firefox/3.6', 'safari', 'chrome'];
	var browser = navigator.userAgent.toLowerCase();
	for( var i=0; i<allows.length; i++ ) {
		if( browser.indexOf( allows[i] ) !== -1 ) {
			return;
		}
	}
	alert('今お使いのブラウザはこのツールに対応していません。\nFirefox3.6β以上か、Safari、Google Chromeで使用してください。');
 })();

$(function() {
	/* 共通変数を定義 */
	var _testObj = $( '#testObj' );
	var _dragFlg = false;
	var _parentW = $( '#slider' ).width();
	var _clickPosX = 0;
	var _clickPosY = 0;
	var _defL = 0;
	var _pos = 0;
	var _obj = null;
	var _points = [];
	var _zIndex = 100;
	var _pickCnt = 3;
	var _curPoint = null;
	var _curInput = null;
	var _saveProperty = {};
	var _curHeight = $( '#testObj' ).height();

	var _flg = 0;

	var POINT_DRAG = 0x00000001;
	var DOWN_DRAG = 0x00000010;

	//RGBAに変換
	function convRGBA( rgb, a ) {
		if( a !== 0 && !a ) {
			return rgb;
		} else if( a >= 1 ) {
			return rgb;
		}
		var temp = $.fmtColor( rgb ).replace( '#','' );
		var _r = temp.substring(0,2);
		var _g = temp.substring(2,4);
		var _b = temp.substring(4,6);
		return 'rgba(' + parseInt( _r, 16 ) + ',' + parseInt( _g, 16 ) + ',' + parseInt( _b, 16 ) + ',' + a + ')';
	}

	//IE filterのRGBAに変換
	function convRGBA4IE( rgb, a ) {
		if( a !== 0 && !a ) {
			a = 'ff';
		} else {
			a = Math.floor(( 255 * a ) ).toString( 16 );
			a = a.length === 1 ? '0' + a : a;
		}
		var temp = $.fmtColor( rgb ).replace( /#/, "#" + a );
		return temp;
	}

	//入力オフ
	function tglInput( id ) {
		if( $( '#' + id + ' :checkbox' ).attr( 'checked' ) ) {
			$( '#' + id + ' :input' ).not( ':checkbox' ).attr( 'disabled','' );
		} else {
			$( '#' + id + ' :input' ).not( ':checkbox' ).attr( 'disabled','disabled' );
		}
	}

	//ヘルプを表示
	$( '#helpBtn' ).click(function() {
		$( '#helpContent' ).fadeIn();
	});
	$( '#helpContent' ).click(function() {
		$( this ).fadeOut();
	});
	
	//IE向けのfilterプロパティを出力
	function _createIEProperty() {
		//for IE
		if( $( '#forIEON' ).attr( 'checked' ) ) {
			var _d = Math.floor( Math.atan2( $( '#drpX' ).val(), -$( '#drpY' ).val() ) * 180 / Math.PI );
			var _s = Math.abs( parseInt( $( '#drpY' ).val() ) ) === 0 ? Math.abs( parseInt( $( '#drpX' ).val() ) ) : Math.abs( parseInt( $( '#drpY' ).val() ) );

			_saveProperty['filter'] = '';
			_saveProperty['filter'] += 'progid:DXImageTransform.Microsoft.gradient(startcolorstr=' + convRGBA4IE( _points[0].css( 'background-color' ), _points[0].get(0).alpha ) + ', endcolorstr=' + convRGBA4IE( _points[_points.length-1].css( 'background-color' ), _points[_points.length-1].get(0).alpha ) + ', gradienttype=0))';

			_saveProperty['-ms-filter'] = '"';
			_saveProperty['-ms-filter'] += 'progid:DXImageTransform.Microsoft.gradient(startcolorstr=' + convRGBA4IE( _points[0].css( 'background-color' ), _points[0].get(0).alpha ) + ', endcolorstr=' + convRGBA4IE( _points[_points.length-1].css( 'background-color' ), _points[_points.length-1].get(0).alpha ) + ', gradienttype=0))';
			if( $( '#drpChk' ).attr( 'checked' ) ) {
				_saveProperty['filter'] += ' progid:DXImageTransform.Microsoft.Shadow(color=' + $.fmtColor( $( '#cs01' ).css( 'background-color' ) ) + ', direction=' + _d + ', strength=' + _s + ')';

				_saveProperty['-ms-filter'] += ' progid:DXImageTransform.Microsoft.Shadow(color=' + $.fmtColor( $( '#cs01' ).css( 'background-color' ) ) + ', direction=' + _d + ', strength=' + _s + ')';
			}
			_saveProperty['-ms-filter'] += '"';
		} else {
			_saveProperty['filter'] = 'none';
			_saveProperty['-ms-filter'] = 'none';
		}
	}

	//ソース出力ボタン
	$( '#outputBtn' ).click(function() {
		_createCode();
		_outputSouce();
	});

	//現在設定されているプロパティを出力
	$( '#outputBox' ).click(function() {
		$( this ).fadeOut();
	});
	$( '#output' ).click(function( evt ) {
		evt.stopPropagation();
	});

	function _outputSouce() {
		//ボックスを表示
		$( '#outputBox' ).fadeIn();
		var s = 'selector {\n';
		for( var i in _saveProperty ) {
			if( _saveProperty[i] !== 'none' ) {
				s += '\t' + i.replace(/\-css3[w|m]/,'') + ': ' + _saveProperty[i] + ';\n';
			}
		}
		if( $( '#forIEON' ).attr( 'checked' ) ) {
			s += '\tzoom: 1;\n';
		}
		s += '}';
		$( '#output' ).val( s );
	}

	//設定されているプロパティを取得
	function _createCode() {
		_setColor()
		_setBoxShadow();
		_setTextShadow();
		_setBorderRadius();
		_setTextSize();
		_createIEProperty();
	}

	function _cntUpS( that ) {
		$( that ).val( Math.floor( Number( $( that ).val() ) * 10 + 1 ) / 10 );
	}
	function _cntUp( that ) {
		$( that ).val( parseInt( $( that ).val() ) + 1 );
	}
	function _cntDownS( that ) {
		$( that ).val( Math.floor( Number( $( that ).val() ) * 10 - 1 ) / 10 );
	}
	function _cntDown( that ) {
		$( that ).val( parseInt( $( that ).val() ) - 1 );
	}

	//マウスホイール処理
	$( document ).get(0).addEventListener( 'DOMMouseScroll', _scrollEvent , false );
	window.onmousewheel = _scrollEvent;
	function _scrollEvent( evt ) {
		if( _curInput ) {
			var delta = 0;

			if( evt.wheelDelta ) {
				delta = evt.wheelDelta / 120;
			} else if( evt.detail ) {
				delta = -evt.detail / 3;
			}
			
			if( delta ) {
				if( delta < 0 ) {
					if( $( _curInput ).attr( 'class' ).indexOf( 'fractional' ) !== -1 ) {
						$( _curInput ).val( Math.floor( Number( $( _curInput ).val() ) * 10 - 1 ) / 10 );
					} else {
						$( _curInput ).val( parseInt( $( _curInput ).val() ) - 1 );
					}
				} else {
					if( $( _curInput ).attr( 'class' ).indexOf( 'fractional' ) !== -1 ) {
						$( _curInput ).val( Math.floor( Number( $( _curInput ).val() ) * 10 + 1 ) / 10 );
					} else {
						$( _curInput ).val( parseInt( $( _curInput ).val() ) + 1 );
					}
				}

				_createCode();
				evt.preventDefault();
			}
		}
	}

	$( '#gradientAlpha, #drpX, #drpY, #drpB, #drpA, #tsX, #tsY, #tsB, #tsA, #rlt, #rrt, #rlb, #rrb, #txtSize' ).click(function() {
		_curInput = this;
	}).focus(function() {
		_curInput = this;
	}).blur(function() {
		_curInput = null;
	});

	/* ----------------------------------
	   ドラッグを定義
	------------------------------------- */
	$( document ).mousemove(function( evt ) {
		if( _dragFlg ) {
			evt.preventDefault();
			if( window.getSelection ) {
				window.getSelection().removeAllRanges();
			}

			if( evt.pageY - _clickPosY > 20 ) {
				_delPoint( _obj );
			}

			_pos = ( _defL + evt.pageX - _clickPosX ) > _parentW ? _parentW  : ( _defL + evt.pageX - _clickPosX ) < 0 ? 0 : _defL + evt.pageX - _clickPosX;
			$( _obj ).css( 'left', _pos  + 'px' );
			_sortPoints();
			_setColor();
		} else if( _flg & DOWN_DRAG ) {
			evt.preventDefault();
			if( window.getSelection ) {
				window.getSelection().removeAllRanges();
			}
	
			var _height = evt.pageY - _clickPosY;
			_height += _curHeight;
			$( '#testObj' ).css( 'min-height', _height + 'px' );
		}
	}).mouseup(function() {
		_dragFlg = false;
		_flg = 0;
		_curHeight = $( '#testObj' ).height();
		_obj = null;
	});

	/* ----------------------------------
	   ボックスリサイズ
	------------------------------------- */
	$( '#testObjDrager' ).mousedown(function( evt ) {
		//ボックスサイズ用ドラッグの開始
		_flg |= DOWN_DRAG;

		_clickPosX = evt.pageX;
		_clickPosY = evt.pageY;
	});

	/* ----------------------------------
	   グラデーション設定
	------------------------------------- */
	//ドラッグ処理を追加
	_setDrag( 'point1' );
	_setDrag( 'point2' );

	//カンバス設定
	$( '#canvasState' ).change(function() {
		switch( this.value ) {
			case 'white':
				$( '#canvas' ).css( 'background', 'white' );
				break;
			case 'black':
				$( '#canvas' ).css( 'background', 'black' );
				break;
			case 'alpha':
				$( '#canvas' ).css( 'background', 'url(bg_alpha.gif)' );
				break;
			case 'texture':
				$( '#canvas' ).css( 'background', 'url(textures.jpg)' );
				break;
		}
	});

	//グラデーション設定にポイントを追加
	$( '#slider' ).mousedown(function( evt ) {
		if( !_dragFlg ) {
			var _p = $( '<p id="point' + ++_pickCnt + '" class="pickerPoint"><span></span></p>' ).css( { 'background-color': '#fff', 'left': evt.pageX - $( '#slider' ).offset().left + 'px' } );
			$( this ).append( _p );
			_setDrag( 'point' + _pickCnt );
			_sortPoints();
			_setColor();
		}
	});


	/* 共通関数を定義 */
	function _setDrag( id ) {
		//mousedown時の動作を設定
		$( '#' + id ).mousedown( function( evt ) {
			evt.stopPropagation();
			_dragFlg = true;
			_defL = parseInt( $( this ).css( 'left' ) );
			_clickPosX = evt.pageX;
			_clickPosY = evt.pageY;
			_obj = this;
			$( this ).css( 'z-index', ++_zIndex );

			if( this.alpha !== 0 && !this.alpha ) {
				this.alpha = 1;
			}

			_curPoint = this;
			$( '#gradientAlpha' ).val( this.alpha );
			$( '#slider .pickerPoint.active' ).removeClass( 'active' );
			$( this ).addClass( 'active' );
		}).dblclick(function( evt ) {
			var cp = $( '<div />' );
			cp.css({
				'position': 'absolute',
				//'left': evt.pageX + 'px',
				'top': evt.pageY + 'px',
				'right': 0,
				'z-index': 10000
			});
			$( 'body' ).append( cp );
			cp.ColorPicker({
				flat: true,
				color: $.fmtColor( $( '#' + id ).css( 'background-color' ) ),
				onChange: function( hsb, hex, rgb ) {
					$( '#' + id ).css('background-color', '#' + hex);
					_sortPoints();
					_setColor();
				},
				onSubmit: function( hsb, hex, rgb, el ) {
					$( el ).remove();
				}
			});
		});

		//配列に格納
		_points.push( $( '#' + id ) );
	}
	
	//グラデーションのポイントの整列
	function _sortPoints() {
		_points.sort(function( a, b ) {
			//各leftの値をキーにソート
			return parseInt( a.css( 'left' ) ) - parseInt( b.css( 'left' ) );
		});
	}

	//グラデーションを設定
	function _setColor() {
		if( _curPoint ) {
			_curPoint.alpha =	$( '#gradientAlpha' ).val() < 0 ? 0 : 
								$( '#gradientAlpha' ).val() > 1 ? 1 : $( '#gradientAlpha' ).val();
			$( '#gradientAlpha' ).val( _curPoint.alpha );
		} else {
			$( '#gradientAlpha' ).val( '' );
		}

		var _colorsWebKit = [];
		var _colorsMozilla = [];

		for( var i=0; i<_points.length; i++ ) {
			_colorsWebKit .push( 'color-stop(' + ( Math.floor( ( parseInt( _points[i].css( 'left' ) ) / _parentW ) * 10 ) / 10 ) + ', ' + convRGBA( _points[i].css( 'background-color' ), _points[i].get(0).alpha ) + ')' );
			_colorsMozilla .push( convRGBA( _points[i].css( 'background-color' ), _points[i].get(0).alpha ) + ' ' + Math.floor( parseInt( _points[i].css( 'left' ) ) / _parentW * 100 ) + '%' );
		}

		_saveProperty['background-image-css3w'] = '-webkit-gradient(linear, left top, left bottom,' + _colorsWebKit.join() + ')';
		_saveProperty['background-image-css3m'] = '-moz-linear-gradient(-90deg,' + _colorsMozilla.join() + ')';
		_saveProperty['background-image'] = 'linear-gradient(-90deg,' + _colorsMozilla.join() + ')';

		$( '#gradientColor' ).css( 'background-image', '-webkit-gradient(linear, left top, right top,' + _colorsWebKit.join() + ')');
		$( '#gradientColor' ).css( 'background-image', '-moz-linear-gradient(0deg,' + _colorsMozilla.join() + ')');
		$( '#gradientColor' ).css( 'background-image', 'linear-gradient(0deg,' + _colorsMozilla.join() + ')');

		_testObj.css( 'background-image', _saveProperty['background-image-css3w']);
		_testObj.css( 'background-image', _saveProperty['background-image-css3m']);
		_testObj.css( 'background-image', _saveProperty['background-image']);
	}

	//グラデーションのポイントを削除
	function _delPoint( obj ) {
		if( _points.length > 2 && obj ) {
			for( var i=0; i<_points.length; i++ ) {
				if( _points[i].get(0).id === obj.id ) {
					_points.splice( i, 1 );
				}
			}
			$( obj ).remove();
			_obj = null;
		}
	}

	//アルファの設定
	$( '#gradientAlpha' ).keydown(function( evt ) {
		if( _curPoint ) {
			switch( evt.keyCode ) {
				case 38:
					$( this ).val( Math.floor( Number( $( this ).val() ) * 10 + 1 ) / 10 );
					break;
				case 40:
					$( this ).val( Math.floor( Number( $( this ).val() ) * 10 - 1 ) / 10 );
					break;
			}
			
			_sortPoints();
			_setColor();
		}
	}).keyup(function() {
		_sortPoints();
		_setColor();
	});


	/* ----------------------------------
	   ドロップシャドウ・テキストシャドウ
	------------------------------------- */
	$( '#drpX, #drpY, #drpB, #drpA' ).blur( _setBoxShadow ).keydown(function( evt ) {
			switch( evt.keyCode ) {
				case 38:
					if( this.id === 'drpA' ) {
						_cntUpS( this );
					} else {
						_cntUp( this );
					}
					break;
				case 40:
					if( this.id === 'drpA' ) {
						_cntDownS( this );
					} else {
						_cntDown( this );
					}
					break;
			}
		_setBoxShadow();
	}).keyup( _setBoxShadow );


	$( '#tsX, #tsY, #tsB, #tsA' ).blur( _setTextShadow ).keydown(function( evt ) {
			switch( evt.keyCode ) {
				case 38:
					if( this.id === 'tsA' ) {
						_cntUpS( this );
					} else {
						_cntUp( this );
					}
					break;
				case 40:
					if( this.id === 'tsA' ) {
						_cntDownS( this );
					} else {
						_cntDown( this );
					}
					break;
			}
		_setTextShadow();
	}).keyup( _setTextShadow );

	function _setBoxShadow() {
		if( !$( '#drpChk' ).attr( 'checked' ) ) {
			_testObj.css( '-webkit-box-shadow', 'none' );
			_testObj.css( '-moz-box-shadow', 'none' );
			_testObj.css( 'box-shadow', 'none' );
			
			_saveProperty['-webkit-box-shadow'] = 'none';
			_saveProperty['-moz-box-shadow'] = 'none';
			_saveProperty['box-shadow'] = 'none';
		} else {
			var _dx = $( '#drpX' ).val();
			var _dy = $( '#drpY' ).val();
			var _db = $( '#drpB' ).val();
			var _da = $( '#drpA' ).val();
			_db = ( _db < 0 ) ? 0 : _db;
			$( '#drpB' ).val( _db );

			_da = ( _da < 0 ) ? 0 :
				( _da > 1 ) ? 1 : _da;
			$( '#drpA' ).val( _da );
			var _dc = convRGBA( $( '#cs01' ).css( 'background-color' ), _da );

			_testObj.css( '-webkit-box-shadow', _dx + 'px ' + _dy + 'px ' + _db + 'px ' + _dc );
			_testObj.css( '-moz-box-shadow', _dx + 'px ' + _dy + 'px ' + _db + 'px ' + _dc );
			_testObj.css( '-ms-box-shadow', _dx + 'px ' + _dy + 'px ' + _db + 'px ' + _dc );
			_testObj.css( 'box-shadow', _dx + 'px ' + _dy + 'px ' + _db + 'px ' + _dc );

			_saveProperty['-webkit-box-shadow'] = _dx + 'px ' + _dy + 'px ' + _db + 'px ' + _dc;
			_saveProperty['-moz-box-shadow'] = _dx + 'px ' + _dy + 'px ' + _db + 'px ' + _dc;
			_saveProperty['-ms-box-shadow'] = _dx + 'px ' + _dy + 'px ' + _db + 'px ' + _dc;
			_saveProperty['box-shadow'] = _dx + 'px ' + _dy + 'px ' + _db + 'px ' + _dc;

		}
	}

	function _setTextShadow() {
		if( !$( '#txtChk' ).attr( 'checked' ) ) {
			_testObj.css( 'text-shadow', 'none' );
			_saveProperty['text-shadow'] = 'none';
		} else {
			var _tx = $( '#tsX' ).val();
			var _ty = $( '#tsY' ).val();
			var _tb = $( '#tsB' ).val();
			var _ta = $( '#tsA' ).val();
			_tb = ( _tb < 0 ) ? 0 : _tb;
			$( '#tsB' ).val( _tb );

			_ta = ( _ta < 0 ) ? 0 :
				( _ta > 1 ) ? 1 : _ta;
			$( '#tsA' ).val( _ta );
			var _tc = convRGBA( $( '#cs02' ).css( 'background-color' ), _ta );

			_testObj.css( 'text-shadow', _tx + 'px ' + _ty + 'px ' + _tb + 'px ' + _tc );
			_saveProperty['text-shadow'] = _tx + 'px ' + _ty + 'px ' + _tb + 'px ' + _tc;
		}
	}

	$( '#drpChk' ).click(function() {
		tglInput( 'dropshadowSetting' );
		_setBoxShadow();
	});

	$( '#txtChk' ).click(function() {
		tglInput( 'textshadowSetting' );
		_setTextShadow();
	});

	/* ----------------------------------
	   カラーセレクター
	------------------------------------- */
	$('#cs01').ColorPicker({
		color: '#333333',
		onChange: function (hsb, hex, rgb) {
			$('#cs01').css('backgroundColor', '#' + hex);
			_setBoxShadow();
		}
	});

	$('#cs02').ColorPicker({
		color: '#ffffff',
		onChange: function (hsb, hex, rgb) {
			$('#cs02').css('backgroundColor', '#' + hex);
			_setTextShadow();
		}
	});

	$('#cs03').ColorPicker({
		color: '#333333',
		onChange: function (hsb, hex, rgb) {
			$('#cs03').css('backgroundColor', '#' + hex);
			_setTextColor();
		}
	});

	/* ----------------------------------
	   テキスト編集
	------------------------------------- */
	$( '#testObj p' ).click(function( evt ) {
		evt.stopPropagation();
		if( !$( '#textModify' ).get(0) ) {
			$( this ).hide();
			$( '#testObj' ).append(
				$( '<textarea id="textModify" />' )
					.css({
						'-moz-box-sizing': 'border-box',
						'-webkit-box-sizing': 'border-box',
						'-ms-box-sizing': 'border-box',
						'box-sizing': 'border-box',
						'width': '100%',
						'height': '100px'
					})
					.val( $( '#testObj p' ).html().replace( /<br>/g,'\n' ) )
					.click( function( evt ) { evt.stopPropagation() } )
			); 
		}
	});
	$( document ).click(function( evt ) {
		if( $( '#textModify' ).get(0) ) {
			$( '#testObj p' ).html( $( '#textModify' ).val().replace(/[\n|\r|\r\n]/g,'<br />') ).show();
			$( '#textModify' ).remove();
		}
	});
	
	function _setTextColor() {
		var _txtc = $( '#cs03' ).css( 'background-color' );
		_testObj.css( 'color', _txtc );

		_saveProperty['color'] = _txtc;
	}
	$( '#txtSize' ).blur( _setTextSize ).keydown(function( evt ) {
		switch( evt.keyCode ) {
			case 38:
				_cntUp( this );
				break;
			case 40:
				_cntDown( this );
				break;
		}

		_setTextSize();
	});

	function _setTextSize() {
		var _txts = $( '#txtSize' ).val();
		_testObj.css( 'font-size', _txts + 'px' );

		_saveProperty['font-size'] = _txts + 'px';
	}

	/* ----------------------------------
	   角丸設定
	------------------------------------- */
	$( '#rlt, #rrt, #rlb, #rrb' ).blur( _setBorderRadius ).keydown(function( evt ) {
		switch( evt.keyCode ) {
			case 38:
				_cntUp( this );
				_setBorderRadius();
				break;
			case 40:
				_cntDown( this );
				_setBorderRadius();
				break;
			case 13:
				_setBorderRadius();
		}
	});

	$( '#rAll' ).click(function() {
			if( !$( '#radiusChk' ).attr( 'checked' ) ) {
				return;
			}
			if( $( '#rAll' ).attr( 'checked' ) ) {
				$( '#rrt, #rlb, #rrb' ).attr( 'disabled', 'disabled' );
			} else {
				$( '#rlt, #rrt, #rlb, #rrb' ).attr( 'disabled', '' );
			}
	});

	function _setBorderRadius() {
		var _rlt = _rrt = _rlb = _rrb = 0;
		if( $( '#rAll' ).attr( 'checked' ) ) {
			_rlt = _rrt = _rlb = _rrb = $( '#rlt' ).val() < 0 ? 0 : $( '#rlt' ).val();
			$( '#rlt, #rrt, #rlb, #rrb' ).val( _rlt );
		} else {
			_rlt = $( '#rlt' ).val() < 0 ? 0 : $( '#rlt' ).val();
			_rrt = $( '#rrt' ).val() < 0 ? 0 : $( '#rrt' ).val();
			_rlb = $( '#rlb' ).val() < 0 ? 0 : $( '#rlb' ).val();
			_rrb = $( '#rrb' ).val() < 0 ? 0 : $( '#rrb' ).val();

			$( '#rlt' ).val( _rlt );
			$( '#rrt' ).val( _rrt );
			$( '#rlb' ).val( _rlb );
			$( '#rrb' ).val( _rrb );
		}

		if( $( '#radiusChk' ).attr( 'checked' ) ) {
			if( $( '#rAll' ).attr( 'checked' ) ) {
				_testObj.css( '-moz-border-radius', _rlt + 'px' );
				_testObj.css( '-webkit-border-radius', _rlt + 'px' );
				_testObj.css( 'border-radius', _rlt + 'px' );
				_saveProperty['-moz-border-radius'] = _saveProperty['-webkit-border-radius'] = _saveProperty['border-radius'] = _rlt + 'px';

				_saveProperty['-moz-border-radius-topleft'] = _saveProperty['-webkit-border-top-left-radius'] = _saveProperty['border-top-left-radius'] = 'none';
				_saveProperty['-moz-border-radius-topright'] = _saveProperty['-webkit-border-top-right-radius'] = _saveProperty['border-top-right-radius'] = 'none';
				_saveProperty['-moz-border-radius-bottomleft'] = _saveProperty['-webkit-border-bottom-left-radius'] = _saveProperty['border-bottom-left-radius'] = 'none';
				_saveProperty['-moz-border-radius-bottomright'] = _saveProperty['-webkit-border-bottom-right-radius'] = _saveProperty['border-bottom-right-radius'] = 'none';
			} else {
				_testObj.css( '-moz-border-radius-topleft', _rlt + 'px' );
				_testObj.css( '-moz-border-radius-topright', _rrt + 'px' );
				_testObj.css( '-moz-border-radius-bottomleft', _rlb + 'px' );
				_testObj.css( '-moz-border-radius-bottomright', _rrb + 'px' );

				_testObj.css( '-webkit-border-top-left-radius', _rlt + 'px' );
				_testObj.css( '-webkit-border-top-right-radius', _rrt + 'px' );
				_testObj.css( '-webkit-border-bottom-left-radius', _rlb + 'px' );
				_testObj.css( '-webkit-border-bottom-right-radius', _rrb + 'px' );

				_testObj.css( 'border-top-left-radius', _rlt + 'px' );
				_testObj.css( 'border-top-right-radius', _rrt + 'px' );
				_testObj.css( 'border-bottom-left-radius', _rlb + 'px' );
				_testObj.css( 'border-bottom-right-radius', _rrb + 'px' );

				_saveProperty['-moz-border-radius-topleft']		= _saveProperty['-webkit-border-top-left-radius']		= _saveProperty['border-top-left-radius']		= _rlt + 'px' ;
				_saveProperty['-moz-border-radius-topright']	= _saveProperty['-webkit-border-top-right-radius']		= _saveProperty['border-top-right-radius']		= _rrt + 'px' ;
				_saveProperty['-moz-border-radius-bottomleft']	= _saveProperty['-webkit-border-bottom-left-radius']	= _saveProperty['border-bottom-left-radius']	= _rlb + 'px' ;
				_saveProperty['-moz-border-radius-bottomright']	= _saveProperty['-webkit-border-bottom-right-radius']	= _saveProperty['border-bottom-right-radius']	= _rrb + 'px' ;

				_saveProperty['-moz-border-radius'] = _saveProperty['-webkit-border-radius'] = _saveProperty['border-radius'] = 'none';
			}
		} else {
			_testObj.css( '-moz-border-radius-topleft', '0' );
			_testObj.css( '-moz-border-radius-topright', '0' );
			_testObj.css( '-moz-border-radius-bottomleft', '0' );
			_testObj.css( '-moz-border-radius-bottomright', '0' );

			_testObj.css( '-webkit-border-top-left-radius', '0' );
			_testObj.css( '-webkit-border-top-right-radius', '0' );
			_testObj.css( '-webkit-border-bottom-left-radius', '0' );
			_testObj.css( '-webkit-border-bottom-right-radius', '0' );

			_saveProperty['-moz-border-radius-topleft'] = _saveProperty['-webkit-border-top-left-radius'] = 'none';
			_saveProperty['-moz-border-radius-topright'] = _saveProperty['-webkit-border-top-right-radius'] = 'none';
			_saveProperty['-moz-border-radius-bottomleft'] = _saveProperty['-webkit-border-bottom-left-radius'] = 'none';
			_saveProperty['-moz-border-radius-bottomright'] = _saveProperty['-webkit-border-bottom-right-radius'] = 'none';

			_saveProperty['-moz-border-radius'] = _saveProperty['-webkit-border-radius'] = 'none';
		}
	}

	$( '#radiusChk' ).click(function() {
		if( $( '#radiusSetting :checkbox' ).attr( 'checked' ) ) {
			if( $( '#rAll' ).attr( 'checked' ) ) {
				$( '#rlt' ).attr( 'disabled', '' );
			} else {
				$( '#radiusSetting :input' ).not( ':checkbox' ).attr( 'disabled','' );
			}
		} else {
			$( '#radiusSetting :input' ).not( ':checkbox' ).attr( 'disabled','disabled' );
		}
		_setBorderRadius();
	});
});