/**********************************************
* Constructor for a new Screenshots Object
***********************************************/

Screenshots = Class.create();

Screenshots.prototype = {

//~~~( Setup Functions )~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    //-----------------------------------------------------------------------
    //- Setup the object, read in options, and render the skeleton
    initialize : function(nav_container, img_container, title_container, admin_ss_json_string, user_ss_json_string, pic_index)
    {
        //- Find the container divs
        if(!nav_container) return;
        this.nav_container = $(nav_container);
        if(!this.nav_container)
            alert('Could not find your container (' + this.nav_container + ')');

        if(!img_container) return;
        this.img_container = $(img_container);
        if(!this.img_container)
            alert('Could not find your container (' + this.img_container + ')');

        if(!title_container) return;
        this.title_container = $(title_container);
        if(!this.title_container)
            alert('Could not find your container (' + this.title_container + ')');


        //- Member variables
		// this is our main data structure
        this.admin_screenshots = admin_ss_json_string;
        this.user_screenshots = user_ss_json_string;
		this.current_pic_index = pic_index;
		this.screenElements = [];
		this.imageCache = [];
		this.currentTitleDiv;
		this.currentTitleSpan;
		this.currentImage;
		this.currentImageDiv;

		// initialize display
		this.initDraw();
	},

	initDraw : function()
	{
		var cEl = this.createElement;
		var aClassName;

		var navTable = cEl('table', '', this.nav_container);
		var navTbody = cEl('tbody', '', navTable);
		var navAdminRow = cEl('tr', '', navTbody);
		var navAdminTitle = cEl('td', '', navAdminRow);

		var admin_nav_title = cEl('b', '', navAdminTitle);
		admin_nav_title.innerHTML = 'Admin Portal:  ';
		
		var navAdminLinks = cEl('td', '', navAdminRow);
		//cEl('br', '', this.nav_container);

		ssLength = this.admin_screenshots.length;
		for (var i = 0; i < ssLength; i++)
		{
			var currentSS = this.admin_screenshots[i];
			this.imageCache[i] = new Image;
    		this.imageCache[i].src = "/sv_images/screenshots/" + currentSS.name + ".gif";

			if (i == this.current_pic_index) {
				this.initImage(currentSS, i);
				aClassName = "active";
			} else {
				aClassName = "";
			}

			var navItem = cEl('a', aClassName, navAdminLinks);
			navItem.style.cursor = 'pointer';
			var navText = cEl('strong', '', navItem);
			navText.innerHTML = currentSS.id;
			
			var navClickListener = this.navClicked.bindAsEventListener(this, i);	
			var navRollOverListener = this.navRoll.bindAsEventListener(this, navItem, currentSS.display_name);

			Event.observe(navItem, "click", navClickListener);
			ToolTip.add(navItem, '&nbsp; ' + currentSS.display_name + '&nbsp;', {show: false, skin: "metal", delay : 10} );
			this.screenElements[i] = {"nav" : navItem};
			this.screenElements[i].title = currentSS.display_name;
		}

		var navUserRow = cEl('tr', '', navTbody);
		var navUserTitle = cEl('td', '', navUserRow);
		var admin_nav_title = cEl('b', '', navUserTitle);
		admin_nav_title.innerHTML = 'User Portal: &nbsp;';

		var navUserLinks = cEl('td', '', navUserRow);

		user_ssLength = this.user_screenshots.length;
		for (var j = 0; j < user_ssLength; j++)
		{
			userSS_id = j + i;
			var currentSS = this.user_screenshots[j];
			this.imageCache[userSS_id] = new Image;
    		this.imageCache[userSS_id].src = "/sv_images/screenshots/" + currentSS.name + ".gif";

			if (userSS_id == this.current_pic_index) {
				this.initImage(currentSS, userSS_id);
				aClassName = "active";
			} else {
				aClassName = "";
			}

			var navItem = cEl('a', aClassName, navUserLinks);
            navItem.style.cursor = 'pointer';
			var navText = cEl('strong', '', navItem);
			navText.innerHTML = currentSS.id;
			
			var navClickListener = this.navClicked.bindAsEventListener(this, userSS_id);	
			var navRollOverListener = this.navRoll.bindAsEventListener(this, navItem, currentSS.display_name);

			Event.observe(navItem, "click", navClickListener);
			ToolTip.add(navItem, '&nbsp; ' + currentSS.display_name + '&nbsp;', {show: false, skin: "metal"} );
			this.screenElements[userSS_id] = {"nav" : navItem};
			this.screenElements[userSS_id].title = currentSS.display_name;
		}
		cEl('br', '', this.nav_container);
	},

	initImage : function (ssItem, index)
	{
		var cEl = this.createElement;

		this.currentTitleDiv = cEl ('div', 'ss_title', this.title_container);
		this.currentTitleSpan = cEl ('span', '', this.currentTitleDiv);
		this.currentTitleSpan.innerHTML = ssItem.display_name;

		this.currentImageDiv = cEl('div', '', this.img_container);
		this.currentImage = cEl ('img', '', this.currentImageDiv);
		this.currentImage.src = this.imageCache[index].src;

		nextClickListener = this.arrowClick.bindAsEventListener(this, 'NEXT');
		prevClickListener = this.arrowClick.bindAsEventListener(this, 'PREV');
		linkClickListener = this.linkClick.bindAsEventListener(this);
		var iconDiv = cEl('div', 'ss_button_containter', this.title_container);

		var admin_link_img = cEl('img', 'ss_img_link', iconDiv);
		admin_link_img.src = "/sv_images/btn_link.gif";

		var admin_prev_link = cEl('img', 'ss_img_link', iconDiv);
		admin_prev_link.src = "/sv_images/btn_prev.gif";
		Event.observe(admin_prev_link, 'click', prevClickListener);
		ToolTip.add(admin_prev_link, '&nbsp;Previous Image&nbsp;', {show: false, skin: "metal"} );

		var admin_next_link = cEl('img', 'ss_img_link', iconDiv);
		admin_next_link.src = "/sv_images/btn_next.gif";
		Event.observe(admin_next_link, 'click', nextClickListener);
		ToolTip.add(admin_next_link, '&nbsp;Next Image&nbsp;', {show: false, skin: "metal"} );

		Event.observe(admin_link_img, 'click', linkClickListener);
		ToolTip.add(admin_link_img, '&nbsp;Link to this Page&nbsp;', {show: false, skin: "metal"} );
	},

	linkClick : function (event)
	{
		location.href = "http://www.switchvox.com/sv?cmd=screenshots&pic=" + (parseInt(this.current_pic_index) + 1);
	},

	arrowClick : function (event, direction)
	{
		var maxIndex = this.screenElements.length - 1;
		var nextIndex;
		
		if (direction == 'NEXT') {
			nextIndex = (maxIndex == this.current_pic_index) ? 0 : this.current_pic_index + 1;
		} else {
			nextIndex = (0 == this.current_pic_index) ? maxIndex : this.current_pic_index - 1;
		}
		this.navClicked(event, nextIndex);
	},

	navRoll : function(event, navItem, ssName)
	{	
		ToolTip.add(navItem,ssName);
	},

	navClicked : function(event, ssId)
	{
		this.screenElements[this.current_pic_index].nav.removeClassName('active');
		this.current_pic_index = ssId;
		this.screenElements[this.current_pic_index].nav.addClassName('active');
		var nextImage = this.imageCache[ssId].src;

		Effect.FadeOut(this.currentImageDiv,{queue:{position:'end',scope:'imgScope',limit:6}});
		Effect.SwitchAppearImg(this.currentImageDiv,{queue:{position:'end',scope:'imgScope',limit:6}},this.currentImage,nextImage);

		var nextTitle = this.screenElements[ssId].title;
		Effect.FadeOut(this.currentTitleSpan, {queue:{position:'end',scope:'titleScope',limit:6}});
		Effect.SwitchAppearTitle(this.currentTitleSpan,{queue:{position:'end',scope:'titleScope',limit:6}},nextTitle);
	},

	createElement : function(type, class_name, parent)
	{
		var el = document.createElement(type);
		if(typeof class_name != 'undefined')
		{
			el.className = class_name;
			el.origClassName = class_name;
		} 
		if (typeof parent != 'undefined')
		parent.appendChild(el);
		return el;
	},

	createInputElement : function (type,name,value,class_name,parent)
	{
		//IE fix
		try {
			var el = this.createElement('<input type="'+type+'"  name="'+name+'"  />',class_name,parent);
  		}
		catch(e) //ff only
		{
			var el = this.createElement('input',class_name,parent);
			el.setAttribute('type',type);
		}
		el.value = value;
		el.name = name;
		return el;
	},

	getRealPosition : function(element, coord)
	{
		var pos = (coord == 'x') ? element.offsetLeft : element.offsetTop;
		var tmp = element.offsetParent;
		while(tmp != null)
		{
			pos += (coord == 'x') ? tmp.offsetLeft : tmp.offsetTop;
			tmp = tmp.offsetParent;
		}
		return pos;
	},

	debug : function (msg)
	{
		if(typeof console == 'undefined')
			return;
		console.log(msg);
	},

	//dump flat object
	dump : function (e)
	{
		if(typeof console == 'undefined')
			return;
		console.log(Object.inspect(e));
	},

	//dump interactive object
	dumpObj : function(e)
	{
		if(typeof console == 'undefined')
			return;
		console.log('%1.o',e);
	}
}

Effect.FadeOut = function(element) {
  element = $(element);
  var oldOpacity = element.getInlineOpacity();
  var options = Object.extend({
  from: element.getOpacity() || 1.0,
  to:   0.0,
  afterFinishInternal: function(effect) {
	effect.element.style.visibility = 'hidden';
  }}, arguments[1] || {});
  return new Effect.Opacity(element,options);
}

Effect.SwitchAppearImg = function(element) {
  element = $(element);
  imgObj = arguments[2];
  nextImg = arguments[3];
  var options = Object.extend({
  from: 0.0,
  to:   1.0,
  // force Safari to render floated elements properly
  afterFinishInternal: function(effect) {
    effect.element.forceRerendering();
  },
  beforeSetup: function(effect) {
	imgObj.src = nextImg;
    effect.element.setOpacity(effect.options.from).show();
	effect.element.style.visibility = 'visible';
  }}, arguments[1] || {});
  return new Effect.Opacity(element,options);
}

Effect.SwitchAppearTitle = function(element) {
  element = $(element);
  nextTitle = arguments[2];
  var options = Object.extend({
  from: 0.0,
  to:   1.0,
  // force Safari to render floated elements properly
  afterFinishInternal: function(effect) {
    effect.element.forceRerendering();
  },
  beforeSetup: function(effect) {
	element.innerHTML = nextTitle;
    effect.element.setOpacity(effect.options.from).show();
	effect.element.style.visibility = 'visible';
  }}, arguments[1] || {});
  return new Effect.Opacity(element,options);
}