/******************************************************
JS for Pixelplume Project Page
author:  Grace Pok
version 1.0
******************************************************/

//Pixelplume namespace -- if it's been defined in global script, don't do it again.
var PP = {};

/* 
 * Project Image -- Constructor
 *   id (str) -- ID of the thumbnail's <A> element (generates the click event)
 *   thumb (str) -- thumbnail file
 *   big (str) -- big image file
 */
PP.Pimg = function(id, thumb, big){
	this.id = id;
	this.big = big;
	this.thumb = thumb;
	
	this.title = null;  //used only for archive projects
	this.desc = null;	//used only for archive projects
};

PP.Pimg.prototype = {
	//returns the big image file name
	_img : function() {
		return this.big;
	},
	
	//returns the HTML A element
	_anchor : function() {
		return $(this.id);
	},
	
	// thumbnail click event hander
	//	imgselobj -- PimgSelect object that contains this image
	//	swapText (bool) pass in true if text (title/desc) should also be swapped
	click: function(imgselobj, swapText) {
		
		//do nothing if same image is clicked
		if (imgselobj.lastimg == this) {
			return;
		}
		
		var last_anch;
		var last_img;
		var cur_anch;
		var cur_img;
		
		//last clicked A and IMG elements... only act on it if it's defined
		if (imgselobj.lastimg) {

		last_anch = $(imgselobj.lastimg._anchor());
			last_img = $(imgselobj.lastimg.getThumbImg());

			//restore the last thumbnail class
			if (last_anch.hasClassName('cur')) {
				last_anch.removeClassName('cur');
				last_img.removeClassName('cur');
			}

		}
		
		//currently clicked A and IMG elements
		cur_anch = $(this._anchor());
		cur_img = $(this.getThumbImg());
		if (!cur_anch.hasClassName('cur')) {
			cur_anch.addClassName('cur');
			cur_img.addClassName('cur');
		}

		//set the last-clicked image to current one, and load the big picture
		imgselobj.lastimg = this;
		imgselobj.loadImage(this.big);
		
		if (swapText) {
			imgselobj.loadText(this.title, this.desc);
		}
		return this.big;
	},
	
	//return the thumbnail's IMG HTML element
	getThumbImg: function() {
		var children = this._anchor().childElements();
		if (children.length == 1 && (children[0].tagName == "IMG")) {
			return children[0];
		}
		else
		{
			//return the first IMG element that's inside the A tag
			//this will return undefined if no IMG tag is found
			return children.find( function(el) { 
				if (el.tagName == "IMG")
					return true;
				return false;
			});
		}
	},
	//setup each thumbnail for click event
	//  imgselobj -- PimgSelect object that contains this image
	setClickEvent: function(imgselobj) {
		$(this.id).observe("click", this.click.bind(this, imgselobj, false));
	},
	
	//same as setClickEvent, but clicking on thumbnail will also swap out the text
	setClickEventwText: function(imgselobj) {
		$(this.id).observe("click", this.click.bind(this, imgselobj, true));
	},
	
	//Sets the title & description for this image.
	//For archive projects.
	setTitleDesc: function(title,desc) {
		this.title = title;
		this.desc = desc;
	}
	
};
/*--------------------------------------------------------------
END of Pimg class */


/* 
 * PimgSelect - Widget that lets you select from an array of Project Images
 * 	imgID - big image ID 
 * 	images - array of Pimg objects
 */
PP.PimgSelect = function(imgID, images){
	this.imgID = imgID;
	this.images = images;
	this.lastimg;    //Pimg object that was clicked last
	
	this.titleID = null;  //for archive only - title text container
	this.descID = null;	  //for archive only - desc text container
};

PP.PimgSelect.prototype = {
	
	//returns the HTML IMG element
	_img: function() {
		return $(this.imgID);
	
	},
	//define the area where the text goes
	//only for archive projects
	//  titleID (str) - ID of HTML element where title should be displayed
	//	descID (str) - ID of HTML element where description should be displayed
	setTextArea: function(titleID, descID) {
		this.titleID = titleID;
		this.descID = descID;
	},
	
	//loads the given Image into big IMG's element
	loadImage: function(imagefile) {
		this._img().src = imagefile;
	},
	
	//loads the given Images's title/desc into specified elements
	//only for archive projects
	loadText: function(title, desc) {
		$(this.titleID).update(title);
		$(this.descID).update(desc);
	},
	
	//hooks up the event handler
	load: function() {
			
		for (var ii=0; ii < this.images.length; ii++) {
			this.images[ii].setClickEvent(this);
		}
		
		//by default the first image
		this.images[0].click(this);
	},
	
	//hook up event handler
	// when image is clicked, the big image is shown, and title/desc is also loaded
	load_wTitleDesc: function() {

		for (var ii=0; ii < this.images.length; ii++) {
			this.images[ii].setClickEventwText(this);
		}
		
		//by default the first image
		this.images[0].click(this, true);
	}
};
/*---------------------------------------------------------------
END of PimgSelect class  */


/*
 * Pmenu -- Project menu widget
 *   Constructor
 *		div (str) -- div where project selections are stored
 *		handle (str)
 *		track (str)
 *		wrap (str)
 *		direction (str:optional) -- 'v' or 'h' default: 'h'
 */
PP.Pmenu = function(config){
	this.div = config.div;
	this.handle = config.handle;  //scrollbar handle ID
	this.track = config.track;		//scrollbar track ID
	this.wrap = config.wrapper;
	this.direction = config.direction ? config.direction : 'h';
	
	//calculate the initial position of the slider & menu
	this.initPos = (config.curPos/config.totalCount).toFixed(2);  //round to 1 decimal place
	
	this.sliderObj = null;

	//pointer to the actual DIV objects
	this.imgDiv = null;
	this.handleDiv = null;
	this.trackDiv = null;
	this.wrapDiv = null;
};

PP.Pmenu.prototype = {

	// scroll the element horizontally based on its width and the slider maximum value
	scrollHorizontal: function(value, element, slider) {
		element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
	},
	
	scrollVertical: function(value, element, slider) {
		element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
	},
	
	load: function() {
		
		
		this.imgDiv = $(this.div);
		this.handleDiv = $(this.handle);
		this.trackDiv = $(this.track);
		this.wrapDiv = $(this.wrap);
		
		/* Slider -------need to init after page is done loading-- */
		/* otherwise the slider will be hidden...  not sure why    */
		var that = this;

		// horizontal slider control
		if (this.direction == 'h'){
				this.sliderObj = new Control.Slider(this.handle, this.track , {
				onSlide: function(v) { that.scrollHorizontal(v, that.imgDiv, that.sliderObj);  },
				onChange: function(v) { that.scrollHorizontal(v, that.imgDiv, that.sliderObj); }
			});
			
			// disable scrolling if text doesn't overflow the div
			if (this.imgDiv.scrollWidth <= this.imgDiv.offsetWidth) {
				this.sliderObj.setDisabled();
				this.wrapDiv.hide();
			}
		}
		//vertical slider control
		else {
			this.sliderObj = new Control.Slider(this.handle, this.track , {
				axis: 'vertical',
				onSlide: function(v) { that.scrollVertical(v, that.imgDiv, that.sliderObj);  },
				onChange: function(v) { that.scrollVertical(v, that.imgDiv, that.sliderObj); }
			});
			
			// disable scrolling if text doesn't overflow the div
			if (this.imgDiv.scrollHeight <= this.imgDiv.offsetHeight) {
				this.sliderObj.setDisabled();
				this.wrapDiv.hide();
			}
		}
		// todo -- find out where my project is and scroll appropriately
		//this.scrollHorizontal(0.5, this.imgDiv, this.sliderObj);
		this.sliderObj.setValue(this.initPos);  //Goes from 0 to 1
	}
};

/*---------------------------------------------------------------
END of Pmenu class  */


/* 
 * Pinfo - Project Info Widget that lets you toggle the long description
 *  btn_toggle (str, or array-of-str) 
 *			- btns that triggers toggle event.  If more than 1, then pass as array of strings
 * 								
 *  descDiv (str) div that holds the long description
 */
PP.Pinfo = function(btn_toggle, descDiv){
	this.btn = btn_toggle;
	this.descDiv = descDiv;
};

PP.Pinfo.prototype = {
	
	_ishidden: function() {
		if ($(this.descDiv).hasClassName('hidden'))
			return true;
	},
	//return the main toggle button in case there is more than 1
	_mainbtn: function() {
		if (typeof this.btn == "string") {
			return $(this.btn);
		}
		else {
			return $(this.btn[0])
		}
	},
	//toggle event handler:  makes the long desc visible/invisible
	toggleDesc: function(){
		var div = $(this.descDiv);
		var btn = this._mainbtn();
		
		if (this._ishidden())
			div.removeClassName('hidden');
		else
			div.addClassName('hidden');
			
		if (btn.hasClassName('cur')) {
			btn.removeClassName('cur');
		}
		else {
			btn.addClassName('cur');
		}
	},
	
	//hook up the event handler, set the opacity
	load: function() {
		
		if (typeof this.btn == "string") {
			$(this.btn).observe("click", this.toggleDesc.bind(this));
		}
		else {  //assume array
			for (var ii=0; ii < this.btn.length; ii++) {
				$(this.btn[ii]).observe("click", this.toggleDesc.bind(this));
			}
		}
		$(this.descDiv).setOpacity(0.8);
	}
};

/* for flash player -- called in MOTION projects page
 *
 */
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}