document.observe('dom:loaded', function(){ 
	SlideDown.init()
	FooterTables.init()
	PopUp.init()
	Preloader.preload([
		'/images/orange_button_left.jpg',
		'/images/orange_button_right.jpg',
		'/images/orange_arrow.jpg',
		'/images/orange_corners.jpg',
		'/images/orange_corner_top.png',
		'/images/orange_corner_top.png',
		'/images/corner.jpg'
	])
})

Event.observe(window, 'load', function() {
	if ($('blog_post_post_text')) CKEDITOR.replace('blog_post_post_text');
})

var Preloader = {
	preload: function(images) {
		$A(images).each(function(imageToPreload){
			var img = new Image()
			img.src = imageToPreload
		})
	}
}

var SlideDown = {

	init: function() {
		this.listMargins()
		$A(document.getElementsByClassName('slideDown')).each(function(slideDownElement){
			slideDownElement.slideContent = slideDownElement.down('.slideDownContent')
			slideDownElement.slideContent.setStyle({display: 'none'})


// show
			slideDownElement.showContent = function(e) {
				var duration = 1
				if (this.down('.read')){	
					this.down('.read').setStyle({display: 'none'})
					this.down('.hide').setStyle({display: 'block'})
				}

				if (this.down('.title_name')) this.down('.title_name').setStyle({width: (this.down('.title_name').getWidth() - parseInt(this.down('.title_name').getStyle('padding-left')))+'px'}) // firefox can't position video_container correctly without this hack

				this.addClassName('hover minus')
				this.slideEffect = new Effect.SlideDown(this.slideContent, {duration: duration})

				if (this.down('.video_container')){
					this.videoWrap = this.down('.video_container')
					this.videoWrap.removeClassName('slideDownSwitch')
					var pointer = this.videoWrap.down('.pointer')
					var person = this.videoWrap.next('.person')
					var replace = this.down('.replace')
					var newLeft = this.videoWrap.positionedOffset()[0] + ((this.className == 'slideDown left hover minus') ? -150 : 50);

					new Effect.Opacity(person.down('.avatar img'), { from: 1, to: 0 })
					new Effect.Morph(this.videoWrap, {
						style: 'margin-top: 108px;',
						duration: duration,
						afterFinish: function(e){
							new Effect.Morph(this.videoWrap, {
								style: 'width: 379px; left: -'+newLeft+'px; height: 300px;',
								duration: duration
							})
							new Effect.Morph(person, {
								style: 'left: '+ (-newLeft + 40) + 'px;',
								duration: duration
							})
							new Effect.Morph(person.down('.avatar'), {
								style: 'width: 0px',
								duration: duration
							})
							new Effect.Morph(person.down('.avatar img'), {
								style: 'width: 10px',
								duration: duration
							})
							new Effect.Morph(pointer, {
								style: 'width: 41px; height: 41px; margin-top: 63px',
								duration: duration,
								afterFinish: function(e){
									replace.setStyle({display: 'block'})
//									alert(replace.viewportOffset()[0] + ' ' + this.videoWrap.viewportOffset()[0])
								}.bind(this)
							})
						}.bind(this)
					})
					

					this.videoWrap.down('.arrow').setStyle({display: 'none'})
					
					new Effect.Morph(person, {
						style: 'margin-top: 120px;',
						duration: duration
					})
				}

				if (this.down('.video_container')){
					setTimeout(function(){this.animation = false}.bind(this), duration*2*1000)
				} else {
					setTimeout(function(){this.animation = false}.bind(this), duration*1000)
				}

			}.bindAsEventListener(slideDownElement)

// show end

			slideDownElement.hideContent = function(e) {
				var duration = 1
				if (this.down('.replace')){
					this.down('.replace').setStyle({display: 'none'})
				}
				if (this.down('.read')){
					this.down('.read').setStyle({display: 'block'})
					this.down('.hide').setStyle({display: 'none'})
				}
				this.removeClassName('hover minus')
				this.slideEffect = new Effect.SlideUp(this.slideContent, {duration: duration})
				if (this.down('.video_container')){
					var pointer = this.videoWrap.down('.pointer')
					var person = this.videoWrap.next('.person')
					new Effect.Morph(person, {
						style: 'margin-top: -13px; padding-left: 0px; left: 0;',
						duration: duration
					})
					new Effect.Morph(person.down('.avatar'), {
						style: 'width: 90px',
						duration: duration
					})
					new Effect.Morph(person.down('.avatar img'), {
						style: 'width: 90px',
						duration: duration
					})
					new Effect.Morph(this.videoWrap, {
						style: 'width: 113px; left: 0px; height: 58px;',
						duration: duration,
						afterFinish: function(e){
							new Effect.Opacity(person.down('.avatar img'), { from: 0, to: 1, duration: duration })
							new Effect.Morph(this.videoWrap, {
								style: 'margin-top: 27px;',
								duration: duration
							})
							this.videoWrap.down('.arrow').setStyle({display: 'block'})
							person.down('.avatar img').setStyle({display: 'block'})
						}.bind(this)
					})
					new Effect.Morph(pointer, {
						style: 'width: 18px; height: 17px; margin-top: 22px;',
						duration: duration
					})
				}

				if (this.down('.video_container')){
					setTimeout(function(){this.animation = false}.bind(this), duration*2*1000)
				} else {
					setTimeout(function(){this.animation = false}.bind(this), duration*1000)
				}

			}.bindAsEventListener(slideDownElement)
			


			slideDownElement.switchContent = function(e) {
				if (!this.animation) {
					this.animation = true
					this.isHidden() ? this.showContent() : this.hideContent()
				}
			}.bindAsEventListener(slideDownElement)
			
			slideDownElement.isHidden = function() {
				return this.slideContent.getStyle('display') == 'none'
			}
			

			slideDownElement.select('.slideDownSwitch').each(function(switchObj){
				switchObj.observe('click', slideDownElement.switchContent)
				switchObj.observe('mousedown', function(e){e.stop()})
			}.bind(this))
			
		}.bind(this))
	},

	listMargins: function(e) { //todo: move this to css
		var evens = $$('ul.main_list li:nth-child(odd)');
			if(evens) {
				evens.each(function(tr) {
					tr.addClassName('left');
				});
			}
	}
}

var FooterTables = {
	init: function() {
		$$('.tabs').each(function(tabContainer){
			tabContainer.switchers = $A(tabContainer.getElementsByClassName('switcher'))
			var tabs = $A(tabContainer.getElementsByClassName('tab'))
			var tabId = 0
			tabContainer.switchers.each(function(switcher){
				switcher.observe('click', this.toggleTab.bindAsEventListener(this))
				switcher.tabContainer = tabContainer
				if (tabs[tabId]) switcher.tab = tabs[tabId]
				switcher.showTab = function() {
					this.addClassName('active_switcher')
					if (this.tab) this.tab.setStyle({display: 'block'})
				}
				switcher.hideTab = function() {
					this.removeClassName('active_switcher')
					if (this.tab) this.tab.setStyle({display: 'none'})
				}
				tabId++
			}.bind(this))
		}.bind(this))
	},
	toggleTab: function(e) {
		var switcher = e.element()
		if (!switcher.hasClassName('active_switcher')) {
			switcher.tabContainer.switchers.invoke('hideTab')
			switcher.showTab()
		}
	}
}


var PopUp = {
	init: function() {
		$$('a.popup').each(function(popupLink){
			popupLink.observe('click', this.showPopup.bindAsEventListener(this))
		}.bind(this))
	},
	showPopup: function(e) {
		window.open(e.element().href, 'openForumPopup', 'height=750,width=546,status=no,toolbar=no,menubar=no,location=no')
		e.stop()
	}
}