// fellers.js
// Created for Fellers by Christopher Casey
// First version started 2/21/08
// altered for the October Surprise on 10/22/08

// We use MooTools' "domready" function to mess with the DOM before graphics begin to load.
// Note that pages should be semantically correct and useable even if this event doesn't fire
// or if JavaScript is turned off. It's not nearly as pretty, of course, but you can't have
// everything.

// Fixing the mootools Scroller function, which is broken in 1.2.1 (may no longer be needed in 1.2.2)
Scroller.implement({
    scroll: function(){
        var size = this.element.getSize(), scroll = this.element.getScroll(), pos = this.element.getOffsets(), scrollSize = this.element.getScrollSize(), change = {'x': 0, 'y': 0};
        for (var z in this.page){
            if (this.page[z] < (this.options.area + pos[z]) && scroll[z] != 0)
                change[z] = (this.page[z] - this.options.area - pos[z]) * this.options.velocity;
            else if (this.page[z] + this.options.area > (size[z] + pos[z]) && scroll[z] + size[z] != scrollSize[z])
                change[z] = (this.page[z] - size[z] + this.options.area - pos[z]) * this.options.velocity;
        }
        if (change.y || change.x) this.fireEvent('change', [scroll.x + change.x, scroll.y + change.y]);
    }
});

function goBright(btn) {
	$(btn).src = '/images/designoct08/tabs/' + btn + 'o.gif';
	//var btn2 = btn.substring(0,btn.length - 3);
	//btn2 += (btn.substr(btn.length - 3) == 'top') ? 'bot' : 'top';
	//$(btn2).src = '/images/designoct08/tabs/' + btn2 + 'o.gif';
}

function goDark(btn) {
	$(btn).src = '/images/designoct08/tabs/' + btn + 'd.gif';
	//var btn2 = btn.substring(0,btn.length - 3);
	//btn2 += (btn.substr(btn.length - 3) == 'top') ? 'bot' : 'top';
	//$(btn2).src = '/images/designoct08/tabs/' + btn2 + 'd.gif';
}

function showdeal(thing,text,x,y) {

	thingid = thing.id.substr(3);
	inst = $('installersearchtext');
	inx = $('installerx');
	inst.innerHTML = "<p id=\"instname\">" + text + "</p>";
	if (x <= 350) {
		inst.setStyles({
			position: 'absolute',
			top: (y - 9) + 'px',
			left: (x - 9) + 'px',
			padding: '5px',
			paddingTop: '14px',
			paddingLeft: '14px',
			width: '180px',
			fontSize: '12px',
			textAlign: 'left',
			color: 'white',
			overflow: 'hidden',
			backgroundImage: 'url(/images/starbg.png)',
			backgroundPosition: 'top left',
			display: 'block'
		});
	} else {
		inst.setStyles({
			position: 'absolute',
			top: (y - 9) + 'px',
			left: (x - 190) + 'px',
			padding: '5px',
			paddingTop: '14px',
			paddingLeft: '14px',
			width: '180px',
			fontSize: '12px',
			lineHeight: '14px',
			textAlign: 'left',
			color: 'white',
			overflow: 'hidden',
			backgroundImage: 'url(/images/starbg2.png)',
			backgroundPosition: 'top right',
			display: 'block'
		});	
	}

	inst.addEvent('mouseleave', function(){
		inst.setStyle('display', 'none');
		awaydeal(thing);
	});
	inst.addEvent('click', function(){
		inst.setStyle('display', 'none');
		awaydeal(thing);
	});
	//inx.addEvent('click', function(){
	//	inst.setStyle('display', 'none');
	//	awaydeal(thing);
	//}
}

function awaydeal(thing) {
	// for future expansion
}

function showdeal2(thing,text,x,y) {
	thingid = thing.id.substr(3);
	document.getElementById('installersearchtext').innerHTML = "<p id=\"instname\">" + text + "</p><p id=\"installerx\"></p>";
	//document.getElementById('installersearchtext').style.position = "relative";

	var inst = $('instname');
	var inx = $('installerx');
	inst.style.position = "absolute";
	inx.style.position = "absolute";
	inx.style.display = "block";
	//if (y < 300) {
		inst.style.top = (y * 0.7 - 4) + "px";
		inx.style.top = (y * 0.7) + "px";
	//} else {
	//	inst.style.bottom =  (y * 1.337 -541) + "px"; //(y + 110) + "px";
	//}
	if (x > 350) {
		inst.style.left = (x * 0.7 - 170) + "px";
		inx.style.left = (x * 0.7 - 168) + "px";
		inst.style.backgroundImage = "url('http://www.fellerscertified.com/images/general/arrowur2.gif')";
		inst.style.backgroundPosition = "top right";
	} else {
		inst.style.left = (x * 0.7 - 4) + "px";
		inx.style.left = (x * 0.7 + 158) + "px";
		inst.style.backgroundImage = "url('http://www.fellerscertified.com/images/general/arrowul2.gif')";
		inst.style.backgroundPosition = "top left";
	}
	inst.style.backgroundRepeat = "no-repeat";
	inst.style.padding = "20px 8px 10px 8px";
	inst.style.width="160px";
	inx.style.width="10px";
	inx.style.height="10px";
	inx.style.cursor = "pointer";
	//inx.style.border = "1px solid white";
	inst.style.overflow = "hidden";
	//inst.style.backgroundColor = "#222";
	inst.style.fontSize = "10px";
	inst.style.lineHeight = "13px";
	inst.style.color = "white";
	inst.style.cursor = "pointer";
	inst.style.zIndex = 120;
	inx.style.zIndex = 130;
	
	inst.addEvent('mouseleave', function(){
		inst.setStyle('display', 'none');
		inx.setStyle('display', 'none');
		awaydeal2(thing);
	});
	inst.addEvent('click', function(){
		inst.setStyle('display', 'none');
		inx.setStyle('display', 'none');
		clickdeal2(thingid);
	});
	inx.addEvent('click', function(){
		inst.setStyle('display', 'none');
		inx.setStyle('display', 'none');
		awaydeal2(thing);
	});
}

function awaydeal2(thing) {
	//alert(document.getElementById(thing.id).style.backgroundImage);
	if (document.getElementById(thing.id).style.backgroundImage == "url(/images/general/blue9.gif)")
		document.getElementById(thing.id).style.backgroundImage = "url('/images/general/bluepulse9.gif')"
	else
		document.getElementById(thing.id).style.backgroundImage = "url('/images/general/blue5.gif')";
}

function clickdeal2(id) {
	locale = "http://www.fellerscertified.com/index.cfm/spKey/gallery.htm?installerID=" + id;
	window.location = locale;
}

function getParams() {
	var idx = document.URL.indexOf('?');
	var params = new Array();
	if (idx != -1) {
		var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
		for (var i=0; i<pairs.length; i++) {
		nameVal = pairs[i].split('=');
		params[nameVal[0]] = nameVal[1];
		}
	}
	return params;
}

// preload() is the function which actually screws with the document before images load.

function preload() {
	// Image preloader and general setup
	var params = getParams(); // important for the AJAX minigallery
	
	// Set up downloadable content hierarchy, if such a thing exists on the page
	
	var dl = $('downloadables');
	if ($defined(dl)) {
		var ul = $$('ul.clickable');
		ul.each( function(o) {
			if (!o.hasClass('top')) {
				o.addClass('middle');
			}
		});
		var gl = $$('ul.clickable li');
		gl.each( function(o) {
			o.addEvents({
				'click': function() {
					var p = this.getParent().getChildren();
					p.each( function(pp) { 
						if (pp.hasClass('thisone')) {
							pp.removeClass('thisone');
						}
						var ppp = pp.getFirst();
						if ($defined(ppp) && !ppp.hasClass('noexplode')) {
							ppp.setStyles({'display': 'none', 'margin-left': 0});
						}
					} );
					this.addClass('thisone');
					var n = this.getFirst();
					if ($defined(n) && !n.hasClass('noexplode')) {
						mgn = this.getStyle('margin-left').toInt() + 140;
						n.setStyles({'display': 'block', 'margin-left': mgn + 'px'});
					}
				},
				'mouseover': function() { this.setStyle('background-color', 'ffffee'); },
				'mouseout': function() { this.setStyle('background-color', '#ffffcc'); }
				}
			);
		});
	}
	
	// popup for WrapGear gallery
	
	var wrapGears = $$('a.wrapgear');
	wrapGears.each(function(lnk) {
		lnk.addEvent('click', function() {
			var bloo = window.open('http://fellers.com/wrapgear.cfm?id=' + this.id, "ProductDetail", "height=350,width=650,menubar=no,toolbar=no,location=no,status=no" );
			return false;
		});
	});

	
	// minigallery (currently only on the news page, which may change)
	
	// create minigallery from scratch so as not to put a bunch of stuff
	// on the page which people without JS can't use anyway
	
	// Only create the gallery on a page that has a div id 'minigallery'
	
	var minigallery = $('minigallery');

	if ($defined(minigallery)) {
		
		minigallery.dispose();
		// This is a sort of hack to at least show SOMETHING in IE5+, since I can't be arsed to figure out the relative-float problem
		$('minigalleryholder').setStyles( {'background-image': 'url(/images/fellers/BEAMER.jpg)', 'background-repeat': 'no-repeat'} );
		minigallery = new Element('div', {
			'id': 'minigallery',
			'class': 'minig-gallery'
		}).injectInside($('minigalleryholder'));
		var minicaption = new Element('div', {
			'id': 'minicaption',
			'class': 'minig-caption'
		});

		var miniroller = new Element('div', {
			'id': 'miniroller',
			'class': 'minig-roller'
		}).injectInside(minigallery);
		
		var minirollercover = new Element('div', {
			'id': 'minirollercover',
			'class': 'minig-rollercover'
		}).injectInside(minigallery);
		
		// Make the miniroller actually, you know, scroll

		var miniscroller = new Scroller('miniroller', {'area': 50, 'velocity': 0.5});
		//miniscroller.start();


		miniroller.addEvent('mouseenter', miniscroller.start.bind(miniscroller));
		miniroller.addEvent('mouseleave', miniscroller.stop.bind(miniscroller));
		
		// When you mouse over the big image, this happens ...
		
		var minigalfx = new Fx.Tween(miniroller, {duration: 400, property: 'margin-right'}); // duration 400
		var minicapfx = new Fx.Tween(minicaption, {duration: 600, property: 'margin-top'}); // duration 600

		var miniimage = new Element('div', {
			'id': 'miniimage',
			'class': 'minig-image',
			'events': {
				'mouseenter': function() {
					minigalfx.cancel();
					minicapfx.cancel();
					minigalfx.start(-55);
					minicapfx.start(220);
				},
				'mouseleave': function() {
					minigalfx.cancel();
					minicapfx.cancel();
					minigalfx.start(0);
					minicapfx.start(300);
				}
			}
		}).injectInside(minigallery);
		
		minicaption.injectInside(miniimage);
		
		var mgt = $('minigalleryholder').getProperty('title');
		$('minigalleryholder').setProperty('title',''); // it was annoying, okay?
		var articleid;
		if ($defined(mgt)) { articleid = mgt; } else { articleid = $pick(params.spId, "nothing"); }
		if (articleid != 'nothing') {
			aid = "articleid=" + articleid;
			var oid = new Object();
			oid.articleid = articleid;
			var galleryAJAX = new Request.JSON(
				{ url: '/scripts/minigallery.cfm', onComplete: function(obj) {
					var originals = obj.originals;
					var thumbs = obj.thumbnails;
					var images = obj.images;
					var captions = obj.captions;
					miniimage.setStyle('background-image', 'url(\'' + images[0] + '\')');
					$('minigalleryholder').setStyles( {'background-image': 'url(\'' + images[0] + '\')', 'background-repeat': 'no-repeat'} );
					minicaption.set('html', captions[0]);
					if (thumbs.length > 1) { // no point in having the select thing if you only have one image
						for (i = 0; i < thumbs.length; i++) {
							if ( i < 10 ) { i2 = "0" + i } else { i2 = i }
							var j = new Element('img', { 'src': thumbs[i], 'height': 50, 'width': 75, 'id': 'mth' + i2,
								'events': {
									'mouseenter': function() {
										this.width = 90;
										this.height = 60;
										this.style.marginLeft = "0px";
									},
									'mouseleave': function() {
										this.width = 75;
										this.height = 50;
										this.style.marginLeft = "15px";
									},
									'click': function() {
										var peen = this.id.slice(3,5) * 1;
										$('miniimage').setStyle('background-image', 'url(\'' + images[peen] + '\')');
										$('minicaption').set('html', captions[peen]);
										// TODO: bring up full sized image on clicking miniimage
									}
								}
							}).injectInside(miniroller);
						}
					}
				}
			}); //.send(aid);
			galleryAJAX.send(aid);
		}
	} // end of minigallery setup
}

window.addEvent('domready', function() {
	preload();
});