

	function Dragable() {}

	Dragable.prototype.containers	= [];
	Dragable.prototype.draggables	= [];

	Dragable.prototype.addContainer	= function( ID ) {
		this.containers.push( $(ID) );
	}

	Dragable.prototype.detectBoxes	= function() {
		var BOXES, NEWS, INDEX, z, i, j;

		for( z = 0; z < this.containers.length; z++ ) {
			BOXES	= Elements( this.containers[z], 'div' );

			for( i = 0; i < BOXES.length; i++ ) {
				if( !BOXES[i].className.match( /(^| )draggable( |$)/ ) )
					continue;

				INDEX	= this.draggables.push({
					'Object'			:	BOXES[i],
					'Container'			:	this.containers[z],
					'H2'				:	Elements( BOXES[i], 'h2' )[0],
					'Title'				:	Elements( BOXES[i], 'h2' )[0].firstChild.nodeValue,
					'NewsList'			:	[],
					'arrLeft'			:	null,
					'arrRight'			:	null,
					'current'			:	null,
					'currentIndex'		:	0,
					'Dummy'				:	null,
					'moving'			:	false,
					'noPlusDiversion'	:	false,
					'column'			:	z + 1,
					'overColumn'		:	z + 1
				}) - 1;

				NEWS	= Elements( BOXES[i], 'li' );

				for( j = 0; j < NEWS.length; j++ )
					this.draggables[ INDEX ][ 'NewsList' ].push( NEWS[j] );
			}
		}
	}

	Dragable.prototype.setArrows	= function( BOX ) {
		var NewsControl	= El( 'span', { 'insertBefore': BOX.H2.firstChild, 'class': 'news-control' } );

		BOX['arrLeft']	= El( 'a', { 'parent': NewsControl, 'class': 'arrow-left left-inactive' } );
		BOX['arrRight']	= El( 'a', { 'parent': NewsControl, 'class': 'arrow-right' } );

		BOX['arrLeft'].setAttribute( 'href', 'javascript://Previous' );
		BOX['arrLeft'].setAttribute( 'title', 'Предишна новина' );

		BOX['arrRight'].setAttribute( 'href', 'javascript://Next' );
		BOX['arrRight'].setAttribute( 'title', 'Следваща новина' );

		BOX['arrLeft'].ondblclick	= function() { return false; }
		BOX['arrRight'].ondblclick	= function() { return false; }

		BOX['arrLeft'].onclick	= function() {
			if( BOX.currentIndex == 0 )
				return;

			BOX.currentIndex--;

			BOX.current.style.display						= 'none';
			BOX.NewsList[BOX.currentIndex].style.display	= 'block';

			BOX.current	= BOX.NewsList[BOX.currentIndex];

			if( BOX.currentIndex == 0 )
				BOX['arrLeft'].className	+= ' left-inactive';
			else
				BOX['arrLeft'].className	= BOX['arrLeft'].className.replace( /( )?left-inactive/i, '' );

			if( BOX.currentIndex < BOX.NewsList.length - 1 )
				BOX['arrRight'].className	= BOX['arrRight'].className.replace( /( )?right-inactive/i, '' );
		}

		BOX['arrRight'].onclick	= function() {
			if( BOX.currentIndex == BOX.NewsList.length - 1 )
				return;

			BOX.currentIndex++;

			BOX.current.style.display						= 'none';
			BOX.NewsList[BOX.currentIndex].style.display	= 'block';

			BOX.current	= BOX.NewsList[BOX.currentIndex];

			if( BOX.currentIndex == BOX.NewsList.length - 1 )
				BOX['arrRight'].className	+= ' right-inactive';
			else
				BOX['arrRight'].className	= BOX['arrRight'].className.replace( /( )?right-inactive/i, '' );

			if( BOX.currentIndex > 0 )
				BOX['arrLeft'].className	= BOX['arrLeft'].className.replace( /( )?left-inactive/i, '' );
		}
	}

	Dragable.prototype.operateBoxes	= function() {
		var z, i, THIS = this;

		for( z = 0; z < this.draggables.length; z++ ) {
			/* <NewsList> */
				// Set arrows
				if( this.draggables[z].NewsList.length > 1 )
					this.setArrows( this.draggables[z] );

				this.draggables[z]['current']		= this.draggables[z].NewsList[0];
				this.draggables[z]['currentIndex']	= 0;

				for( i = 1; i < this.draggables[z].NewsList.length; i++ )
					this.draggables[z].NewsList[i].style.display	= 'none';
			/* </NewsList> */

			// Disable selection
			this.draggables[z].H2.onselectstart	= function() { return false; }

			// Start dragging!
			this.draggables[z].H2.onmousedown	= function() {
				var DRAGABLE	= THIS.draggables[z];

				return function( e ) {
					if( DRAGABLE.moving ) {
						window.clearTimeout( DRAGABLE.M.timer );
						window.clearTimeout( DRAGABLE.MM.timer );
					}

					// Stupid IE
					if( document.selection && document.selection.empty )
						document.selection.empty();

					var Target	= window.event ? window.event.srcElement : e.target;

					// IF Target is Arrow => return
					if( DRAGABLE['arrLeft'] && ( Target == DRAGABLE['arrLeft'].parentNode || Target.parentNode == DRAGABLE['arrLeft'].parentNode ) )
						return;

					/* <Dummy> */
						if( DRAGABLE.Dummy )
							DRAGABLE.Dummy.style.display	= 'block';
						else
							DRAGABLE.Dummy	= El( 'div', { 'insertBefore' : DRAGABLE.Object, 'class' : 'dummy-box' } );

						DRAGABLE.Dummy.style.marginBottom	= getCSSProperty( DRAGABLE.Object, 'marginBottom' );
						DRAGABLE.Dummy.style.marginTop		= getCSSProperty( DRAGABLE.Object, 'marginTop' );

						DRAGABLE.Dummy.style.width		= ( DRAGABLE.Object.offsetWidth - 2 ) + 'px';
						DRAGABLE.Dummy.style.height		= ( DRAGABLE.Object.offsetHeight - 2 ) + 'px';
					/* </Dummy> */

					/* <MousePosition> */
						var x = getMousePosX( e );
						var y = getMousePosY( e );

						if( getCSSProperty( DRAGABLE.Object, 'position' ) == 'relative' ) {
							var DiversionY	= y - getOffsetTop( DRAGABLE.Object );
							var DiversionX	= x - getOffsetLeft( DRAGABLE.Object );
							if( !DRAGABLE.noPlusDiversion )
								DiversionY += DRAGABLE.Object.offsetHeight +
									new Number( getCSSProperty( DRAGABLE.Object, 'marginBottom' ).replace('px','') );

							DRAGABLE.noPlusDiversion = true;
						}
						else {
							var DiversionX	= x - new Number( getCSSProperty( DRAGABLE.Object, 'left' ).replace('px','') );
							var DiversionY	= y - new Number( getCSSProperty( DRAGABLE.Object, 'top' ).replace('px','') );
						}

						DRAGABLE.Object.style.top		= (y - DiversionY) + 'px';
						DRAGABLE.Object.style.left		= (x - DiversionX) + 'px';

						DRAGABLE.Object.style.position	= 'absolute';
						DRAGABLE.Object.style.zIndex	= '99999999';
					/* </MousePosition> */


					var BoxHeightMarg	= new Number( getCSSProperty(DRAGABLE.Object,'marginBottom').replace('px','') ) + DRAGABLE.Object.offsetHeight;
					var ViewportHeight	= BoxHeightMarg - getViewportHeight();
					var ViewportWidth	= DRAGABLE.Object.offsetWidth - getViewportWidth();
					var TitleHeight		= DRAGABLE.Title.offsetHeight;

					var scrollHeight	= Safari ? document.body.scrollHeight : document.documentElement.scrollHeight;
					var scrollWidth		= Safari ? document.body.scrollWidth : document.documentElement.scrollWidth;
					var razlikaY		= scrollHeight - BoxHeightMarg;

					var Columns			= [ $( 'boxes-left' ), $( 'boxes-center' ), $( 'boxes-right' ) ];

					document.onmousemove	= function( e ) {
						var x		= getMousePosX( e );
						var y		= getMousePosY( e );
						var posX	= x - DiversionX;
						var posY	= y - DiversionY;

						/* <WindowLimits> */
							if( posX + DRAGABLE.Object.offsetWidth > scrollWidth )
								posX	= scrollWidth - DRAGABLE.Object.offsetWidth;
							if( posY + (DRAGABLE.H2.offsetHeight) > scrollHeight + BoxHeightMarg )
								posY	= scrollHeight + BoxHeightMarg - (DRAGABLE.H2.offsetHeight);
							if( posY < -40 ) posY	= 0;
							if( posX < 0 ) posX	= 0;
						/* </WindowLimits> */

						/* <WindowScrolling> */
							if( getDocumentScrollTop() > posY + 40 )
								setDocumentScrollTop( posY + 40 );
							if( getDocumentScrollLeft() > posX )
								setDocumentScrollLeft( posX );

							if( getDocumentScrollTop() < posY + ViewportHeight - (BoxHeightMarg - DRAGABLE.H2.offsetHeight) )
								setDocumentScrollTop( posY + ViewportHeight - (BoxHeightMarg - DRAGABLE.H2.offsetHeight) );
							if( getDocumentScrollLeft() < posX + ViewportWidth )
								setDocumentScrollLeft( posX + ViewportWidth );
						/* </WindowScrolling> */

						/* <DummyPlacement> */
							/* <HORIZONTAL> */
								if( posX <= getOffsetLeft( $('boxes-left') ) + 150 )
									DRAGABLE.overColumn = 1;
								else if( posX <= getOffsetLeft( $('boxes-left') ) + 470 )
									DRAGABLE.overColumn = 2;
								else
									DRAGABLE.overColumn = 3;
							/* </HORIZONTAL> */

							/* <VERTICAL> */
								var flag	= false;
								var list	= {
									'addresses' : {},
									'coords' : []
								};

								for( c = 0; c < THIS.draggables.length; c++ ) {
									if( THIS.draggables[c].column != DRAGABLE.overColumn || THIS.draggables[c] == DRAGABLE )
										continue;

									list.coords.push(
										getOffsetTop( THIS.draggables[c].Object ) +
										THIS.draggables[c].Object.offsetHeight/2
									);
									list.addresses[getOffsetTop( THIS.draggables[c].Object ) +
										THIS.draggables[c].Object.offsetHeight/2] = THIS.draggables[c];

									flag = true;
								}

								list.coords = list.coords.sort(
									function( a, b ) { return a - b; }
								);

								for( c = 0; c < list.coords.length; c++ ) {
									if( c == 0 && list.coords[c] >= posY ) {
										list.addresses[list.coords[c]].Object.parentNode.insertBefore( DRAGABLE.Dummy, list.addresses[list.coords[c]].Object );
										DRAGABLE.column	= DRAGABLE.overColumn;
										continue;
									}
									if( list.coords[c] <= posY ) {
										if( list.addresses[list.coords[c]].Object.nextSibling ) {
											list.addresses[list.coords[c]].Object.parentNode.insertBefore( DRAGABLE.Dummy, list.addresses[list.coords[c]].Object.nextSibling );
										}
										else {
											list.addresses[list.coords[c]].Object.parentNode.appendChild( DRAGABLE.Dummy );
										}
										DRAGABLE.column	= DRAGABLE.overColumn;
									}
								}

								if( !flag && DRAGABLE.overColumn != DRAGABLE.column ) {
									Columns[DRAGABLE.overColumn-1].appendChild( DRAGABLE.Dummy );
									DRAGABLE.column	= DRAGABLE.overColumn;
								}

							/* </VERTICAL> */
						/* </DummyPlacement> */

						DRAGABLE.Object.style.top		= posY + 'px';
						DRAGABLE.Object.style.left		= posX + 'px';
					}

					/* <Drop> */
						//if( document.onmouseup )
						//	document.onmouseup();

						document.onmouseup	= function() {
							var fromX	= new Number( getCSSProperty(DRAGABLE.Object,'left').replace('px','') );
							var fromY	= new Number( getCSSProperty(DRAGABLE.Object,'top').replace('px','') );
							var toX		= getOffsetLeft( DRAGABLE.Dummy );
							var toY		= getOffsetTop( DRAGABLE.Dummy );

							DRAGABLE.M	= new MotionTween( DRAGABLE.Object, fromY, toY, .6 );
							DRAGABLE.MM	= new MotionTween( DRAGABLE.Object, fromX, toX, .7 );

							DRAGABLE.M.onStateChange	= function() {
								var t = new Date().getTime() - this.startTime;
								var d = this.duration*1000;
								var c = this.path;
								var b = this.from;
								var step	= ( c*((t=t/d-1)*t*t*t*t + 1) + b );

								this.obj.style.top	= step + 'px';

								if( step < getDocumentScrollTop() )
									setDocumentScrollTop( step );
								if( getDocumentScrollTop() < step + ViewportHeight )
									setDocumentScrollTop( step + ViewportHeight );

								this.nextFrame();
							}

							DRAGABLE.MM.onStateChange	= function() {
								var t = new Date().getTime() - this.startTime;
								var d = this.duration*1000;
								var c = this.path;
								var b = this.from;

								this.obj.style.left	= ( c*((t=t/d-1)*t*t*t*t + 1) + b ) + 'px';

								this.nextFrame();
							}

							var xx	= false, yy = false;
							DRAGABLE.moving = true;
							var d = DRAGABLE.Dummy;

							DRAGABLE.Object.style.zIndex	= '998';

							DRAGABLE.M.onMotionFinished	= function() {
								xx = true;
								if( yy == true && DRAGABLE.moving ) {
									DRAGABLE.Dummy.parentNode.insertBefore( DRAGABLE.Object, DRAGABLE.Dummy );
									DRAGABLE.Object.style.zIndex	= '1';
									DRAGABLE.Object.style.position	= 'relative';
									DRAGABLE.Object.style.top		= '0px';
									DRAGABLE.Object.style.left		= '0px';
									DRAGABLE.Dummy.style.display	= 'none';
									DRAGABLE.moving	= false;
								}
							}

							DRAGABLE.MM.onMotionFinished	= function() {
								yy = true;
								if( xx == true && DRAGABLE.moving ) {
									DRAGABLE.Dummy.parentNode.insertBefore( DRAGABLE.Object, DRAGABLE.Dummy );
									DRAGABLE.Object.style.zIndex	= '1';
									DRAGABLE.Object.style.position	= 'relative';
									DRAGABLE.Object.style.top		= '0px';
									DRAGABLE.Object.style.left		= '0px';
									DRAGABLE.Dummy.style.display	= 'none';
									DRAGABLE.moving	= false;
								}
							}

							DRAGABLE.M.start();
							DRAGABLE.MM.start();

							document.onmousemove	= null;
							document.onmouseup		= null;
						}
					/* </Drop> */

					return false;
				}
			}();
		}
	}













