//GETS A TUTORIAL USING AJAX
var getAjaxTutorial = new function(){
    
	this.ajax = new Ajax();

    this.timeoutThreshold = 5; // Seconds to wait for server response

	this.timeoutHand = null;
	
	this.targetURL = './ajax/tutorial_details.php';

    this.offsetfrommouse = [15, 15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset

    this.currentimageheight = 350;	// maximum image size.

    //STARTS POLLING THE SERVER - INITIAL POLLING IS STARTED ON-WINDOW-LOAD EVENT
    this.init = function( $tutorial_id ){

		var self = getAjaxTutorial;

		document.onmousemove = self.followmouse;
	
     	var url = self.targetURL + '?tID=' + $tutorial_id;//retrieve all messages with the user list . This action is performed when the page is freshly loaded.

        self.ajax.doGet( url, self.ResponseHandler, 'text' ); //we want TEXT returned.

        //SET TIMEOUT
		//self.timeoutHand = setTimeout( self.handleTimeout, self.timeoutThreshold * 1000 );
        
	}
	
    this.ResponseHandler = function( xml_file_as_text ) {
	    
		var self = getAjaxTutorial;

        //CREATE DOM DOCUMENT
		try{ //Internet Explorer
		  
			xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
			
			xmlDoc.async = "false";
			
			xmlDoc.loadXML( xml_file_as_text );
		
		} catch( e ) {
		  
			try { //Firefox, Mozilla, Opera, etc.
			
				parser = new DOMParser();
				
				xmlDoc = parser.parseFromString( xml_file_as_text,"text/xml" );
				
			} catch( e ) {
			  
				alert( e.message )
			
			}
		
		}

        if( typeof xmlDoc != 'undefined' ) {
            
			var root = xmlDoc.getElementsByTagName( 'root' );		

			for ( var i=0; i < root.length; i++ ) {
	
				//alert( self.getNodeValue( root[i], 'owner' ) )
                self.showtrail( root[i] )
		
			}

		} else {
			
			//alert( 'is null!' );

		}
	
	}

	this.handleTimeout = function() {
		
		var self = getAjaxTutorial;
		
		if( self.timeoutHand ) clearTimeout( self.timeoutHand );
		
		self.timeoutHand = null;
	
	};

	this.getNodeValue = function( obj, tag ) {
		
		return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
	
	}

	this.gettrailobj = function(){
		
		if ( document.getElementById ) {
		
			return document.getElementById( "trailimageid" ).style
		
		
		} else if( document.all ) {
		
			return document.all.trailimagid.style
		
		}
	
	}
	
	this.gettrailobjnostyle = function(){
		
		if ( document.getElementById ) {
		
			return document.getElementById( "trailimageid" )
		
		
		} else if( document.all ) {
		
			return document.all.trailimagid
		
		}
	
	}
	
	this.truebody = function(){
	
		return ( !window.opera && document.compatMode && document.compatMode != "BackCompat" ) ? document.documentElement : document.body

	}

	this.showtrail = function( $node ){
		
		var self = getAjaxTutorial;
		
		var $src =  './tutorials/' + self.getNodeValue( $node, 'tutorial_id' ) + '/f.' + self.getNodeValue( $node, 'img_ext' );
		
		newHTML =  '<table cellpadding="0" cellspacing="0" style="width:320px; background:#ffffff; font-size:1.7em;" border="0">'
		newHTML += '<tr>'
		newHTML += '    <td colspan="2">'
		newHTML += '        <div style="background:#ff0000; color:#ffffff; font-size:1.1em; padding:.5em 1em; font-weight:bold;">' + self.getNodeValue( $node, 'title' ) + '</div>'
		newHTML += '    </td>'
   		newHTML += '</tr>'
		newHTML += '<tr>'
		newHTML += '    <td width="25%" style="text-align:center" valign="top">'
		newHTML += '        <div style="padding:.2em; text-align:center"><img align="left" src="' + $src + '" /></div>'
		newHTML += '    </td>'
		newHTML += '    <td width="75%" align="left">'
		newHTML += '    <div style="width:90%; overflow:hidden;">'
        newHTML += '        <div class="detail_hd"><strong>Artist:</strong>' + self.getNodeValue( $node, 'owner' ) + '</div>'
		newHTML += '        <div class="detail_hd"><strong>Uploaded:</strong>' + self.getNodeValue( $node, 'uploaded_date' ) + '</div>'
		newHTML += '        <div class="detail_hd"><strong>Hits:</strong>' + self.getNodeValue( $node, 'hits' ) + '</div>'
        newHTML += '        <div class="detail_hd"><strong>Steps:</strong>' + self.getNodeValue( $node, 'step_count' ) + '</div>'
		newHTML += '        <div class="detail_hd"><strong>Comments:</strong>' + self.getNodeValue( $node, 'comment_count' ) + '</div>'
		newHTML += '    </div>'
        newHTML += '    </td>'
 		newHTML += '</tr>'
		newHTML += '<tr>'
		newHTML += '    <td colspan="2">'
		newHTML += '        <div style="padding:0 1.5em 1.5em 1.5em;"><strong>Description:</strong>' + self.getNodeValue( $node, 'description' ).substr( 0, 420 ) + '&nbsp;...</div>'
		newHTML += '    </td>'
   		newHTML += '</tr>'
        newHTML += '</table>';

        self.gettrailobjnostyle().innerHTML = newHTML;

		self.gettrailobj().visibility = "visible";

    }
	
	this.hidetrail = function(){
		
		var self = getAjaxTutorial;

		//resetTrailTimeout()
		
		self.gettrailobjnostyle().innerHTML = " ";
		
		self.gettrailobj().visibility =  "hidden";
		
		document.onmousemove = "";
		
		//self.gettrailobj().left = "-500px"
	
	}
	
	this.followmouse = function( e ){

		var self = getAjaxTutorial;

        var xcoord = self.offsetfrommouse[0]
		
		var ycoord = self.offsetfrommouse[1]

        var docwidth = document.all ? self.truebody().scrollLeft + self.truebody().clientWidth : pageXOffset + window.innerWidth - 15
		
		var docheight = document.all ? Math.min( self.truebody().scrollHeight, self.truebody().clientHeight ) : Math.min( window.innerHeight )

        //if (document.all){
		//	gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
		//} else {
		//	gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
		//}
	
		if ( typeof e != "undefined" ) {
			
			if( docwidth - e.pageX < 380 ) {
				
				xcoord = e.pageX - xcoord - 400; // Move to the left side of the cursor
			
			} else {
			
		    	xcoord += e.pageX;
			
			}
			
			if( docheight - e.pageY < ( self.currentimageheight + 110 ) ){
             
			    ycoord += e.pageY - Math.max( 0, ( 110 + self.currentimageheight + e.pageY - docheight - self.truebody().scrollTop ) );
			
			} else {
			
		    	ycoord += e.pageY;
			
			}
	
		} else if( typeof window.event != "undefined" ){

            if ( docwidth - event.clientX < 380 ){
				
				xcoord = event.clientX + self.truebody().scrollLeft - xcoord - 400; // Move to the left side of the cursor
			
			} else {
			
			    xcoord += self.truebody().scrollLeft + event.clientX
			
			}
			if( docheight - event.clientY < ( self.currentimageheight + 110 ) ) {

                ycoord += event.clientY + self.truebody().scrollTop - Math.max( 0, ( 110 + self.currentimageheight + event.clientY - docheight ) );
			
			} else {
				
				ycoord += self.truebody().scrollTop + event.clientY;
			
			}
		}
	
		if( ycoord < 0 ) { 
		
		    ycoord = ycoord*-1; 
		
		}
		
		self.gettrailobj().left = xcoord + "px"
		
		self.gettrailobj().top = ycoord + "px"
	
	}

   	this.L = function( strNewImage ){
		
		document.images['MP'].src = strNewImage;
	
	}
	
    this.B = function( strNewImage, caption ){
		
		document.images['MP'].src = strNewImage;
	
    	document.getElementById("BB").innerHTML  =caption;
	
	}

}