/*  Slide-fade show
 *
 *  jQuery is used.
 *  Description: show the images with fade effect
*/

function AFadeShow()
{
    this.created = false;
    
    this.container = null;
    this.navigator = null;
    
    this.box1 = null; //slide 1
    this.box2 = null; //slide 2
    this.box3 = null; //fade selected
    
    this.lastSlidedBox = null;
    this.lastFadedIdx = null;
    
    this.animateIsRunning = false;
    this.fadingIsRunning = false;
    this.allowBreaking = false;
    
    this.parentId = null;
    this.parent = null;
    
    this.items = [];
    this.currentItem = 0;
    
    this.timer = null;
    
    this.debugBox = null;
    
    this.options = {
        container_width: 1002,
        container_height: 368,
        container_background: "#fff",
        navigator_position_top: 341,
        navigator_width: "auto",
        navigator_height: 16,
        navigator_space1: 0, /* space between left container's side and left navigator's side */
        navigator_space2: 18, /* space between navigator rectangles */
	navigator_bar_color: "transparent",
        navigator_color_inactive: "#e2e1df",
        navigator_color_active: "#a089c1"
    };
    
    /*
        structure is: [ {image_url:'',{slide_time:'',link_url:'',link_target:'',title:''}, ... ]
        title - ALT-text for the rectangles
    */
    this.addItems = function( items )
    {
        if( items && items.length > 0 )
        {
            for( var i=0; i<items.length; i++ )
            {
                if( items[i].image_url )
                {
                    var item = {};
                    
                    item.image_url = (items[i].image_url)? items[i].image_url : null;
                    item.link_url = (items[i].link_url)? items[i].link_url : null;
                    item.link_target = (items[i].link_target)? items[i].link_target : null;
                    item.title = (items[i].title)? items[i].title : null;
                    item.slide_time = (items[i].slide_time)? items[i].slide_time : 3000;
                    item.loaded = false;
                        
                    this.items.push( item );
                }
            }
        }
    };
    
    this.create = function( parentId )
    {
        if( !this.created )
        {
            this.parentId = parentId;
            this.parent = $("#"+parentId);
            this.parent.html("");
            this.container = $("<div style='position:relative'></div>");
            this.container.css({
                'position': "relative",
                'overflow': "hidden",
                'width': this.options.container_width +"px",
                'height': this.options.container_height +"px",
                'background-color': this.options.container_background
            });
            this.parent.append( this.container );
            
            this.created = true;
            this.play();
        }
    };
    
    this.createNavigator = function()
    {
        if( this.items.length > 1 )
        {
            var t = this;
            if( this.navigator ) this.navigator.remove();
            
            var width = this.options.container_width - this.options.navigator_space1*2;
            
            this.navigator = $("<div style='position:absolute'></div>");
            this.navigator.css({
                'position': "absolute",
                'z-index': 100,
                'background-color': t.options.navigator_bar_color,
                'padding': "4px 0px",
                'left': this.options.navigator_space1 +"px",
                'top': this.options.navigator_position_top +"px",
                'width': width +"px",
                'height': this.options.navigator_height +"px"
            });
            this.container.append( this.navigator );

            var bWidth = Math.ceil( ( width - (this.items.length-1)*this.options.navigator_space2 ) / this.items.length );
            
            for( var i=0; i<this.items.length; i++ )
            {
                if( i>0 ) this.navigator.append( $("<div style='clear:none;float:left;width:"+ this.options.navigator_space2 +"px';height:"+ this.options.navigator_height +"px>&nbsp;</div>") );
                
                var w = ( i==this.items.length-1 )? width - (this.items.length-1)*this.options.navigator_space2 - bWidth*(this.items.length-1) : bWidth;
                var block = $("<div style='clear:none;float:left' />");
               
                block.attr("id",i);
                block.css({
                    'cursor': "pointer",
                    'width': w +"px",
                    'height': this.options.navigator_height +"px"
                });

                block.bind( "mouseover", { "block": block, "title": this.items[i].title, "idx": i }, function(event){
                    var mo_start = $("<div />");
                    mo_start.attr( "id", "mo_id_"+ event.data.idx + "start");
                    mo_start.css({
                        'position': "absolute",
                        'oveflow': "hidden",
                        'padding': "0px 0 0 0px",
                        'margin': "0px",
//                        'background-color': t.options.navigator_color_active,
                        'background-image': "url(images/fader_btn_popup_left.png)",
                        'left': event.data.block.position().left +"px",
                        'top': event.data.block.position().top-12 +"px",
                        'width': "3px",
                        'height': "20px"
                    });
                    var mo = $("<div style='position:absolute'></div>");
                    mo.attr( "id", "mo_id_"+ event.data.idx );
                    mo.css({
                        'position': "absolute",
                        'oveflow': "hidden",
                        'cursor': "pointer",
//                        'background-color': t.options.navigator_color_active,
                        'background-image': "url(images/fader_btn_popup.png)",
                        'font-family': "Arial",
                        'font-size': "12px",
                        'font-weight': "bold",
                        'color': "#fff",
                        'text-align': "left",
                        'padding': "0px 0 0 0px",
                        'margin': "0px",
                        'overflow': "hidden",
                        'left': (event.data.block.position().left + 3) +"px",
                        'top': event.data.block.position().top-12 +"px",
                        'width': event.data.block.width()-6 +"px",
                        'height': 20 +"px"
                    });
                    mo.html( event.data.title );
                    var mo_end = $("<div />");
                    mo_end.attr( "id", "mo_id_"+ event.data.idx + "end");
                    mo_end.css({
                        'position': "absolute",
                        'oveflow': "hidden",
                        'padding': "0px 0 0 0px",
                        'margin': "0px",
//                        'background-color': t.options.navigator_color_active,
                        'background-image': "url(images/fader_btn_popup_right.png)",
                        'left': (event.data.block.position().left + event.data.block.width()-3) +"px",
                        'top': event.data.block.position().top-12 +"px",
                        'width': "3px",
                        'height': "20px"
                    });

                    event.data.block.parent().append( mo_start );
                    event.data.block.parent().append( mo );
                    event.data.block.parent().append( mo_end );
  
/*                  
                    mo.bind( "mouseout", { "block": event.data.block }, function(event){
                        if( event.relatedTarget.id != this.id && event.relatedTarget.parentNode.id != this.id && event.relatedTarget.parentNode.parentNode.id != this.id && event.relatedTarget.parentNode.parentNode.parentNode.id != this.id )
                        {
                            $("#"+ this.id + "start").remove();
                            $("#"+ this.id ).remove();
                            $("#"+ this.id + "end").remove();
                        }
                    } );
*/
                    mo_start.bind( "mouseout", { "moStrID": "mo_id_"+ event.data.idx }, function(event){
                            $("#"+ event.data.moStrID + "start").remove();
                            $("#"+ event.data.moStrID ).remove();
                            $("#"+ event.data.moStrID + "end").remove();
                    } );
                    mo.bind( "mouseout", { "moStrID": "mo_id_"+ event.data.idx }, function(event){
                            $("#"+ event.data.moStrID + "start").remove();
                            $("#"+ event.data.moStrID ).remove();
                            $("#"+ event.data.moStrID + "end").remove();
                    } );
                    mo_end.bind( "mouseout", { "moStrID": "mo_id_"+ event.data.idx }, function(event){
                            $("#"+ event.data.moStrID + "start").remove();
                            $("#"+ event.data.moStrID ).remove();
                            $("#"+ event.data.moStrID + "end").remove();
                    } );

                    mo.bind( "click", { "currentItem": event.data.idx }, function(event){
                        if ( t.created )
                        {
                            clearTimeout(t.timer);
			    t.container.children().stop(true, false);
                            t.currentItem = event.data.currentItem;
                            t.play();
                        }
                    } );
                    
                    //replace the font
//                    Cufon.replace( mo, {
//                        fontFamily : 'DIN 1451 Std',
//                        hover: true
//                    } );
       
                } );
		var stl_ = "usual";
                if( this.currentItem == i ) {
//			block.css( "background-color", this.options.navigator_color_active );
			stl_ = "active";
		} else {
//			block.css( "background-color", this.options.navigator_color_inactive );
		}
//		block.html('<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="width: 3px;"><img src="images/fader_btn_bg_left_' + stl_ + '.png"></td><td style="background-image:url(images/fader_btn_bg_' + stl_ + '.png);"></td><td style="width: 3px;"><img src="images/fader_btn_bg_right_' + stl_ + '.png"></td></tr></table>');
		block.html('<div style="width: 3px; height: ' + this.options.navigator_height + 'px; float: left; background-image: url(images/fader_btn_bg_left_' + stl_ + '.png);" /><div style="width: ' + (w-6) + 'px; height: ' + this.options.navigator_height + 'px; float: left; background-image: url(images/fader_btn_bg_' + stl_ + '.png);" /><div style="width: 3px; height: ' + this.options.navigator_height + 'px; float: left; background-image: url(images/fader_btn_bg_right_' + stl_ + '.png);" />');
                
                this.navigator.append( block );
            }
        }
    };
    
    this.waitToPlay = function( th )
    {
        var t = th;
        if( t.animateIsRunning ) setTimeout( function() {t.waitToPlay(t);}, 200 );
        else t.play2();
    };
    
    this.waitToBreakPlay = function( th )
    {
        var t = th;
        if( t.allowBreaking )
        {
            t.animateIsRunning = true;
            setTimeout( function() {t.waitToBreakPlay(t);}, 100 );
        }
    };
    
    this.play = function()
    {
        if( this.created && this.items.length > 0 )
        {
            var t = this;
            this.container.children().remove();
            this.createNavigator();
            
            var currentItem = this.items[ this.currentItem ];
            var box = $("<div/>").css( {
                'position': "absolute",
                'z-index': 50,
                'top': 0,
                'left': 0
            } );

	    box.hide();

	    if( currentItem.link_url ) {
	            box.css( {
                	'cursor': "pointer"
	            } );
	            box.bind( "click", function(event){
			if (currentItem.link_target == "_self") {
				document.location = currentItem.link_url;
			} else {
				window.open(currentItem.link_url);
			}
	            });
	    }

            var img = $("<img src='"+ currentItem.image_url +"' border='0'/>").load(
		function(){
	                box.fadeIn( 1500, function(){
			    if (t.items.length > 1) {
				clearTimeout(t.timer); 
				t.timer = setTimeout( function() {
			                box.fadeOut( 800,
						function() {
				                    t.currentItem ++;
				                    if( t.currentItem >= t.items.length ) t.currentItem = 0;
				                    t.play();
				                }
					) 
				  }, currentItem.slide_time );
			     }
			} );
            }).error(function(){alert('error load image '+ currentItem.image_url);});
            box.append( img );
            this.container.append( box );
        }
    };
}