/* Tabbed Specials Widget JS v0.2.1 by Josh Lizarraga */
/* Copyright 2009 Autofusion.com */

(function(){

/* AF Library */

if(typeof(YAHOO.AUTOFUSION) == "undefined"){
	YAHOO.namespace("AUTOFUSION");
}
if(typeof(YAHOO.AUTOFUSION.items) == "undefined"){
	YAHOO.AUTOFUSION.items = new Object();
}
if(typeof(YAHOO.AUTOFUSION.JWS) == "undefined"){
	YAHOO.AUTOFUSION.JWS = new JWSAPI();
}
var AF = YAHOO.AUTOFUSION;
var JWS = YAHOO.AUTOFUSION.JWS;

/* Tabbed Specials Widget */

// Tabbed Specials Object
AF.TabbedSpecials = new Object;
var TS = AF.TabbedSpecials;

// Private Methods
var PM = new Object;
PM.createTabView = function(pTarget, pConfig){
	if(typeof(pConfig) != "undefined"){
		return new YAHOO.widget.TabView(pTarget, pConfig);
	} else {
		return new YAHOO.widget.TabView(pTarget);
	}
}; // PM.createTabView()
PM.yuiHover = function(){
	// This is a built-in fix for IE6's hover limitations.
	var oClasses = ["tsw-result-previous", "tsw-result-next"];
	for(var i=0; i<oClasses.length; i++){
		(function(){
			var oElements = YAHOO.util.Dom.getElementsByClassName(oClasses[i]);
			var oHoverClass = oClasses[i] + "_hover";
			for(var j=0; j<oElements.length; j++){
				oElements[j].onmouseover = function(){
					YAHOO.util.Dom.addClass(this, oHoverClass);
				}
				oElements[j].onmouseout = function(){
					YAHOO.util.Dom.removeClass(this, oHoverClass);
				}
			}
		})();
	}
}; // PM.yuiHover()

// Page Method
TS.Page = function(afID, afConfig){
	// TS.Page Properties:
	this.id = (afID) ? afID : false;
	this.config = (afConfig) ? afConfig : false;
	this.container = document.getElementById(this.id);
	this.tabView = false;
	this.panel = false;
	this.panelVIN = false;
	this.location = false;
	this.prevNextOpacity = 0.75;
	this.fadeSpeed = 0.25;
	this.fadeEasing = YAHOO.util.Easing.easeOut;
	this.detailsLink = "Click here to view complete details for this vehicle.";
	this.afLink = "Powered by Autofusion";
	this.afTitle = "The leader in web solutions for the automotive industry.";
	this.noSpecsMessage = "<br />We're sorry, there were no tech specs available for this vehicle.";
	if(this.config != false){
		for(var i in this.config){
			this[i] = this.config[i];
		}
	}
	var that = this;
	// Make sure the BODY element has the yui-skin-sam class:
	if(YAHOO.util.Dom.hasClass(document.body, "yui-skin-sam") == false){
		YAHOO.util.Dom.addClass(document.body, "yui-skin-sam");
	}
	// TS.Page Methods:
	this.cloneJSON = function(pObject){
		return YAHOO.lang.JSON.parse((YAHOO.lang.JSON.stringify(pObject)));
	}; // this.cloneJSON()
	this.setOpacity = function(){
		// Select all prev/next SPANs:
		var oPrevs = YAHOO.util.Dom.getElementsByClassName("tsw-result-previous", "span", that.tabView);
		var oNexts = YAHOO.util.Dom.getElementsByClassName("tsw-result-next", "span", that.tabView);
		// Make sure oOpacity is a string:
		var oOpacity = that.prevNextOpacity + "";
		YAHOO.util.Dom.setStyle(oPrevs, "opacity", oOpacity);
		YAHOO.util.Dom.setStyle(oNexts, "opacity", oOpacity);
	}; // this.setOpacity()
	this.getJWS = function(pTarget){
		var oVIN = pTarget.id.replace(/tsw-/, "");
		JWS.getVehicle(oVIN, true, function(){
			// Gallery:
			pTarget.gallery = new Array();
			pTarget.ext360 = false;
			pTarget.JSON = that.cloneJSON(JWS.JSON);
			for(var i=0; i<pTarget.JSON.vehicle.gallery.length; i++){
				if(pTarget.JSON.vehicle.gallery[i].image.indexOf("swf") == -1){
					// If it's not a 360 spin:
					pTarget.gallery.push(pTarget.JSON.vehicle.gallery[i].image);
				} else {
					// If it IS a 360 spin:
					if(pTarget.JSON.vehicle.gallery[i].image.indexOf("exterior") != -1){
						// Make sure it's an external 360:
						pTarget.ext360 = pTarget.JSON.vehicle.gallery[i].image
					}
				}
			}
			var oTotal = YAHOO.util.Dom.getElementsByClassName("tsw-total", "em", pTarget)[0];
			oTotal.innerHTML = pTarget.gallery.length;
			if(pTarget.gallery.length <= 1){
				var oThumbs = YAHOO.util.Dom.getElementsByClassName("tsw-result-thumbs", "span", pTarget)[0];
				var oPrevious = YAHOO.util.Dom.getElementsByClassName("tsw-result-previous", "span", pTarget)[0];
				var oNext = YAHOO.util.Dom.getElementsByClassName("tsw-result-next", "span", pTarget)[0];
				YAHOO.util.Dom.setStyle([oThumbs, oPrevious, oNext], "visibility", "hidden");
			}
			// 360 Spin:
			if(pTarget.ext360 != false){
				var o360 = YAHOO.util.Dom.getElementsByClassName("tsw-result-360", "span", pTarget)[0];
				YAHOO.util.Dom.setStyle(o360, "visibility", "visible");
			}
			// Click handler:
			YAHOO.util.Event.addListener(pTarget, "click", that.handleClick);
		}); // JWS.getVehicle()
	}; // this.getJWS()
	this.fadeImage = function(e){
		var oTarget = YAHOO.util.Event.getTarget(e);
		var oFadeIn = new YAHOO.util.Anim(oTarget, {
				opacity: { to: 1 }
			}, that.fadeSpeed, that.fadeEasing);
		oFadeIn.animate();
	}; // this.fadeImage()
	this.loadImage = function(pTarget){
		var oResultImage = YAHOO.util.Dom.getElementsByClassName("tsw-result-image", "span", pTarget)[0];
		var oIMG = oResultImage.getElementsByTagName("img")[0];
		YAHOO.util.Event.addListener(oIMG, "load", that.fadeImage);
	}; // this.loadImage()
	this.changeImage = function(pTarget, pWhich){
		//alert("loadImage: " + pWhich);
		var oCurrentEM = YAHOO.util.Dom.getElementsByClassName("tsw-current", "em", pTarget)[0];
		var oCurrent = parseInt(oCurrentEM.innerHTML);
		var oTotal = parseInt(YAHOO.util.Dom.getElementsByClassName("tsw-total", "em", pTarget)[0].innerHTML);
		var oResultImage = YAHOO.util.Dom.getElementsByClassName("tsw-result-image", "span", pTarget)[0];
		var oIMG = oResultImage.getElementsByTagName("img")[0];
		var oFadeOut = new YAHOO.util.Anim(oIMG, {
				opacity: { to: 0 }
			}, that.fadeSpeed, that.fadeEasing);
		oFadeOut.animate();
		oFadeOut.onComplete.subscribe(function(){
			switch(pWhich){
				case "previous":
					oCurrent--;
					break;
				case "next":
					oCurrent++;
					break;
				default:
					// We are assuming this is a gallery click.
					oCurrent = parseInt(pWhich) + 1;
			}
			if(oCurrent < 1){
				oCurrent = 1;
			} else if(oCurrent > oTotal){
				oCurrent = oTotal
			}
			oCurrentEM.innerHTML = oCurrent;
			oIMG.src = pTarget.gallery[oCurrent - 1]; // Minus 1 for array index.
		});
	}; // this.changeImage()
	this.ext360 = function(pTarget){
		if(that.panel == false){
			// Create the panel if needed:
			that.panel = new YAHOO.widget.Panel("tsw-panel", {
				fixedcenter: true,
				zIndex: 30000,
				effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.25 }
			});
		}
		var oLink = pTarget.getElementsByTagName("a")[0];
		var oResultInfo = YAHOO.util.Dom.getElementsByClassName("tsw-result-info", "span", pTarget)[0];
		that.panel.setHeader('360&deg; View: ' + oResultInfo.innerHTML);
		that.panel.setBody('\
			<a href="' + oLink.href + '">' + that.detailsLink + '</a>\
			<div id="tsw-360-container">\
				<div id="tsw-360-replace">Loading 360&deg; view. This content requires the latest Flash player.</div>\
			</div>\
		');
		that.panel.setFooter('<a href="http://www.autofusion.com" target="_blank" title="' + that.afTitle + '">' + that.afLink + '</a>');
		that.panel.render(document.body);
		that.panel.show();
		swfobject.embedSWF(pTarget.ext360, "tsw-360-replace", "320", "240", "9.0.0", "http://www.autofusion.com/development/js/swfobject/2.1/expressInstall.swf", {}, {}, {});
		that.panel.beforeHideEvent.subscribe(function(){
			swfobject.removeSWF("tsw-360-replace");
		});
	}; // this.ext360()
	this.showThumbs = function(pTarget){
		if(that.panel == false){
			// Create the panel if needed:
			that.panel = new YAHOO.widget.Panel("tsw-panel", {
				fixedcenter: true,
				zIndex: 30000,
				effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.25 }
			});
		}
		that.panelVIN = pTarget.id.replace(/tsw-/, "");
		var oLink = pTarget.getElementsByTagName("a")[0];
		var oResultInfo = YAHOO.util.Dom.getElementsByClassName("tsw-result-info", "span", pTarget)[0];
		that.panel.setHeader('Gallery: ' + oResultInfo.innerHTML);
		that.panel.setBody('\
			<a href="' + oLink.href + '">' + that.detailsLink + '</a>\
		');
		var oGalleryContainer = document.createElement("div");
		oGalleryContainer.id = "tsw-gallery-container";
		that.panel.appendToBody(oGalleryContainer);
		for(var i=0; i<pTarget.gallery.length; i++){
			var oIMG = document.createElement("img");
			oIMG.src = pTarget.gallery[i];
			oIMG.alt = i;
			oIMG.title = "Image " + (i + 1) + " of " + pTarget.gallery.length + ".";
			oGalleryContainer.appendChild(oIMG);
		}
		that.panel.setFooter('<a href="http://www.autofusion.com" target="_blank" title="' + that.afTitle + '">' + that.afLink + '</a>');
		that.panel.render(document.body);
		that.panel.show();
		YAHOO.util.Event.addListener(oGalleryContainer, "click", that.handleGalleryClick);
	}; // this.showThumbs()
	this.moreSpecs = function(pTarget){
		if(that.panel == false){
			// Create the panel if needed:
			that.panel = new YAHOO.widget.Panel("tsw-panel", {
				fixedcenter: true,
				zIndex: 30000,
				effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.25 }
			});
		}
		var oLink = pTarget.getElementsByTagName("a")[0];
		var oResultInfo = YAHOO.util.Dom.getElementsByClassName("tsw-result-info", "span", pTarget)[0];
		that.panel.setHeader('Tech Specs: ' + oResultInfo.innerHTML);
		that.panel.setBody('\
			<a href="' + oLink.href + '">' + that.detailsLink + '</a>\
		');
		var oSpecs = false;
		for(var i in pTarget.JSON.vehicle.specs){
			if(typeof(pTarget.JSON.vehicle.specs[i]) != 'function'){
				oSpecs = true;
				var oH6 = document.createElement("h6");
				oH6.innerHTML = i;
				that.panel.appendToBody(oH6);
				var oUL = document.createElement("ul");
				for(var j in pTarget.JSON.vehicle.specs[i]){
					var oLI = document.createElement("li");
					oLI.innerHTML = '<span>' + j + ':</span>' + pTarget.JSON.vehicle.specs[i][j];
					oUL.appendChild(oLI);
					var oClear = document.createElement("br");
					oClear.className = "tsw-clear";
					oLI.appendChild(oClear);
				}
				that.panel.appendToBody(oUL);
			}
		}
		if(oSpecs == false){
			var oNoSpecs = document.createElement("div");
			oNoSpecs.innerHTML = that.noSpecsMessage;
			that.panel.appendToBody(oNoSpecs);
		}
		that.panel.setFooter('<a href="http://www.autofusion.com" target="_blank" title="' + that.afTitle + '">' + that.afLink + '</a>');
		that.panel.render(document.body);
		that.panel.show();
	}; // this.moreSpecs()
	this.handleGalleryClick = function(e){
		var oTarget = YAHOO.util.Event.getTarget(e);
		if(oTarget.nodeName.toUpperCase() == "IMG"){
			// We only want to deal with images.
			var oResultDiv = document.getElementById("tsw-" + that.panelVIN);
			that.changeImage(oResultDiv, oTarget.alt);
			that.panel.hide();
		}
	}; //this.handleGalleryClick()
	this.handleClick = function(e){
		YAHOO.util.Event.stopPropagation(e);
		YAHOO.util.Event.preventDefault(e);
		var oTarget = YAHOO.util.Event.getTarget(e);
		if(oTarget.nodeName.toUpperCase() != "A"){
			// If something inside the link is clicked, we must determine what:
			if(oTarget.className.indexOf("tsw") == -1){
				oTarget = YAHOO.util.Dom.getAncestorByTagName(oTarget, "span");
			}
			var oDIV = YAHOO.util.Dom.getAncestorByTagName(oTarget, "div");
			var oLink = oDIV.getElementsByTagName("a")[0];
			switch(oTarget.className){
				case "tsw-result-previous":
					that.changeImage(oDIV, "previous");
					break;
				case "tsw-result-previous tsw-result-previous_hover": // For IE6 :hover fix.
					that.changeImage(oDIV, "previous");
					break;
				case "tsw-result-next":
					that.changeImage(oDIV, "next");
					break;
				case "tsw-result-next tsw-result-next_hover": // For IE6 :hover fix.
					that.changeImage(oDIV, "next");
					break;
				case "tsw-result-360":
					that.ext360(oDIV);
					break;
				case "tsw-result-more":
					that.moreSpecs(oDIV);
					break;
				case "tsw-result-thumbs":
					that.showThumbs(oDIV);
					break;
				case "tsw-current":
					that.showThumbs(oDIV);
					break;
				case "tsw-total":
					that.showThumbs(oDIV);
					break;
				default:
					// If the className is not of interest, proceed as normal.
					window.location.href = oLink.href;
			}
		} else {
			// If the link itself is clicked, proceed as normal.
			window.location.href = oTarget.href;
		}
	}; //this.handleClick()
	this.init = function(){
		// Instantiate the TabView:
		if(typeof(that.config.tabView) != "undefined"){
			// If TabView configuration is defined:
			that.tabView = PM.createTabView(that.id, that.config.tabView);
		} else {
			// Otherwise:
			that.tabView = PM.createTabView(that.id);
		}
		that.setOpacity();
		var oResults = YAHOO.util.Dom.getElementsByClassName("tsw-result", "div", that.container);
		// Grab JWS data for each vehicle:
		var oPref = {
			"function":"i",
			"condition":"all",
			"cars_table":"inventory2.groups_cars",
			"location":"loc_id in (\"" + that.location + "\")",
			"per_page":"1",
			"sort":"model ASC",
			"use_evox":"Y"
		};
		JWS.setPref(oPref, function(){
			for(var i=0; i<oResults.length; i++){
				that.loadImage(oResults[i]);
				that.getJWS(oResults[i]);
			}
		}); // JWS.setPref()
		// Set up event listeners:
		// ...moved to getJWS()...
		// IE6 helper functions:
		if(YAHOO.env.ua.ie == 6){
			PM.yuiHover();
		}
	}; // this.init()
}; // TS.Page()

// Widget Method
TS.Widget = function(afID, afConfig){
	this.id = (afID) ? afID : false;
	this.config = (afConfig) ? afConfig : false;
	this.container = document.getElementById(this.id);
	this.tabView = false;
	if(this.config != false){
		for(var i in this.config){
			this[i] = this.config[i];
		}
	}
	var that = this;
	this.init = function(){
		// Instantiate the TabView:
		if(typeof(that.config.tabView) != "undefined"){
			// If TabView configuration is defined:
			that.tabView = PM.createTabView(that.id, that.config.tabView);
		} else {
			// Otherwise:
			that.tabView = PM.createTabView(that.id);
		}
	}; // this.init()
}; // TS.Widget()

})();