/**
@author Stepan Reznikov (stepan@design.ru)
@version 1.0, 17.08.2007
*/

/*--------------*/
/*  Silhouette  */
/*--------------*/

var Silhouette = {

	init : function(){
		this.oSilhouette = document.getElementById('silhouette');
		this.aImages = Common.Dom.getElementsByClassName(this.oSilhouette, 'image', 'p');
		this.oImageActive = Common.Dom.getElementsByClassName(this.oSilhouette, 'active', 'p')[0];

		this.iSilhouetteWidth = this.oSilhouette.offsetWidth;
		this.iImageActiveWidth = this.oImageActive.offsetWidth;

		this.oSilhouetteWindow = document.getElementById('silhouette_window');
		this.oSliderContent = document.getElementById('slider_content');

		// инициализируем переключалку
		this.oSwitch = document.getElementById('silhouette_switch');
		this.aSwitchItems = Common.Dom.getElementsByClassName(this.oSwitch, 'item', 'div');
		this.oSwitchItemActive = Common.Dom.getElementsByClassName(this.oSwitch, 'active', 'div')[0];

		for (var i = 0, iLength = this.aSwitchItems.length; i < iLength; i++) {
			var me = this;
			(function(oSwitchItem){
				Common.Event.add(me.aSwitchItems[i], 'click', function(evt){ me.changeImage(oSwitchItem); });
				Common.Event.add(me.aSwitchItems[i], 'mouseover', function(evt){ if (oSwitchItem != me.oSwitchItemActive) { Common.Class.add(oSwitchItem, 'hover'); } });
				Common.Event.add(me.aSwitchItems[i], 'mouseout', function(evt){ Common.Class.remove(oSwitchItem, 'hover'); });
			})(me.aSwitchItems[i]);
		}

		var me = this;
		Common.Event.add(window, 'resize', function(){ me.adjustWindow(); });
	},

	changeImage : function(oSwitchItem){
		var aClassNames = oSwitchItem.className.match(new RegExp('for_(\\w+)'));
		Common.Class.replace(this.oSilhouette, 'show_\\w+', 'show_' + aClassNames[1]);
		Common.Class.replace(this.oSliderContent, 'show_\\w+', 'show_' + aClassNames[1]);

		Common.Class.remove(this.oSwitchItemActive, 'active');
		Common.Class.remove(oSwitchItem, 'hover');
		Common.Class.add(oSwitchItem, 'active');
		this.oSwitchItemActive = oSwitchItem;

		var oImage = Common.Dom.getElementsByClassName(this.oSilhouette, aClassNames[1], 'p')[0];
		Common.Class.remove(this.oImageActive, 'active');
		Common.Class.add(oImage, 'active');
		this.oImageActive = oImage;
		this.iImageActiveWidth = this.oImageActive.offsetWidth;

		this.moveImageTo(0);
		Slider.moveHeadTo(0);
		Slider.setHeadWidth(this.getWindowPercent());
		Slider.changeImage(aClassNames[1]);
	},

	moveImageTo : function(iPos){
		this.oSilhouetteWindow.style.left = -iPos * (this.iImageActiveWidth - this.iSilhouetteWidth);
	},

	adjustWindow : function(){
		this.iSilhouetteWidth = this.oSilhouette.offsetWidth;
		Slider.setHeadWidth(this.getWindowPercent());
		Slider.recalcSliderPos();
		Slider.redrawSlider();
	},

	getWindowPercent : function(){
		return (this.iSilhouetteWidth / this.iImageActiveWidth) * (this.getRatio() / 100);
	},

	getRatio : function(){
		var aClassNames = this.oImageActive.className.match(new RegExp('ratio_(\\w+)'));
		return aClassNames[1];
	}
}



/*----------*/
/*  Slider  */
/*----------*/

var Slider = {

	init : function(){
		this.bDrag = false;
		this.oPtr = document.getElementById('slider');
		this.oHead = Common.Dom.getElementsByClassName(this.oPtr, 'head', 'div')[0];
		this.oArrowLeft = Common.Dom.getElementsByClassName(this.oHead, 'arrow_left', 'div')[0];
		this.oArrowRight = Common.Dom.getElementsByClassName(this.oHead, 'arrow_right', 'div')[0];

		this.oSliderPos = null;
		this.recalcSliderPos();

		this.setHeadWidth(Silhouette.getWindowPercent());
		Common.Class.add(this.oHead, 'position_min');

		this.iEventPos = 0;
		this.iHeadPos = 0;
		this.iHeadDragPos = 0;

		var me = this;
		Common.Event.add(this.oPtr, 'mousedown', function(evt){ me.placeSlider(evt); });
		Common.Event.add(this.oArrowLeft, 'mousedown', function(evt){ me.placeSlider(evt); });
		Common.Event.add(this.oArrowRight, 'mousedown', function(evt){ me.placeSlider(evt); });
		Common.Event.add(this.oHead, 'mousedown', function(evt){ me.startDrag(evt); });
		Common.Event.add(document, 'mousemove', function(evt){ me.doDrag(evt); });
		Common.Event.add(document, 'mouseup', function(evt){ me.stopDrag(evt); });
	},

	changeImage : function(sClassName){
		Common.Class.replace(this.oPtr, 'slider_show_\\w+', 'slider_show_' + sClassName);
	},

	moveHeadTo : function(iPos){
		if (this.iHeadPos == 0 && iPos > 0) {
			Common.Class.remove(this.oHead, 'position_min');
		}
		else if (this.iHeadPos == this.iSliderWorkWidth && iPos < 1) {
			Common.Class.remove(this.oHead, 'position_max');
		}

		this.oHead.style.left = this.iHeadPos =  iPos * this.iSliderWorkWidth;
		this.oHead.style.backgroundPosition = '-' + iPos * this.iSliderWorkWidth + ' 0';

		if (iPos == 0) {
			Common.Class.add(this.oHead, 'position_min');
		}
		else if (iPos == 1) {
			Common.Class.add(this.oHead, 'position_max');
		}
	},

	setHeadWidth : function(iWidth){
		if (iWidth < 1) {
			this.oHead.style.width = iWidth * this.oPtr.offsetWidth;
		}
		else {
			this.oHead.style.width = this.oPtr.offsetWidth;
		}
		this.iSliderWorkWidth = this.getWorkWidth();
	},

	recalcSliderPos : function(){
		this.oSliderPos = Common.Dom.getAbsoluteCoords(this.oPtr);
	},

	placeSlider : function(evt){
		if (evt = Common.Event.normalize(evt)) {
			var iDir = (evt.clientX - this.oSliderPos.iLeft) > this.iHeadPos ? 1 : -1;
			var iPos = Math.min(1, Math.max(0, (this.iHeadPos + (iDir * this.oHead.offsetWidth)) / this.iSliderWorkWidth));
			this.moveHeadTo(iPos);
			Silhouette.moveImageTo(iPos);
		}
		Common.Event.cancel(evt);
	},

	redrawSlider : function(){
		var iPos = Math.min(1, Math.max(0, this.iHeadPos / this.iSliderWorkWidth));
		this.moveHeadTo(iPos);
		Silhouette.moveImageTo(iPos);
	},

	startDrag : function(evt){
		if (evt = Common.Event.normalize(evt)) {
			this.bDrag = true;
			this.iEventPos = evt.clientX;
			this.iHeadDragPos = this.iHeadPos;
			this.doDrag(evt);
		}
		Common.Event.cancel(evt);
	},

	doDrag : function(evt){
		if (this.bDrag && (evt = Common.Event.normalize(evt))) {
			var iDx = evt.clientX - this.iEventPos;
			var iPos = Math.min(1, Math.max(0, (this.iHeadDragPos + iDx) / this.iSliderWorkWidth));
			this.moveHeadTo(iPos);
			Silhouette.moveImageTo(iPos);
		}
	},

	stopDrag : function(evt){
		this.bDrag = false;
	},

	getWorkWidth : function(){
		return (this.oPtr.offsetWidth - this.oHead.offsetWidth);
	}
}

document.ondragstart=document.ondrag=document.onselectstart=function(){return !Slider.bDrag;};



$(function(){
	Silhouette.init();
	Slider.init();
});