// =============================================================
// ============== price / performance / mobility ===============
// =============================================================

// 0. Helpers

		function normalizeMouseEvent( e )
		{
			// Координаты
			if( e.pageX || e.pageY ) {
				;
			}
			else if( e.clientX || e.clientY ) {
				e.pageX = e.clientX + document.body.scrollLeft
					+ document.documentElement.scrollLeft;
				e.pageY = e.clientY + document.body.scrollTop
					+ document.documentElement.scrollTop;
				;
			}
			// Источник
			if( e.target ) {
				;
			}
			else if( e.srcElement ) {
				e.target = e.srcElement;
			}
			// Получатель
			if( e.relatedTarget ) {
				;
			}
			else if( e.toElement ) {
				e.relatedTarget = e.toElement;
			}
		}
		function isTargetInBox( elem_target, elem_box )
		{
			while( elem_target )
			{
				if( elem_target == elem_box ) {
					return true;
				}
				elem_target = elem_target.parentNode;
			}
			return false;
		}

// 1. Mobility slider

		function startSliderMove( e )
		{
			if( !e ) e = window.event;
			
			var elem = this;
			this.pageX = elem.offsetLeft;
			this.pageY = elem.offsetTop;
			while( elem.offsetParent ) {
				elem = elem.offsetParent;
				this.pageX += elem.offsetLeft;
				this.pageY += elem.offsetTop;
			}
			
			document.mouse_holder = this;
			document.onmouseup = stopSliderMove;
			document.onmousemove = doSliderMove;
			document.onmousemove( e );
			
			return false;
		}
		function stopSliderMove( e )
		{
			if( !e ) e = window.event;
			
			this.onmousemove = null;
			this.onmouseup = null;
			
			return false;
		}
		function doSliderMove( e )
		{
			if( !e ) e = window.event;

			normalizeMouseEvent( e );
			
			var me = this.mouse_holder;
			
			var slider = me.firstChild;
			var workingWidth = me.offsetWidth - slider.offsetWidth;
			var offset = Math.min( Math.max( e.pageX - me.pageX - slider.offsetWidth * 0.5, 0 ) , workingWidth );
			slider.style.marginLeft = offset + 'px';
			me.mobility = offset / workingWidth * 100.0;
			
			for( var i = 0; i < me.receptors.length; i++ )
				if( me.receptors[i].onsliderchange )
					me.receptors[i].onsliderchange( me.mobility );
			
			return false;
		}
		function mouseOutSlider( e )
		{
			if( !e ) e = window.event;
			
			normalizeMouseEvent( e );
			
			if( !isTargetInBox( e.relatedTarget, this ) ) {
				this.onmousemove = null;
			}
			return true;
		}
		function makeSlider( slider_id )
		{
			if( !slider_id )
			{
				alert( 'You must specify id for slider!' );
				return null;
			}
			var div = document.createElement( 'DIV' );
			var img = document.createElement( 'IMG' );
			img.setAttribute( 'src', '/pic/slider_itself.gif' );
			img.setAttribute( 'title', 'Можно потаскать мышью' );
			div.mobility = 0.0;
			img.style.marginLeft = div.mobility + '%';
			div.appendChild( img );
			div.className = 'slider';
			div.id = slider_id;
			div.onmousedown = startSliderMove;
//			div.onmouseup = stopSliderMove;
//			div.onmouseout = mouseOutSlider;
			div.receptors = [];

			return div;
		}
		
// 2. Performance / Price graph

		function makePoint( html, price, performance, mobility, slider )
		{
			var point_div = document.createElement( 'DIV' );
			var img = document.createElement( 'IMG' );
			img.setAttribute( 'src', '/pic/note_pt.gif' );
			
			point_div.className = 'point';
			point_div.innerHTML = html;
			point_div.mobility = mobility;
			point_div.style.left = price + '%';
			point_div.style.bottom = performance + '%';
			point_div.opacity = 1.0;
			point_div.onsliderchange = updatePoint;
			point_div.onsliderchange( slider.mobility );
//			point_div.onclick = showDashesOnClick;
			point_div.onmouseover = showDashesOnMouseOver;
			point_div.onmouseout = hideDashesOnMouseOver;
			slider.receptors.push( point_div );
			point_div.appendChild( img );
			
			return point_div;
		}
		function updatePoint( mobility )
		{
			var opac = 0.03 * ( this.mobility - mobility ) + 1.0;
			if( opac < 0.0 ) { 
				opac = 0.0;
				this.style.visibility = 'hidden';
				var div = this.parentNode;
				if( div.current && div.current === this ) {
					div.current.x_dash.style.visibility = 'hidden';
					div.current.y_dash.style.visibility = 'hidden';
					div.current.x_mark.style.visibility = 'hidden';
					div.current.y_mark.style.visibility = 'hidden';
					div.current = null;
				}
			}
			else if( opac > 1.0 ) {
				opac = 1.0;
			}
			if( Math.abs( this.opacity - opac ) > 0.001 ) {
				this.style.visibility = 'visible';
				this.opacity = opac;
				this.style.opacity = opac;
				this.style.filter = 'alpha(opacity=' + ( opac * 100.0 ) + ')';
			}
		}
		function makeXDash( price, performance )
		{
			var x_dash = document.createElement( 'DIV' );
			
			x_dash.style.width = price + '%';
			x_dash.style.height = ( performance + 7 ) + '%';
			x_dash.className = 'x_dash';
			
			return x_dash;
		}
		function makeYDash( price, performance )
		{
			var y_dash = document.createElement( 'DIV' );
			
			y_dash.style.width = ( price + 7 ) + '%';
			y_dash.style.height = performance + '%';
			y_dash.className = 'y_dash';
			
			return y_dash;
		}
		function makeXMark( price, label_html )
		{
			var x_mark = document.createElement( 'DIV' );
			
			var mark = document.createElement( 'DIV' );
			mark.className = 'mark';
			x_mark.appendChild( mark );

			if( label_html ) {			
				var label = document.createElement( 'DIV' );
				label.innerHTML = label_html;
				label.className = 'label';
				x_mark.appendChild( label );
			}
			
			x_mark.style.left = price + '%';
			x_mark.className = 'x_mark';
			
			return x_mark;
		}
		function makeYMark( performance, label_html )
		{
			var y_mark = document.createElement( 'DIV' );
			
			var mark = document.createElement( 'DIV' );
			mark.className = 'mark';
			y_mark.appendChild( mark );

			if( label_html ) {
				var label = document.createElement( 'DIV' );
				label.innerHTML = label_html;
				label.className = 'label';
				y_mark.appendChild( label );
			}
			
			y_mark.style.bottom = performance + '%';
			y_mark.className = 'y_mark';
			
			return y_mark;
		}
// Здесь мы полагаемся на глобальную переменную graph, которая содержит числовые значения
// параметров в формате:
//		var graph = [
//			{ html: 'Тут будет ноут заложон (250)', price: 100.0 / 5.0, performance: 300.0 / 5.0, mobility: 250.0 / 5.0 },
//			{ html: 'Тут будет ноут заложон (150)', price:  70.0 / 5.0, performance: 100.0 / 5.0, mobility: 150.0 / 5.0 },
//			{ html: 'Тут будет ноут заложон (450)', price: 120.0 / 5.0, performance: 200.0 / 5.0, mobility: 450.0 / 5.0 },
//			{ html: 'Тут будет ноут заложон (100)', price: 230.0 / 5.0, performance: 400.0 / 5.0, mobility: 100.0 / 5.0 },
//			{ html: 'Тут будет ноут заложон (300)', price: 250.0 / 5.0, performance: 350.0 / 5.0, mobility: 300.0 / 5.0 },
//			{ html: 'Тут будет ноут заложон (360)', price: 360.0 / 5.0, performance: 240.0 / 5.0, mobility: 360.0 / 5.0 },
//			{ html: 'Тут будет ноут заложон (270)', price: 470.0 / 5.0, performance: 250.0 / 5.0, mobility: 270.0 / 5.0 }
//		];
		function makeGraph( slider_id, x_axis_id, y_axis_id )
		{
			if( !slider_id ) {
				alert( 'You must specify slider id!' );
				return null;
			}
			if( !x_axis_id ) {
				alert( 'You must specify x axis id!' );
				return null;
			}
			if( !y_axis_id ) {
				alert( 'You must specify y axis id!' );
				return null;
			}
			var slider = document.getElementById( slider_id );
			var x_axis = document.getElementById( x_axis_id );
			var y_axis = document.getElementById( y_axis_id );
			
			var div = document.createElement( 'DIV' );
			for( var i = 0; i < graph.length; i++ ) {
				var point_div = makePoint( graph[i].html, graph[i].price, graph[i].performance, graph[i].mobility, slider );
				div.appendChild( point_div );
				
				var x_dash = makeXDash( graph[i].price, graph[i].performance );
				div.appendChild( x_dash );
				point_div.x_dash = x_dash;

				var x_mark = makeXMark( graph[i].price, graph[i].x_label );
				div.appendChild( x_mark );
				point_div.x_mark = x_mark;

				var y_dash = makeYDash( graph[i].price, graph[i].performance );
				div.appendChild( y_dash );
				point_div.y_dash = y_dash;

				var y_mark = makeYMark( graph[i].performance, graph[i].y_label );
				div.appendChild( y_mark );
				point_div.y_mark = y_mark;
			}
			div.className = 'graph';
			div.current = null;

			var left_blind = document.createElement( 'DIV' );
			left_blind.className = 'left_blind';
			div.appendChild( left_blind );
			x_axis.left_blind = left_blind;
			x_axis.leftness = 0.0;

			var right_blind = document.createElement( 'DIV' );
			right_blind.className = 'right_blind';
			div.appendChild( right_blind );
			x_axis.right_blind = right_blind;
			x_axis.rightness = 0.0;
			
			var top_blind = document.createElement( 'DIV' );
			top_blind.className = 'top_blind';
			div.appendChild( top_blind );
			y_axis.top_blind = top_blind;
			y_axis.topness = 0.0;

			var bottom_blind = document.createElement( 'DIV' );
			bottom_blind.className = 'bottom_blind';
			div.appendChild( bottom_blind );
			y_axis.bottom_blind = bottom_blind;
			y_axis.bottomness = 0.0;
			
			return div;
		}
		function showDashesOnClick( e )
		{
			if( !e ) e = window.event;
			
			var div = this.parentNode;
			if( div.current ) {
				div.current.x_dash.style.visibility = 'hidden';
				div.current.y_dash.style.visibility = 'hidden';
				div.current.x_mark.style.visibility = 'hidden';
				div.current.y_mark.style.visibility = 'hidden';
			}
			if( (!div.current || div.current !== this) && this.opacity > 0.0 ) {
				this.x_dash.style.visibility = 'visible';
				this.y_dash.style.visibility = 'visible';
				this.x_mark.style.visibility = 'visible';
				this.y_mark.style.visibility = 'visible';
				div.current = this;
			}
			else {
				div.current = null;
			}
		}
		function showDashesOnMouseOver( e )
		{
			if( !e ) e = window.event;
			
			this.x_dash.style.visibility = 'visible';
			this.y_dash.style.visibility = 'visible';
			this.x_mark.style.visibility = 'visible';
			this.y_mark.style.visibility = 'visible';
			this.style.zIndex = 3;
		}
		function hideDashesOnMouseOver( e )
		{
			if( !e ) e = window.event;
			
			normalizeMouseEvent( e );
			
			if( !isTargetInBox( e.relatedTarget, this ) ) {
				this.x_dash.style.visibility = 'hidden';
				this.y_dash.style.visibility = 'hidden';
				this.x_mark.style.visibility = 'hidden';
				this.y_mark.style.visibility = 'hidden';
				this.style.zIndex = 2;
			}
		}
		function makeXAxis( axis_id )
		{
			if( !axis_id )
			{
				alert( 'You must specify id for x axis!' );
				return null;
			}
			
			var div = document.createElement( 'DIV' );
			var img = document.createElement( 'IMG' );
			img.setAttribute( 'src', '/pic/horisontal_axis_arrow.gif' );
			
			img.className = 'arrow';
			div.appendChild( img );
			div.className = 'x_axis';
			div.id = axis_id;

			appendHBlind( div );
			
			return div;
		}
		function makeYAxis( axis_id )
		{
			if( !axis_id )
			{
				alert( 'You must specify id for y axis!' );
				return null;
			}
			
			var div = document.createElement( 'DIV' );
			var img = document.createElement( 'IMG' );
			img.setAttribute( 'src', '/pic/vertical_axis_arrow.gif' );
			
			img.className = 'arrow';
			div.appendChild( img );
			div.className = 'y_axis';
			div.id = axis_id;
			
			appendVBlind( div );
			
			return div;
		}
		function startVBlindMove( e )
		{
			if( !e ) e = window.event;
			
			var elem = this;
			this.pageX = elem.offsetLeft;
			this.pageY = elem.offsetTop;
			while( elem.offsetParent ) {
				elem = elem.offsetParent;
				this.pageX += elem.offsetLeft;
				this.pageY += elem.offsetTop;
			}
			
			document.mouse_holder = this;
			document.onmouseup = stopVBlindMove;
			document.onmousemove = doVBlindMove;
			document.onmousemove( e );
			
			return false;
		}
		function stopVBlindMove( e )
		{
			if( !e ) e = window.event;
			
			this.onmousemove = null;
			this.onmouseup = null;
			
			return false;
		}
		function doVBlindMove( e )
		{
			if( !e ) e = window.event;

			normalizeMouseEvent( e );
			
			var me = this.mouse_holder;
			
			var top_slider = me.childNodes[1];
			var bottom_slider = me.childNodes[2];

			var workingHeight = me.offsetHeight - top_slider.offsetHeight;
			var t_offset = Math.min( Math.max( e.pageY - me.pageY - top_slider.offsetHeight * 0.5, 0 ) , workingHeight );
			var b_offset = workingHeight - t_offset;
			
			var topness = me.topness * workingHeight / 100.0;
			var bottomness = me.bottomness * workingHeight / 100.0;
			
			if( ( t_offset - topness ) < ( b_offset - bottomness ) ) {
				if( t_offset > 1.0 ) {
					me.top_blind.style.visibility = 'visible';
					me.top_blind.style.height = t_offset + 'px';
				}
				else {
					me.top_blind.style.visibility = 'hidden';
				}
				top_slider.style.top = t_offset + 'px';
				me.topness = t_offset / workingHeight * 100.0;
			}
			else {
				if( b_offset > 1.0 ) {
					me.bottom_blind.style.height = b_offset + 'px';
					me.bottom_blind.style.visibility = 'visible';
				}
				else {
					me.bottom_blind.style.visibility = 'hidden';
				}
				bottom_slider.style.bottom = b_offset + 'px';
				me.bottomness = b_offset / workingHeight * 100.0;
			}

			return false;
		}
		function mouseOutVBlind( e )
		{
			if( !e ) e = window.event;
			
			normalizeMouseEvent( e );
			
			if( !isTargetInBox( e.relatedTarget, this ) ) {
				this.onmousemove = null;
			}
			return true;
		}
		function appendVBlind( axis )
		{
			var top_blind_slider = document.createElement( 'IMG' );
			top_blind_slider.setAttribute( 'src', '/pic/blind_pt.gif' );
			top_blind_slider.className = 'top_blind_slider';
			axis.appendChild( top_blind_slider );

			var bottom_blind_slider = document.createElement( 'IMG' );
			bottom_blind_slider.setAttribute( 'src', '/pic/blind_pt.gif' );
			bottom_blind_slider.className = 'bottom_blind_slider';
			axis.appendChild( bottom_blind_slider );
			
			axis.onmousedown = startVBlindMove;
//			axis.onmouseup = stopVBlindMove;
//			axis.onmouseout = mouseOutVBlind;
		}
		function startHBlindMove( e )
		{
			if( !e ) e = window.event;
			
			var elem = this;
			this.pageX = elem.offsetLeft;
			this.pageY = elem.offsetTop;
			while( elem.offsetParent ) {
				elem = elem.offsetParent;
				this.pageX += elem.offsetLeft;
				this.pageY += elem.offsetTop;
			}
			
			document.mouse_holder = this;
			document.onmouseup = stopHBlindMove;
			document.onmousemove = doHBlindMove;
			document.onmousemove( e );
			
			return false;
		}
		function stopHBlindMove( e )
		{
			if( !e ) e = window.event;
			
			this.onmouseup = null;
			this.onmousemove = null;
			
			return false;
		}
		function doHBlindMove( e )
		{
			if( !e ) e = window.event;

			normalizeMouseEvent( e );
			
			var me = this.mouse_holder;
			
			var left_slider = me.childNodes[1];
			var right_slider = me.childNodes[2];

			var workingWidth = me.offsetWidth - left_slider.offsetWidth;
			var l_offset = Math.min( Math.max( e.pageX - me.pageX - left_slider.offsetWidth * 0.5, 0 ) , workingWidth );
			var r_offset = workingWidth - l_offset;
			
			var leftness = me.leftness * workingWidth / 100.0;
			var rightness = me.rightness * workingWidth / 100.0;
			
			if( ( l_offset - leftness ) < ( r_offset - rightness ) ) {
				if( l_offset > 1.0 ) {
					me.left_blind.style.visibility = 'visible';
					me.left_blind.style.width = l_offset + 'px';
				}
				else {
					me.left_blind.style.visibility = 'hidden';
				}
				left_slider.style.left = l_offset + 'px';
				me.leftness = l_offset / workingWidth * 100.0;
			}
			else {
				if( r_offset > 1.0 ) {
					me.right_blind.style.width = r_offset + 'px';
					me.right_blind.style.visibility = 'visible';
				}
				else {
					me.right_blind.style.visibility = 'hidden';
				}
				right_slider.style.right = r_offset + 'px';
				me.rightness = r_offset / workingWidth * 100.0;
			}

			return false;
		}
		function mouseOutHBlind( e )
		{
			if( !e ) e = window.event;
			
			normalizeMouseEvent( e );
			
			if( !isTargetInBox( e.relatedTarget, this ) ) {
				this.onmousemove = null;
			}
			return true;
		}
		function appendHBlind( axis )
		{
			var left_blind_slider = document.createElement( 'IMG' );
			left_blind_slider.setAttribute( 'src', '/pic/blind_pt.gif' );
			left_blind_slider.className = 'left_blind_slider';
			axis.appendChild( left_blind_slider );

			var right_blind_slider = document.createElement( 'IMG' );
			right_blind_slider.setAttribute( 'src', '/pic/blind_pt.gif' );
			right_blind_slider.className = 'right_blind_slider';
			axis.appendChild( right_blind_slider );
			
			axis.onmousedown = startHBlindMove;
//			axis.onmouseup = stopHBlindMove;
//			axis.onmouseout = mouseOutHBlind;
		}
// 3. Constructor
		function products_graph_init()
		{
			var slider_container = document.getElementById( 'slider_container' );
			if( slider_container ) {
				slider_container.appendChild( makeSlider( 'der_slider' ) );
			}
			var x_axis_container = document.getElementById( 'x_axis_container' );
			if( x_axis_container ) {
				x_axis_container.appendChild( makeXAxis( 'der_x_axis' ) );
			}
			var y_axis_container = document.getElementById( 'y_axis_container' );
			if( y_axis_container ) {
				y_axis_container.appendChild( makeYAxis( 'der_y_axis' ) );
			}
			var graph_container = document.getElementById( 'graph_container' );
			if( graph_container ) {
				graph_container.appendChild( makeGraph( 'der_slider', 'der_x_axis', 'der_y_axis' ) );
			}
		}