/**
 * @author Vlad Yakovlev (red.scorpix@gmail.com)
 * @link www.scorpix.ru
 * @requires jQuery
 * @requires jCommon
 * @version 0.1.1
 * @date 2010-02-24
 */

function mainPicture(rootEl) {
	rootEl = $q(rootEl).first();

	var
		mainEl = rootEl.find('.main'),
		imgEl = mainEl.find('.picture img'),

		lastX = 0,
		lastY = 0,

		originalWidth = imgEl.width(),
		isBig = false;

	$q(window).resize(function() {
		update();
	});
	update();

	$c.draggable(imgEl).bind(startDnd, dnd);

	function startDnd() {
		lastX = 0;
		lastY = 0;

		return false;
	}

	function dnd(evt, poses) {
		update(poses.moveX - lastX, poses.moveY - lastY);
		lastX = poses.moveX;
		lastY = poses.moveY;
	}

	function update(left, top) {
		if (undefined === left) {
			left = 0;
			top = 0;
		}

		var
			rootWidth = rootEl.width(),
			rootHeight = rootEl.height(),
			imgWidth = imgEl.width(),
			imgHeight = imgEl.height(),
			curLeft = parseInt(mainEl.css('left')) + left,
			curTop = parseInt(mainEl.css('top')) + top;

		if (rootWidth > originalWidth && isBig === false) {
			imgEl.removeAttr('width').removeAttr('height').css('width','100%');
			curLeft = 0;
			isBig = true;
		}
		else if (rootWidth < originalWidth && isBig) {
			imgEl.removeAttr('style');
			isBig = false;
		}

		if (curLeft < rootWidth - imgWidth) {
			curLeft = rootWidth - imgWidth;
		}
		if (0 < curLeft || isBig) {
			curLeft = 0;
		}
		if (curTop < rootHeight - imgHeight) {
			curTop = rootHeight - imgHeight;
		}
		if (0 < curTop) {
			curTop = 0;
		}

		mainEl.css({
			left: curLeft,
			top: curTop
		});
	}
}

function line(rootEl) {
	rootEl = $q(rootEl).first();

	var coords = rootEl.text().split(',');
	rootEl.text('');

	if (coords) {
		var
			width = Math.abs(coords[0] - coords[4]),
			height = Math.abs(coords[1] - coords[5]);

		if ($c.support.svg) {
			createSvg(coords, width, height);
			rootEl.css('display', 'block');
		} else if ($c.support.vml) {
			createVml(coords, width, height);
			rootEl.css('display', 'block');
		}
	}

	function createSvg(coords, width, height) {

		rootEl.css({
			width: width,
			height: height
		});

		var svgEl = $c.svg('svg')
			.svgAttr({
				viewBox: [0, 0, width, height].join(' ')
			})
			.svgCss({
				width: width,
				height: height
			})
			.appendTo(rootEl);
		var pathEl = $c.svg('path')
			.svgAttr({
				d: 'M ' + coords[0] + ',' + coords[1] + ' S ' + coords[2] + ',' + coords[3] + ' ' + coords[4] + ',' + coords[5],
				stroke: '#fff',
				strokeWidth: 1,
				fill: 'none',
				opacity: 0.5
			})
			.appendTo(svgEl);
	}

	function createVml(coords, width, height) {
		var vmlEl = $q(document.createElement('v:shape')).attr({
			coordsize: width + ' ' + height,
			path: 'm ' + coords[0] + ',' + coords[1] + ' c ' + coords[2] + ',' + coords[3] + ' ' + coords[4] + ',' + coords[5] + ' ' + coords[4] + ',' + coords[5],
			filled: 'false'
		}).css({
			width: width,
			height: height
		}).appendTo(rootEl);
		$q(document.createElement('v:stroke')).attr({
			opacity: 0.5,
			color: '#fff'
		}).appendTo(vmlEl);
	}
};

$q(function() {

	mainPicture('.main_content');

	$q('.main_content .notice .line').each(function() {
		line(this);
	});
});