/**
*	Animation objects for selects, scrollers, accordion, filterClot and popupMenu
	@author		Pavel Pirogov @ ADT OU @ Wisercat OU
	@date		2011-07-13
*	@require	xna.js
*/

/**
*	selectScroll animation object and event handlers
*/

// set default rowHeight
var defaultRowHeight = 21;

var mousedown = false;
var activeScroller ={};

function loadSelects(){
	
	var elements = document.getElementsByClassName('scrollableList');
	var clearSelectionFn = function() {
		var items = this.getElementsByClassName('listItem');
		for(j in items) {
			if(items[j].className) {
				// remove selection
				items[j].getElementsByClassName('itemTitle')[0].className = items[j].getElementsByClassName('itemTitle')[0].className.replace('active', '');
			}
		}
	};
	for(i in elements) {
		if(elements[i].className) {
			addGetElementsByClassNameForIE(elements[i]);
			elements[i].clearSelection = clearSelectionFn;
			selectedValue=elements[i].getElementsByClassName('selectedValue')[0].value;
			
			// add scrollers
			addScroller(elements[i]);
			
			// add select events
			var onclickFn = function() {
				this.parent.clearSelection();
				// mark selected
				this.getElementsByClassName('itemTitle')[0].className = this.getElementsByClassName('itemTitle')[0].className + ' active';
				//store the value
				this.parent.getElementsByClassName('selectedValue')[0].value = this.getElementsByClassName('itemValue')[0].innerHTML.trim();
				UpdateList();
			};
			
			// process list items
			var items = elements[i].getElementsByClassName('listItem');
			for(j in items) {
				if(items[j].className) {
					addGetElementsByClassNameForIE(items[j]);
					items[j].parent = elements[i];
					items[j].onclick = onclickFn;
					
					// mark default selected value if selected
					if(items[j].getElementsByClassName('itemValue')[0].innerHTML.trim() == selectedValue && selectedValue != ''){
						items[j].getElementsByClassName('itemTitle')[0].className = items[j].getElementsByClassName('itemTitle')[0].className + ' active';
					}
				}
			}
			
		}
	}

}

// create xna object for scroller animation
function addScroller(element, rowHeight) {
	if( element.parentNode.scrollHeight < element.scrollHeight-3) {
		var scroller = {
			w: element.parentNode.scrollWidth,
			h: element.parentNode.scrollHeight,
			o: 1,
			d: 'none',
			x: element.parentNode.scrollWidth - 29,
			y: -element.parentNode.scrollHeight,
			mY: 0,
			dY: 0,
			element: element,
			scroller: {},
			scrollerBtn: {},
			scroll: false,
			mouseDown: false,
			startTop: 0,
			scrollHeight: element.scrollHeight,
			scrollTop: 0,
			speed: 1,
			scrollBarHeight: 0, 
			rowHeight: rowHeight? rowHeight : defaultRowHeight,
			draw: function() { // draw scroller
				this.element.parent = this;
				
				this.scrollBarHeight = (this.h -19 * 2 );
				
				//create HTML element
				var wrap = document.createElement('div');
				wrap.style.position = "absolute";
				
				this.scroller = document.createElement('div');
				this.scroller.style.height = this.scrollBarHeight + "px";
				this.scroller.style.top = this.y+"px";
				this.scroller.style.left = this.x+"px";
				this.scroller.className = "scroller";
				
				var scrollerTop = document.createElement('div');
				scrollerTop.className = "scrollerTop";
				scrollerTop.id = this.id+"Top";
				
				var scrollerBottom = document.createElement('div');
				scrollerBottom.className = "scrollerBottom";
				scrollerBottom.id = this.id+"Bottom";
				
				var scrollerCenter = document.createElement('div');
				scrollerCenter.className = "scrollerCenter";
				scrollerCenter.id = this.id+"Center";
				
				var buttonsWrap1 = document.createElement('div');
				buttonsWrap1.style.position = "absolute";
				var buttonsWrap2 = document.createElement('div');
				buttonsWrap2.style.position = "absolute";
				var buttonsWrap3 = document.createElement('div');
				buttonsWrap3.style.position = "absolute";
				
				var up = document.createElement('div');
				up.className = "scrollerUp";
				
				var down = document.createElement('div');
				down.style.top = (this.h -19 * 2 )+"px";
				down.className = "scrollerDown";
				
				this.scrollerBtn = document.createElement('div');
				this.scrollerBtn.className = "scrollerBtn";
				
				var overlayBtn = document.createElement('input');
				overlayBtn.type = "button";
				overlayBtn.id = this.id+"Btn";
				overlayBtn.className = "scrollerBtnOverlay";

				
				// attach events
				up.parent = this;
				up.onmousedown = function() {
					this.parent.scrollTop -= this.parent.rowHeight;
				};
				down.parent = this;
				down.onmousedown = function() {
					this.parent.scrollTop += this.parent.rowHeight;
				};
				
				overlayBtn.parent = this;
				overlayBtn.onmousedown= function(e){ 
					e = e? e : event;
					this.parent.mY = e.pageY? e.pageY: e.clientY;
					this.parent.dY = e.pageY? e.pageY: e.clientY;
					mousedown = true;
					this.parent.mouseDown = true;
					this.parent.startTop = this.parent.element.scrollTop;
					activeScroller = this.parent;
				};
				document.body.onmouseup= function(e){ 
					activeScroller.mouseDown = false;
					mousedown = false;
					activeScroller.startTop = 0;
				};
				document.body.onmousemove= function(e){
					if(mousedown){
						e = e? e : event;
						activeScroller.dY = e.pageY? e.pageY: e.clientY;
					}
				};
				
				var wheelFn = function(event) {
					if (!event) event = window.event;
					/*target = (event.currentTarget) ? event.currentTarget : event.srcElement;
					if(target.className.indexOf('itemTitle') > -1) {
						target = target.parentNode.parentNode;
					}
					if(!target.parent)
						target = target.parentNode;*/
					var target = null;
					if(event.currentTarget) {
						target = event.currentTarget
					} else {
						if(event.srcElement.className.indexOf('listItem') > -1) {
							target = event.srcElement.parentNode;
						}else if(event.srcElement.className.indexOf('itemTitle') > -1) {
							target = event.srcElement.parentNode.parentNode;
						} else {
							//alert (event.srcElement.className);
							return false;
						}
					}
					var direction = event.detail? event.detail : event.wheelDelta/-40;
					if(direction > 0) {
						target.parent.scrollTop += target.parent.rowHeight;
					} else {
						target.parent.scrollTop -= target.parent.rowHeight;
					}
					if (event.stopPropagation) {
						event.stopPropagation();
					} else {
						event.cancelBubble = true;
					}
					if(event.preventDefault) {
						event.preventDefault();
					} else {
						event.returnValue = false;
					}
					return false;
				};
				var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "onmousewheel";
				if (this.element.attachEvent) {
					this.element.attachEvent(mousewheelevt, wheelFn);
				} else if (this.element.addEventListener) {
					this.element.addEventListener(mousewheelevt, wheelFn, false);
					this.element.onmousewheel = wheelFn;
				}
				
				//append element
				this.scrollerBtn.appendChild(scrollerTop);
				this.scrollerBtn.appendChild(scrollerBottom);
				this.scrollerBtn.appendChild(scrollerCenter);
				this.scrollerBtn.appendChild(overlayBtn);
				
				buttonsWrap1.appendChild(up);
				buttonsWrap2.appendChild(down);
				buttonsWrap3.appendChild(this.scrollerBtn);
				
				this.scroller.appendChild(buttonsWrap1);
				this.scroller.appendChild(buttonsWrap2);
				this.scroller.appendChild(buttonsWrap3);
				
				wrap.appendChild(this.scroller);
				this.element.parentNode.appendChild(wrap);
				
				xna.opacityProp = xna.getOpacityProperty();
				xna.setElementOpacity(this.id+"Btn", 0.0);
			},
			redraw: function() { // redraw scroller
				if(this.mouseDown) {
					var delta = (-this.mY + this.dY);
					delta = this.startTop + (delta * this.element.scrollHeight) / this.scrollBarHeight;
					this.element.scrollTop = delta;
				} else {
					
					this.scroller.style.display = this.d;
					if(this.scrollTop != 0) {
						this.element.scrollTop += this.scrollTop;
						this.scrollTop = 0;
					}
				}
				var offset = ( ( this.scrollBarHeight * this.element.scrollTop ) / this.element.scrollHeight );
				this.scrollerBtn.style.top = offset + "px";
				var height = ( ( this.h * this.scrollBarHeight ) / this.element.scrollHeight );
				document.getElementById(this.id+"Btn").style.height = height + "px";
				document.getElementById(this.id+"Top").style.height = height + "px";
				document.getElementById(this.id+"Bottom").style.height = height + "px";
				document.getElementById(this.id+"Center").style.height = height - 4 + "px";
				this.scrollerBtn.style.height = height + "px";
				
			},
			update: function() { // update scroller state
				if(!mousedown) {
					this.mouseDown = false;
				}
				// show/hide scroller, position of scroller
				if( this.element.parentNode.scrollHeight < this.element.scrollHeight-3) { // show scroller if required
					this.d = 'block';
					this.element.style.width = (this.w - 30) +"px";
					this.element.style.paddingRight = 20+"px";
				} else { // and hide if not required
					this.d = 'none';
					this.element.style.width = (this.w -10) +"px";
				}
				
				//change value in object for redraw function - not runs if no changes in object
				if(this.scrollTop != 0 || this.mouseDown) {
					this.scroll = !this.scroll;
				}
			}
		};
		xna.addObject(scroller);
	}
}

addStartupEvent( function() {
	loadSelects();
	document.body.onmouseup = function() {
		mousedown = false;
	};
	
});

/**
*	newsPopup animation object
*/

//default popup block
var defaultPopupBlock = "newsPopup";
var xnaPopup = {};

function openPopup(sender, blockId){
	//alert("openPopup");
	
	sender.blur();
	
	if(!blockId) {
		xnaPopup.opening = false;
		xnaPopup.move = true;
		return false;
	}
	
	if(xnaPopup.opening && blockId!=xnaPopup.blockId) {
		//popup is opened
	} else {
		xnaPopup.opening = !xnaPopup.opening;
	}
	
	//change popup block
	var elements = document.getElementsByClassName('popupBlock');
	for(i in elements) {
		if(elements[i].className) {
			elements[i].style.display='none';
		}
	}
	document.getElementById(blockId).style.display='block';
	xnaPopup.oh=document.getElementById(blockId).scrollHeight;
	
	//mark link as active
	var menuCounter = 0;
	var menuIndex = 0;
	var elements = document.getElementsByClassName('popupLink');
	for(i in elements) {
		if(elements[i].className) {
			if(elements[i].className.indexOf('active') > -1 ) {
				elements[i].className = elements[i].className.replace('active', '');
				elements[i].parentNode.className = elements[i].parentNode.className.replace('active', '');
			}
			if(elements[i] == sender) {
				menuIndex = menuCounter;
			}
			menuCounter++;
		}
	}
	sender.className += ' active';
	sender.parentNode.className += ' active';
	
	//relocate popup block
	if(menuIndex == menuCounter-1) {
		menuIndex--;
		document.getElementById('popupDIV').style.backgroundPosition = "top right";
	} else {
		document.getElementById('popupDIV').style.backgroundPosition = "top left";
	}
	document.getElementById('popupDIV').style.left = (menuIndex * 110) + "px";
	
	xnaPopup.blockId=blockId;
	xnaPopup.move = true; 
	return false;
}

addStartupEvent( function() {
	
	var element = document.getElementById('popupDIV');
	if(element) {
		document.getElementById(defaultPopupBlock).style.display = 'block';
		
		xnaPopup = {
			id: 'popupDIV',
			oh:	document.getElementById(defaultPopupBlock).scrollHeight,
			h: 0,
			o: 0.0,
			opening: true,
			move: true,
			showSpeed: 200, // not m.seconds!
			hideSpeed: 200,
			blockId: defaultPopupBlock, 
			redraw: function() {
				document.getElementById(this.id).style.height = this.h+"px";
				//xna.setElementOpacity(this.id, this.o); --CHANGE
			},
			update: function() {
				if(this.move) {
					//move
					if(this.opening) {
						if(this.h > this.oh) {
							this.h -= this.oh * xna.upsCor / this.hideSpeed * 20 * (this.h/this.oh);
							return false;
						} else {
							this.h += this.oh * xna.upsCor / this.showSpeed * 10;
							this.o += 1 * xna.upsCor / this.showSpeed * 10;
						}
					} else {
						this.h -= this.oh * xna.upsCor / this.hideSpeed * 10;
						this.o -= 1 * xna.upsCor / this.hideSpeed * 10;
					}
					//stop
					if(this.h <= 0 && !this.opening) {
						this.move = false;
						this.h = 0;
						this.o = 0;
					}
					if(this.h >= this.oh && this.opening) {
						this.move = false;
						this.h = this.oh;
						this.o = 1;
					}
				}
			}
		};
		xna.addObject(xnaPopup);
	}
});

/**
*	clot animation for filter area with scrollers
*/

var filterClot = {};

// if need to be opened by default
var filterOpenedByDefault = true;

function clotFilter(element) {
	element.blur();
	filterClot.opening = !filterClot.opening;
	filterClot.move = true;
	ShowHideFilter(filterClot.opening); // TODO
	return false;
}

function hideSecectors() {
	var scrollers = document.getElementsByClassName('scroller');
	for(i in scrollers) {
		if(scrollers[i].className){
			scrollers[i].style.visibility = 'hidden';
		}
	}
}

function showSelectors() {
	var scrollers = document.getElementsByClassName('scroller');
	for(i in scrollers) {
		if(scrollers[i].className){
			scrollers[i].style.visibility = 'visible';
		}
	}
}

addStartupEvent( function() {
	if(document.getElementById("filterClotArea")){
		xna.opacityProp = xna.getOpacityProperty();
		filterClot = {
			id: "filterClotArea",
			oh: document.getElementById("filterClotArea").scrollHeight+0,
			h: filterOpenedByDefault? document.getElementById("filterClotArea").scrollHeight: 0,
			ph: 0,
			o: filterOpenedByDefault? 1: 0,
			po: 0,
			opening: filterOpenedByDefault? true: false,
			move: false,
			speed: 200,
			element: document.getElementById("filterClotArea"),
			draw: function() {
				this.speed = this.oh/this.speed*10;
				this.redraw();
			},
			redraw: function(){
				if(this.h != this.ph) {
					document.getElementById(this.id).style.height = this.h + "px";
					this.ph=this.h;
				}
				if(this.o != this.po) {
					if(navigator.appVersion.indexOf('Safari') == -1) {
						xna.setElementOpacity(this.element, this.o);
					}
					this.po=this.o;
				}
				if(this.move) {
					hideSecectors();
				} else if(this.opening == true) { 
					showSelectors();
				}
				if(this.h == 0 && !this.opening) {
					this.move = false;
				} else if(this.h == this.oh && this.opening) {
					this.move = false;
				}
			},
			update: function() {
				if(this.move) {
					if(this.opening) {
						this.h += this.speed * xna.upsCor;
						this.o += this.speed/200 * xna.upsCor;
						if(this.h >= this.oh){
							this.h = this.oh;
							this.o = 1;
						}
					} else {
						this.h -= this.speed * xna.upsCor;
						this.o -= this.speed/200 * xna.upsCor;
						if(this.h <= 0){
							this.h = 0;
							this.o = 0;
						}
					}
				} else {
					if(this.opening) {
						this.h = this.oh;
						this.o = 1;
						showSelectors();
					} else {
						this.h = 0;
						this.o = 0;
					}
				}
			}
		};
		xna.addObject(filterClot);
	}
});

/**
*	accordion animation object
*/

var accordions = [];
var activeAccordion = {};

function initAccordion() {
	//clear accordions array
	for(i in accordions) {
		xna.removeObject(accordions[i]);
	}
	accordions = [];
	
	//create accordion objects
	var accordion = document.getElementById("accordionDIV");
	if(accordion) {
		addGetElementsByClassNameForIE(accordion);
		var elements = accordion.getElementsByClassName("accordionItem");
		for(i in elements) {
			if(elements[i].className) {
				accordions[accordions.length] = addAccordion(elements[i]);
			}
		}
	}
}

var accordionClickFn = function() {
	if(activeAccordion) {
		activeAccordion.opening = !activeAccordion.opening;
		activeAccordion.move = true;
	}
	var element = this.parent;
	if(activeAccordion != element) {
		activeAccordion = element;
		activeAccordion.opening = !activeAccordion.opening;
		activeAccordion.move = true;
	} else {
		activeAccordion = {};
	}
};

function addAccordion(element){
	var accordion = {
		h: 0,
		oh: 0,
		o: 1,
		move: false,
		opening: false,
		element: element,
		link: {},
		content: {},
		speed: 300,
		draw: function() {
			//attach events and link elements
			addGetElementsByClassNameForIE(element);
			var elements = element.getElementsByClassName("accordionLeft");
			for(i in elements) {
				if(elements[i].className) {
					this.link = elements[i];
					this.link.parent = this;
					this.link.onclick = accordionClickFn;
				}
			}
			elements = element.getElementsByClassName("accordionContentWrap");
			for(i in elements) {
				if(elements[i].className) {
					this.content = elements[i];
				}
			}
			
			this.oh = this.content.scrollHeight;
			if(element.className.indexOf('active') > -1) { // active should be not more than one item
				activeAccordion = this;
				this.o = 1;
				this.h = this.oh;
				this.opening = true;
			}
			
			xna.opacityProp = xna.getOpacityProperty();
			
			this.content.style.height = this.h + "px";
			this.content.style.visibility = "visible";
			this.content.style.position = "static";
		},
		redraw: function() {
			this.content.style.height = this.h + "px";
			if(navigator.appVersion.indexOf('Safari') == -1) {
				xna.setElementOpacity(this.content, this.o);
			}
		},
		update: function() {
			if(this.oh != this.content.scrollHeight) {
				this.oh = this.content.scrollHeight;
				this.move = true;
			}
			if(this.move) {
				if(this.opening) {
					this.h += this.oh / this.speed * 10 * xna.upsCor;
					this.o += 1 / this.speed * 10 * xna.upsCor;
					if(this.h >= this.oh) {
						this.h = this.oh;
						this.o = 1;
						this.move = false;
					}
				} else {
					var dh = this.oh / this.speed * 10 * xna.upsCor;
					this.h -= dh;
					this.o -= 1 / this.speed * 10 * xna.upsCor;
					if(this.h <= 0) {
						this.h = 0;
						this.o = 0;
						this.move = false;
					}
				}
			}
		}
	};
	xna.addObject(accordion);
	
	return accordion;
}

addStartupEvent( function() {
	initAccordion();
});

/**
*	Functions for switch slides next/prev
*/

var imageIndex = 0;
var imagesCount = 0;

function nextImage(sender) {
	sender.blur();
	if(imageIndex < imagesCount-1) {
		hideSlide(imageIndex);
		imageIndex++;
		showSlide(imageIndex);
		if(imageIndex == imagesCount - 1) {
			xna.setElementOpacity(sender, 0.5);
		}
	}
	var parent = sender.parentNode;
	addGetElementsByClassNameForIE(parent);
	var prev = document.getElementsByClassName("prevImg")[0];
	xna.setElementOpacity(prev, 1);
	return false;
}
function prevImage(sender) {
	sender.blur();
	if(imageIndex > 0) {
		hideSlide(imageIndex);
		imageIndex--;
		showSlide(imageIndex);
		if(imageIndex == 0) {
			xna.setElementOpacity(sender, 0.5);
		}
	}
	var parent = sender.parentNode;
	addGetElementsByClassNameForIE(parent);
	var next = document.getElementsByClassName("nextImg")[0];
	xna.setElementOpacity(next, 1);
	return false;
}
function hideSlide(index) {
	var content = document.getElementById("itemDIVWrap");
	var slides = document.getElementsByClassName("dtlImage");
	for(i in slides) {
		if(slides[i].className) {
			if(i == index) {
				slides[i].style.display = 'none';
			} else {
				slides[i].style.display = 'block';
			}
		}
	}
}
function showSlide(index) {
	var content = document.getElementById("itemDIVWrap");
	var slides = document.getElementsByClassName("dtlImage");
	for(i in slides) {
		if(slides[i].className) {
			if(i == index) {
				slides[i].style.display = 'block';
			} else {
				slides[i].style.display = 'none';
			}
		}
	}
}

function loadSlides(){
	imageIndex = 0;
	var content = document.getElementById("itemDIVWrap");
	if(content) {
		addGetElementsByClassNameForIE(content);
		var slides = document.getElementsByClassName("dtlImage");
		if(slides) {
			for(i in slides) {
				if(slides[i].className) {
					if(i == imageIndex) {
						slides[i].style.display = 'block';
					} else {
						slides[i].style.display = 'none';
					}
				}
			}
			xna.opacityProp = xna.getOpacityProperty();
			imagesCount = slides.length;
			var buttons = content.getElementsByTagName('A');
			if(imagesCount < 2) {
				for(i in buttons) {
					if(buttons[i].className) { 
						if(buttons[i].className.indexOf("prevImg") > -1 || buttons[i].className.indexOf("nextImg")> -1) {
							buttons[i].style.display = 'none';
						}
					}
				}
			} else {
				for(i in buttons) {
					if(buttons[i].className) { 
						if(buttons[i].className.indexOf("prevImg") > -1 || buttons[i].className.indexOf("nextImg")> -1) {
							buttons[i].style.display = 'block';
							if(buttons[i].className.indexOf("prevImg") > -1) {
								xna.setElementOpacity(buttons[i], 0.5);
							} else {
								xna.setElementOpacity(buttons[i], 1);
							}
						}
					}
				}
			}
		}
	}
}

addStartupEvent( function() {
	loadSlides();
});