/**
 * Product Tour Framework
 * Author: Michael Bywaters
 * Date: 21st December 2011
 *
 * Requires: jQuery, tinybox.js
 */

    function Slide(width, height, html)
    {
	this._id = false;	// a slide's ID within the tour
	this._width = width;	// Slide's width, set on construct
	this._height = height;	// Slide's height, set on construct
	this._html = html;	// Slide's inner html, set on construct
	
	this.setId = function(id)
	{
	    this._id = id;
	}
	
	this.getLeftButton = function()
	{
	    var el = document.createElement("div");
	    el.className = "product-tour-button product-tour-button-left";
	    el.id = "slide-"+this._id+"-button-left";
	    var click = document.createElement("div");
	    click.className = "click";
	    el.appendChild(click);
	    return el;
	}
	
	this.getRightButton = function()
	{
	    var el = document.createElement("div");
	    el.className = "product-tour-button product-tour-button-right";
	    el.id = "slide-"+this._id+"-button-right";
	    var click = document.createElement("div");
	    click.className = "click";
	    el.appendChild(click);
	    return el;
	}
	
	this.getSlideElement = function(no_right)
	{
	    var el = document.createElement("div");
	    el.className = "product-tour-slide";
	    el.id = "slide-"+this._id;
	    el.style.display = ( this._id == 0 ? "block" : "none" );
	    el.setAttribute("data-slide-width", this._width);
	    el.setAttribute("data-slide-height", this._height);
	    el.style.height = this._height+"px";
	    var inner_el = document.createElement("div");
	    inner_el.innerHTML = this._html;
	    el.appendChild(inner_el);
	    if (this._id != 0) el.appendChild(this.getLeftButton());
	    if (!no_right) el.appendChild(this.getRightButton());
	    var wrap = document.createElement("div");
	    wrap.appendChild(el);
	    return wrap;
	}
	return true;
    }
    
    function ProductTour()
    {
	this._width;			// Tour default width
	this._height;			// Tour default height
	this._html;			// Tour HTML
	this._rebuilt = false;		// Flag to determine if the tour is current before launching
	this._slides = new Array();	// All of the tour's slide elements
	
	this.launchTour = function()
	{
	    if (this._rebuilt == false) this.rebuildTour();
	    TINY.box.show(this._html,0,this._width,this._height,1,'');
	    document.getElementById('tinycontent').style.padding = '0';
	    return true;
	}
	
	this.addSlide = function(w, h, _html)
	{
	    var slide = new Slide(w, h, _html);
	    this._slides.push(slide);
	    this._rebuilt = false;
	    return slide;
	}
	
	this.rebuildTour = function()
	{
	    var th = this;
	    th.clearHtml();
	    var i = 0;
	    th._slides.each(function(slide){
		if (i==0) {
		    th._width = slide._width;
		    th._height = slide._height;
		}
		slide.setId(i);
		var no_right = false;
		if (i == th._slides.length - 1) no_right = true;
		th.addHtml(slide.getSlideElement(no_right));
		i++;
	    });
	    th.wrapSlides();
	    th.addDots(i);
	    th._rebuilt = true;
	    return true;
	}
	
	this.wrapSlides = function()
	{
	    this._html = "<div class=\"slides-wrapper no-select\">"+this._html+"</div>";
	    return true;
	}
	
	this.addDots = function(count)
	{
	    this._html = this._html+"<div class=\"tour-dots-container no-select\"><div class=\"tour-dots\">";
	    for (i=0;i<count;i++) {
		this._html = this._html+"<div class=\"tour-dot"+( i==0 ? " current-tour-dot" : "" )+"\">&nbsp;</div>";
	    }
	    this._html = this._html+"</div></div>";
	    return true;
	}
	
	this.addHtml = function(slide)
	{
	    this._html = this._html + slide.innerHTML;
	    return true;
	}
	
	this.clearHtml = function()
	{
	    this._html = "";
	    return true;
	}
	
	this.rebuildTour();
	return true;
    }
    
    $j('.product-tour-button-left .click').live('click', function(){
	var slide = $j(this).closest('.product-tour-slide');
	slide.hide();
	var prev = slide.prev();
	prev.show();
	resizeBox(prev.closest('#tinybox'), prev.data('slide-width'), prev.data('slide-height'));
	$j(".current-tour-dot").removeClass("current-tour-dot");
	$j(".tour-dot").eq(prev.index()).addClass("current-tour-dot");
    });
    $j('.product-tour-button-right .click').live('click', function(){
	var slide = $j(this).closest('.product-tour-slide');
	slide.hide();
	var next = slide.next();
	next.show();
	resizeBox(next.closest('#tinybox'), next.data('slide-width'), next.data('slide-height'));
	$j(".current-tour-dot").removeClass("current-tour-dot");
	$j(".tour-dot").eq(next.index()).addClass("current-tour-dot");
    });
    
    function resizeBox(tinybox, width, height)
    {
	var oldw = tinybox.css('width');
	var oldh = tinybox.css('height');
	var oldl = tinybox.css('left');
	var oldt = tinybox.css('top');
	var left = parseInt(oldl.replace("px", "")) + ((parseInt(oldw.replace("px", "")) - width) / 2);
	var top = parseInt(oldt.replace("px", "")) + ((parseInt(oldh.replace("px", "")) - height) / 2);
	tinybox.css({
	    width: width,
	    height: height,
	    left: left+"px",
	    top: top+"px"
	});
	return true;
    }