// JavaScript Document
//assumes mootools present...

/* Method to track the active rollover item inside articles for "sticky" behavior............ */
var deselect = function() {
	if(window.getSelection) {// Firefox, Opera, Safari
		var selection = window.getSelection();
		selection.removeAllRanges();
	} else {
		if(document.selection.createRange) {// Internet Explorer
			var range = document.selection.createRange();
			document.selection.empty();
		}
	}
}
var Static_List = new Class({
	initialize : function(tag) {
		my_elements = $$(tag);
		if(my_elements.length) {
			var me = this;
			//get this class object to work inside "addEvent"
			for( i = 0; i < my_elements.length; ++i) {
				my_elements[i].addEvent('mouseenter', function() {
					me.set_active(this);
				});
				my_elements[i].addEvent('click', function() {
					me.toggle(this);
				});
			}
		}
	},
	set_active : function(new_active) {
		if($chk(this.active_item)) {
			this.active_item.removeProperty('class');
		}
		this.active_item = new_active;
		this.active_item.setProperty('class', 'active');
	},
	toggle : function(target_item) {
		if(target_item == this.active_item) {
			this.active_item.setProperty('class', 'not_active');
			this.active_item = null;
		} else {
			this.set_active(target_item);
		}
		deselect();
	}
});

var List_Pages = new Class({
	initialize : function(el_tag, button_tag) {
		this.current = 0;
		this.my_elements = $$(el_tag);
		// target elements to be manipulated
		if(this.my_elements.length) {
			this.btn = $(button_tag);
			var me = this;
			this.btn.addEvent('click', function() {
				me.next();
			});
		}
	},
	next : function() {
		this.my_elements[this.current].removeProperty('class'); ++this.current;
		if(this.current >= this.my_elements.length) {// back to zero
			this.current = 0;
		}
		this.my_elements[this.current].setProperty('class', 'active');
		deselect();
	},
	current : 0,
	my_elements : [],
	btn : []
});

function decode_string(email_addr) {
	decoded_addr = "";
	for( j = 0; j < email_addr.length; j++) {
		decoded_addr += String.fromCharCode((email_addr.charCodeAt(j) - 5));
	}
	document.write(decoded_addr);
}

// javascript to manipulate home page image slide show....
var hp_images = function() {
	var container = $('hp_images');
	if(null != container) {// hp_images exists, so home page is loaded
		// move link tags to encompass pictures. Assume 1:1 a to img ratio
		var hp_links = $$('#hp_images a');
		var image_p = $$('#hp_images p');
		var images = $$('#hp_images img');
		for( i = 0; i < hp_links.length; ++i) {
			//make new link tag and wrap it around each image
			new Element('a', {
				href : hp_links[i].get('href')
			}).wraps(images[i]);
		}
		//cycle through h1 * p tag pairs fading in/out at specific intervals....
		//get all stories' images
		var transDuration = 1000;
		//msec
		var quoteDuration = 6000;
		//msec
		var currentIndex = 0;
		function transition() {
			var previous = currentIndex; ++currentIndex;
			if(image_p.length == currentIndex) {
				currentIndex = 0;
			}
			//separate functions to enable delay features
			function dispNone(el) {
				image_p[el].setStyle('display', 'none');
			}

			function dispBlock(el) {
				image_p[el].setStyle('display', 'block');
			}

			function hide(el) {
				image_p[el].set('tween', {
					transition : Fx.Transitions.linear,
					duration : transDuration
				});
				image_p[el].tween('opacity', 0);
				dispNone.delay(transDuration, this, el);
			}

			function show(el) {
				dispBlock(el);
				image_p[el].set('opacity', 0);
				image_p[el].set('tween', {
					transition : Fx.Transitions.linear,
					duration : transDuration
				});
				image_p[el].tween('opacity', 1);
			}

			show(currentIndex);
			hide.delay(transDuration / 2, this, previous);
		}

		for( i = 1; i < image_p.length; ++i) {// initially, hide all but first image...
			image_p[i].setStyle('display', 'none');
			image_p[i].set('opacity', 0);
		}
		// time interval to execute show + concurrent fades
		var intervalID = transition.periodical(quoteDuration + transDuration);
	}
}
/* just hide/show the first image to save time */
var hideimages = function() {
	my_images = $$('#article_box img');
	// target elements to be manipulated
	if(my_images.length) {
		my_images[0].setStyle('visibility', 'hidden');
	}
}
var showimages = function() {
	my_images = $$('#article_box img');
	// target elements to be manipulated
	if(my_images.length) {
		my_images[0].setStyle('visibility', 'visible');
	}
}
var Nav_Squares = new Class({
	initialize : function() {
		if($('portfolio_links')) {// make sure module exists to avoid JS errors
			this.content_blocks = $$('#portfolio_links .content');
			// target elements to be manipulated
			this.my_elements = $$('#portfolio_links ul li a');
			//this.my_elements_imgs = $$('#portfolio_links ul li a img');
			if(this.my_elements.length) {
				//get article's div
				this.article_div = $$('#article_box .item-page_portfolio, #article_box .blog_portfolio');
				//add touch/click to portfolio image
				this.article_div[0]
					.addEvent('touchstart', function(e) { e.preventDefault(); })
					.addEvent('touchend', function(e) { $('next_link').fireEvent('click', e); })
					.addEvent('click', function(e) { $('next_link').fireEvent('click', e); });
				for( i = 0; i < this.my_elements.length; ++i) {
					var me = this;
					// set the current active item
					if(this.my_elements[i].hasClass('active')) {
						this.iCurrent = i;
					}
					//wrap event function so that i is not passed as reference to this i.
					this.my_elements[i].addEvent('mouseenter', (function(x) {
						return function() {
							me.fChangeSample(x)
						}
					})(i))
					.addEvent('touchstart', (function(x) {
						return function(e) {
							e.preventDefault();
							me.fChangeSample(x);
							//debug = $('debug');
							//debug.removeClass('not_visible').appendText('  link=' + this.getProperty('href'));
						}
					}
					)(i))
					.removeClass('noJS');
				}
				// convert prev/next links to JS
				var me = this;
				$('next_link').removeProperty('href').setStyle('cursor', 'pointer').addEvent('click', function(e) {
					me.fIncSample();
					this.blur
					e.preventDefault();
				});
				$('prev_link').removeProperty('href').setStyle('cursor', 'pointer').addEvent('click', function(e) {
					me.fDecSample();
					this.blur
				});
			}

			// put temp loading image in all nav-squares image src attributes
			aSampleImagesTarg = $$('#portfolio_links .content img');
			// place to put images once loaded
			aSampleImagesSrcDiv = $$('#portfolio_links .content #image_path');
			//identify img path information
			// copy image path info...
			aSampleImagesSrcPath = new Array();
			for( i = 0; i < aSampleImagesSrcDiv.length; ++i) {
				aSampleImagesSrcPath[i] = "/" + (aSampleImagesSrcDiv[i].get('text'));
			}
			aSampleImagesSrcDiv.dispose();
			// get rid of divs now that we have image paths
			// handle loading image icons...
			var me = this;
			// get current context in to new Asset class
			var sampleImages = new Asset.images(aSampleImagesSrcPath, {
				onProgress : function(n, i, img_path) {
					aSampleImagesTarg[i].setProperty('src', img_path);
					aSampleImagesTarg[i].removeClass('loading');
					//me.my_elements_imgs[i].setProperty('src', img_path);
					if(me.iCurrent == i) {// update image if it's the current target
						article_img = $$('#article_box .item-page_portfolio img, #article_box .blog_portfolio img');
						article_img[0].setProperty('src', img_path);
						article_img[0].removeClass('loading');
					}
				},
				onComplete : function() {
				},
				onError : function(n, i, img_path) {
					//alert('onError 245 called: img_path = ' + img_path);
				}
			});

		}
	},
	fChangeSample : function(i) {
		if(this.iCurrent != i) {
			this.my_elements[this.iCurrent].removeClass('active');
			this.my_elements[i].addClass('active');
			this.iCurrent = i;
			this.article_div[0].set('html', this.content_blocks[i].get('html'));
			document.clearSelection();
		}
	},
	fIncSample : function() {
		if(this.iCurrent == this.my_elements.length - 1) {
			this.fChangeSample(0);
		} else {
			this.fChangeSample(this.iCurrent + 1);
		}

	},
	fDecSample : function() {
		if(this.iCurrent == 0) {
			this.fChangeSample(this.my_elements.length - 1);
		} else {
			this.fChangeSample(this.iCurrent - 1);
		}
	},
	/*aSampleImagesSrcPath: [],*/
	iCurrent : -1,
	content_blocks : [],
	my_elements : [],
	//my_elements_imgs: [],
	article_div : []
});


window.addEvent('domready', function() {
	var list1 = new Static_List('.item-page_process ul li');
	var list2 = new Static_List('.item-page div#clients ul li');
	var list3 = new List_Pages('.item-page #testimonials ul li', 'next_btn');
	hideimages();
	hp_images();
	//add touch to testimonials
	if ($('testimonials')) {
		$('testimonials').getElements('li').addEvent('touchstart', function(e) { e.preventDefault(); })
			.addEvent('touchend', function(e) { $('next_btn').fireEvent('click', e); })
			.addEvent('click', function(e) { $('next_btn').fireEvent('click', e); });
	}
});

window.addEvent('load', function() {
	showimages();
	//alert('vdt 0.5');
	var navsquares = new Nav_Squares();
});