var Tour = new Class({

    'options' : { 
		'name' 		: 'tour-bp'
	},
    
    initialize : function(slides, options) {
    
        if(window.ie8)
            return;
            
        if(slides.length == 0)
            return;

		if (typeof(localStorage) == 'undefined')
			return;

		this.setOptions(options);

		if(parseInt(localStorage[this.options.name]) == 1)
			return;

        this.slides         = [];
        this.fx             = new Fx.Scroll();
        this.animating      = false;
        this.activeSlide    = 0;
      
        var self 	= this;
        var index 	= 0;

        slides.each(function() {
	
			if(!$(this[0]))
				return;
				
            self.slides.push(new Tour.Slide(index, self, this[0], this[1]));

			index++;
        });

		if(this.slides.length == 0)
			return;
			
        this.slideContainer = $C('div', { 'id' : 'tour-slide-container' }).injectIn(document.body);
        
        this.slides[this.activeSlide].show();

		window.addEvent('keyup', function(event) {
			
			if(event.code == 27)
				self.finish();
		});

        window.addEvent('resize', function() { self.slides[self.activeSlide].render(); self.slides[self.activeSlide].show();  });
        window.addEvent('reflow', function() { self.slides[self.activeSlide].render(); self.slides[self.activeSlide].show();  });

		return this;
    },
    
    showPrevious : function() {

        if(this.animating)  
            return;
            
        if(this.activeSlide == 0)
            return;
            
        this.animating = true;
        
        this.slides[this.activeSlide].hide();
    
        this.activeSlide--;
    
        this.slides[this.activeSlide].show();
    },
    
    showNext : function() {
    
        if(this.animating)
            return;
            
        this.animating = true;
        
        if(this.activeSlide == this.slides.length - 1) {
        
            this.finish();
            return;
        }
        
        this.slides[this.activeSlide].hide();
        
        this.activeSlide++;
        
        this.slides[this.activeSlide].show();
    },
    
    finish : function(dontRemember) {
    
        this.slides && this.slides[this.activeSlide] && this.slides[this.activeSlide].hide();

		this.slideContainer && this.slideContainer.getParent() && this.slideContainer.remove();
		
        if(!dontRemember)
    		localStorage[this.options.name] = 1;
    }

}).implement(new Options);

Tour.Slide = new Class({

    initialize : function(index, parent, element, content) {
    
        this.tour       = parent;
        this.index      = index;
        this.content    = content;
        this.heading    = 0; // 0: UP 1: RIGHT 2: BOTTOM 3: LEFT
        this.elements   = { 'anchor' : element };
        this.styles     = {
        
			'prevNext'	: {
				
                'font-size'         : '13px',
				'color'				: '#94030A',
                'text-decoration'   : 'none',
                'position'          : 'absolute',
                'bottom'            : '30px'
			},
			
            'canvas'    : {
            
                'margin_top'        : 24,
                'margin_bottom'     : 24,
                'margin_left'       : 7,
                'margin_right'      : 7,
                'top'               : 24.5,
                'left'              : 7.5,
                'border_radius'     : 0,
                'anchor_height'     : 14,
                'pi'                : Math.PI
            },
            
            'container' : { 
                'width'     : 200,
                'left'      : 0,
                'top'       : 0,
                'padding'   : '46px 32px 38px 32px'
            },
            
            'previous'  : { 'left'  : 25 },
            'next'      : { 'right' : 25 }
        };
    },
    
    show : function() {
            
        if(!this.elements.container)
            this.render();
      
        this.fx.start(0, 1);
    },

    clearElements : function() {
        
        this.elements.container && this.elements.container.remove();
        this.elements.div && this.elements.div.remove();
        this.elements.aPrev && this.elements.aPrev.remove();
        this.elements.aNext && this.elements.aNext.remove();
        this.elements.aDone && this.elements.aDone.remove();
        this.elements.canvas && this.elements.canvas.remove();
    },
    
    hide : function() { this.elements.container && this.fx.start(1, 0); },

    render : function() {

        var html    = '';
        var self    = this;
        var oldleft = this.styles.canvas.left;
        
        this.clearElements();

        this.elements.container = $C('div').setStyles({
            'min-width'     : this.styles.container.width + 'px',
			'max-width'		: 250,
            'min-height'    : '50px',
            'position'      : 'absolute',
            'z-index'       : 9991,
            'padding'       : this.styles.container.padding,
            'opacity'       : 0
        }).injectIn(this.tour.slideContainer);
        
        this.elements.div = $C('div').setStyles({
            'margin-bottom' : '20px',
			'font-size'		: '14px',
			'line-height'	: '18px',
			'color'			: '#444'
        }).setHTML(this.content).injectIn(this.elements.container);
    
        var windowWidth         = window.getWidth();
        var windowHeight        = window.getHeight();
        var position            = this.elements.anchor.getPosition();

        if(position.x + parseInt(this.elements.anchor.getStyle('width')) < this.styles.container.width) {
       
            this.elements.container.setStyle('padding', '40px 32px 46px');
            this.styles.container.left      = position.x + this.elements.anchor.offsetWidth + this.styles.canvas.anchor_height;
            this.styles.container.top       = position.y + this.elements.anchor.offsetHeight /2 - this.elements.container.offsetHeight / 2;
            this.heading                    = 3;
            this.styles.canvas.left         += 7;
            this.styles.next.right          = 15;
            
        } else if(position.x > windowWidth - this.styles.container.width && position.y > this.elements.container.offsetHeight / 2) {
        
            this.elements.container.setStyle('padding', '50px 32px 46px 15px');
            this.styles.container.left      = position.x - this.elements.container.offsetWidth;
            this.styles.container.top       = position.y + this.elements.anchor.offsetHeight /2 - this.elements.container.offsetHeight / 2;
            this.heading                    = 1;
            this.styles.canvas.left         -= 7;
            this.styles.next.right          = 35;
            this.styles.previous.left       = 10;

        } else if(position.y > windowHeight - this.styles.container.width) {
        
            this.styles.container.left      = position.x + this.elements.anchor.offsetWidth /2 - this.elements.container.offsetWidth / 2;
            this.styles.container.top       = position.y - this.elements.container.offsetHeight;
            this.heading                    = 2;
            
        } else {
        
            this.styles.container.left      = position.x + this.elements.anchor.offsetWidth /2 - this.elements.container.offsetWidth / 2;
            this.styles.container.top       = position.y + this.elements.anchor.offsetHeight;
            this.heading                    = 0;
        }
        
        this.elements.container.setStyles({
            'top'       : this.styles.container.top,
            'left'      : this.styles.container.left
        });

        if(this.index > 0) {
                
            this.elements.aPrev = $C('a', {
                'href'      : 'javascript:void(0);'
            }).setStyles({
                'left'              :  this.styles.previous.left + 'px'
            }).setStyles(this.styles.prevNext).setHTML('&laquo; Προηγούμενο').injectIn(this.elements.container).addEvent('click', function() {
                self.tour.showPrevious();
            });
        }
        
        if(this.tour.slides.length > 1) {
        
            this.elements.aNext = $C('a', {
                'href'      : 'javascript:void(0);'
            }).setStyles({
                'right'             : (this.styles.next.right - 5) + 'px'
            }).setStyles(this.styles.prevNext).setHTML((this.index < this.tour.slides.length - 1 ? 'Επόμενο &raquo;' : 'Τέλος')).injectIn(this.elements.container).addEvent('click', function() {
                self.tour.showNext();
            });
        }
        
        this.elements.aDone = $C('a', {
            'href'      : 'javascript:void(0);'
        }).setStyles({
            'position'              : 'absolute',
            'top'                   : '30px',
            'right'                 : (this.styles.next.right - 12) + 'px',
            'display'               : 'block',
            'text-indent'           : '-99999px',
            'margin-right'          : '7px',
            'width'                 : '15px',
            'height'                : '15px',
            'text-align'            : 'center',
            'line-height'           : '12px',
            'cursor'                : 'pointer',
            'background'            : 'transparent url("http://bestprice.gr/css/img/closer.png") no-repeat scroll center center'
        }).setHTML('close').injectIn(this.elements.container).addEvent('click', function() {
            self.tour.finish();
        });

        var width   = this.elements.container.offsetWidth;
        var height  = this.elements.container.offsetHeight;
        
        this.elements.canvas  = $C('canvas', {
            'width'     : width,
            'height'    : height       
        }).setStyles({
            'width'     : '100%',
            'height'    : '100%',
            'position'  : 'absolute',
            'top'       : 0,
            'left'      : 0,
            'z-index'   : -1
        }).injectIn(this.elements.container);

        if (window["G_vmlCanvasManager"])
            G_vmlCanvasManager.initElement(this.elements.canvas);

         width  -= 10.0 * 2;
         height -= this.styles.canvas.margin_top + this.styles.canvas.margin_bottom;

         var context = this.elements.canvas.getContext("2d");
         var anchor;
             
         anchor = width / 2 + 10.0;
        
         context.beginPath();
         context.arc(this.styles.canvas.left + this.styles.canvas.border_radius, this.styles.canvas.top + this.styles.canvas.border_radius, this.styles.canvas.border_radius, this.styles.canvas.pi, 3 * this.styles.canvas.pi / 2, false);

         if(this.heading == 0) {
          
             context.lineTo(anchor - 13.0, this.styles.canvas.top);
             context.lineTo(anchor, this.styles.canvas.top - this.styles.canvas.anchor_height);
             context.lineTo(anchor + 13.0, this.styles.canvas.top);
         }
         
         context.arc(this.styles.canvas.left + width - this.styles.canvas.border_radius, this.styles.canvas.top + this.styles.canvas.border_radius, this.styles.canvas.border_radius, 3 * this.styles.canvas.pi / 2, 0,  false);
         
         if(this.heading == 1) {
         
            context.lineTo(this.styles.canvas.left + width, this.styles.canvas.top + height /2 - 13.0 );
            context.lineTo(this.styles.canvas.left + width + this.styles.canvas.anchor_height, this.styles.canvas.top + height / 2);
            context.lineTo(this.styles.canvas.left + width, this.styles.canvas.top + height / 2 + 13.0);         
         }
         
         context.arc(this.styles.canvas.left + width - this.styles.canvas.border_radius, this.styles.canvas.top + height - this.styles.canvas.border_radius, this.styles.canvas.border_radius, 0, this.styles.canvas.pi / 2, false);

         if(this.heading == 2) {
         
             context.lineTo(anchor + 13.0, this.styles.canvas.top + height);
             context.lineTo(anchor, this.styles.canvas.top + height + this.styles.canvas.anchor_height);
             context.lineTo(anchor - 13.0, this.styles.canvas.top + height);
         }
             
         context.arc(this.styles.canvas.left + this.styles.canvas.border_radius, this.styles.canvas.top + height - this.styles.canvas.border_radius, this.styles.canvas.border_radius, this.styles.canvas.pi / 2, this.styles.canvas.pi, false);

         if(this.heading == 3) {
         
             context.lineTo(this.styles.canvas.left, this.styles.canvas.top + height /2 + 13.0 );
             context.lineTo(this.styles.canvas.left - this.styles.canvas.anchor_height, this.styles.canvas.top + height / 2);
             context.lineTo(this.styles.canvas.left, this.styles.canvas.top + height / 2 - 13.0);         
         }
         
         context.closePath();

         context.shadowOffsetX 	= 0.0;
         context.shadowOffsetY 	= 0.0;
         context.shadowBlur 	= 6.0;
         context.shadowColor 	= "rgba(0, 0, 0, 0.25)";

         context.fillStyle 		= "#FFFFDB";
         context.strokeStyle 	= "rgba(0, 0, 0, 0.3)";
         context.fill();
         context.stroke();
         
         this.styles.canvas.left = oldleft;
         
         this.fx = new Fx.Style(this.elements.container, 'opacity', { 
            'duration' : 300,
            'onComplete' : function() {
            
                self.tour.animating = false;
            }
        });

        //this.fx.start(0, 1);
    }
});