/**
 *******************************************
 * $Id: videoCollection.js 189 2006-10-22 21:10:16Z gregbrown $
 * REVVER
 * Copyright 2006 REVVER, Inc.
 *
 * Author: Greg Brown, greg@onfocus.net
 * 
 * Description:
 *  The video collection is the main
 *  object that is used to draw thumbnails
 *  and show the videos to the users.
 * 
 * Modified January 2007 by Michael Foord for NineMSN
 * with permission of Revver, Inc.
 *******************************************
 */

/**
 *  We need an array to contain a reference to all the divs
 *  that we have on the page that are videoCollections
 *  This array is used so we can correctly process data
 *  that is returned from a call to the revver webservice.
 */
REVVER.widget.videoCollections = [];
REVVER.widget.videoIntervals = []; //hack for IE

/**
 *  The next var is the default values styles, search 
 *  criteria, etc. for the videoCollection widget.
 */
REVVER.widget.videoCollectionDefaults = {
    "display" : {
        "rows": 3,
        "cols": 1,
        "orientation": "horizontal",
        "title": "Revver Videos",
        "searchText": "customize",
        "styleRules": {
            // Style for the containing div
            "video-collection" : [{ "border" : "1px solid #ccc", "padding" : "5px 10px 0px 10px", "background-color" : "#fff" }],
            // Style for title at top of thumb strip
            "video-collection-title" : [{ "color": "#000", "font-family" : "tahoma", "font-size" : "19px", "margin" : "0px", "padding" : "0px", "text-align" : "center" }],
            // Style for td that contains the logo
            "logo-area" : [{ }],
            // Style for the div that contains all components in a thumbnail (title, image, other text)
            "thumb-div" : [{ "background-color" : "#fff", "margin" : "5px", "border-right": "1px solid #ccc", "border-bottom" : "1px solid #ccc", "padding" : "5px 10px 10px 10px" }],
            // Style for the thumbnail image itself
            "thumb-img" : [{ "border": "1px solid #fff", "margin" : "0px", "padding" : "0px" }],
            // Style for all text in a thumbnail except the title
            "thumb-text" : [{ "display" : "none" }],
            // Style for the thumbnail title
            "thumb-title" : [{ "color": "#666", "font-family" : "tahoma", "font-size" : "13px", "margin" : "0px 0px 5px 0px", "padding" : "0px" }],
            // Style for the "customize" link
            "customize-link" : [{ "color": "#02A0C3", "font-family" : "tahoma", "font-size" : "11px", "margin" : "0px", "padding" : "2px" }],
            // Style for the count line, eg. '1-3 of 2350'
            "count-text" : [{ "font-family" : "tahoma", "font-size" : "11px", "margin-top" : "0px", "text-align" : "center" }],
            // styles the revver logo
            "logo-image" : [{ "border" : "none" }],
            // styles the rss link
            "rss-image" : [{ "margin-right" : "10px", "border" : "none" }],
            // Style for lightbox title
            "lb-title" : [{ "font-family" : "tahoma", "font-size" : "19px", "text-align" : "left"}],
            // Style for lightbox close icon and possible text ( a span)
            "lb-close" : [{ "font-family" : "tahoma", "font-size" : "11px" }],
            // Style for normal lightbox text
            "lb-text" : [{ "font-family" : "tahoma", "font-size" : "13px", "margin-top" : "0px", "line-height" : "15px", "text-align" : "left" }],
            // Style for owner name in lightbox
            "lb-owner" : [{ "font-family" : "tahoma", "font-size" : "13px", "color" : "#ff3300" }],
            // Style for keyword list in lightbox
            "lb-keywords" : [{ "font-family" : "tahoma", "font-size" : "13px", "color" : "#00A0C8" }],
            // Style for the description of the movie in the lightbox
            "lb-description" : [{ "font-family" : "tahoma", "font-size" : "13px", "line-height" : "15px", "text-align" : "left" }],
            // Style for error messages
            "err-msg" : [{ "font-family" : "tahoma", "font-size" : "11px", "color": "red" }],                        
            // Customize-box styles
            "revver-searchBox-form" : [{ "font-family" : "tahoma", "font-size" : "13px"  }],
            "revver-searchBox-Label" : [{ "color": "#333", "font-family" : "tahoma", "font-size" : "17px" }],
            "searchBoxField" : [{ "font-family" : "tahoma", "font-size" : "13px", "padding" : "2px"  }],
            "radio-button" : [{  }],
            "searchBoxBtn" : [{ "font-size" : "11px", "width": "80px" }],
            "revver-searchBox-optionLabel" : [{ "font-family" : "tahoma", "font-size" : "13px" }],
            // Styles for the navigation arrow TD's
            "up-arrow-cell" : [{ "cursor": "pointer", "vertical-align" : "middle" }],
            "down-arrow-cell" : [{ "cursor": "pointer", "vertical-align" : "middle" }],
            "fwd-arrow-cell" : [{ "cursor": "pointer", "vertical-align" : "middle" }],
            "back-arrow-cell" : [{ "cursor": "pointer", "vertical-align" : "middle" }],
            // Style for disabled next/prev images
            "nextPrev-disabled" : [{ "-moz-opacity": "0.4", "cursor": "default" }],
			"overlay" : [{ "position": "absolute", "width": "200px", "height": "80px", "font-size": "smaller", "display":"none"}],
			"thumb-author-a":[{"font-family":"Trebuchet MS, Arial","font-size":"11px","color":"#0000FF","text-decoration":"none"}],
			'thumb-author-a:hover':[{"text-decoration":"underline"}]
        },
        "backarrow": REVVER.jsApiURL + "widget/back.gif",
        "fwdarrow": REVVER.jsApiURL + "widget/forward.gif",
        "uparrow": REVVER.jsApiURL + "widget/up.gif",
        "downarrow": REVVER.jsApiURL + "widget/down.gif",
        "logo": REVVER.jsApiURL + "widget/revver.gif",
        "logoLink": "http://www.revver.com/",
        "biglogo": REVVER.jsApiURL + "widget/revver-big.gif",
        "rsslogo": REVVER.jsApiURL + "widget/rss.gif",
        "closebutton": REVVER.jsApiURL + "widget/close.gif",
        "thumbWidth": 120,
        "thumbHeight": 90
    }
};

// define the class for the VideoCollection object
REVVER.widget.VideoCollection = Class.create();
REVVER.widget.VideoCollection.prototype = {

    // this method is called automatically when you say new VideoCollection()
    initialize:function(initParams)
    {
		// first we need to write a div and give it an id.
        var divId = "revverVC" + (new Date()).getTime() + Math.floor(Math.random()*20000);
        REVVER.widget.videoCollections[divId] = this;
        document.write('<table border="0" align="center"><tr><td><div id="' + divId + '" class="video-collection"></div></td></tr></table>');
        var element = $(divId);

        /**
         *  the callBack is very important.  this function must be able to 
         *  find the correct object to call with the json object.  the function
         *  itself should accept two parameters, json and elementId.
         *  the callBack will call the array item named array[elementId].processData
         */
        
		
        this.methodName = "open.video.find";
        this.callBack = "REVVER.widget.videoCollections['" + element.id + "'].processData";
        this.elementId = element.id || null; // an elementId is required
        this.mainDiv = element; // the main HTML container (probably a div)
        this.json = initParams; // The JSON data containing the query and other params

        this.vidArray = [];     // starts out blank
        // this.verbosity = 2;     // we need this to be static
        // this.verbosity will now be represented as an array of strings called returnFields
        this.verbosity = ['id','title','owner','author','status','ageRestriction','publicationDate','modifiedDate','url','quicktimeMediaUrl','description','keywords','duration','size','credits','thumbnailUrl','views','affiliateId'];
        this.thumbsshowing = false;
        this.count = true;      // we always want the count back
        this.resultsCount = 0;  // starts out as 0 -- no request has been made yet
        this.rawParams = "";
        
        // setup the display and criteria from the defaults if it's not passed in.
        this.json.display =  this.json.display || REVVER.widget.videoCollectionDefaults.display;
        this.json.criteria =  this.json.criteria || {};

        // Set up some convenience values
        this.rows = this.json.display.rows || REVVER.widget.videoCollectionDefaults.display.rows;
        this.cols = this.json.display.cols || REVVER.widget.videoCollectionDefaults.display.cols;
        this.orientation = this.json.display.orientation || REVVER.widget.videoCollectionDefaults.display.orientation;
        
        this.limit = this.rows * this.cols; // number of items to bring back in a gulp
        this.currOffset = 0; // Current offset for prev/next buttons

        // reset the customize style if we're using a collection
        // we cannot allow searching/sorting if a collection is being used
        if ( this.json.collection ) {
            // use the default styles if we don't have any passed in
            this.styles = this.json.display.styleRules || REVVER.widget.videoCollectionDefaults.display.styleRules;
            this.styles["customize-link"] = [{ "display" : "none" }];
        } else {
            // use the default styles if we don't have any passed in
            this.styles = this.json.display.styleRules || REVVER.widget.videoCollectionDefaults.display.styleRules;
        }
        
        // make sure we have a style set for each element
        var availableStyles = ['video-collection','video-collection-title','logo-area','thumb-div','thumb-img','thumb-text','thumb-title','customize-link','count-text','logo-image','rss-image','lb-title','lb-close','lb-text','lb-owner','lb-keywords','lb-description','err-msg','revver-searchBox-form','revver-searchBox-Label','searchBoxField','radio-button','searchBoxBtn','revver-searchBox-optionLabel','up-arrow-cell','down-arrow-cell','fwd-arrow-cell','back-arrow-cell','nextPrev-disabled', 'overlay'];
        for (var i=0; i<availableStyles.length;i++) {
            try {
                this.json.display.styleRules[availableStyles[i]] = this.json.display.styleRules[availableStyles[i]] || REVVER.widget.videoCollectionDefaults.display.styleRules[availableStyles[i]];
            }
            catch (e) {
            }
        }
        
        // now create the style manager with the final set of styles
        this.styleManager = new REVVER.util.StyleManager(this.styles);

        // set the default images if no images are passed in
        this.backarrow = this.json.display.backarrow || REVVER.widget.videoCollectionDefaults.display.backarrow;
        this.fwdarrow = this.json.display.fwdarrow || REVVER.widget.videoCollectionDefaults.display.fwdarrow;
        this.uparrow = this.json.display.uparrow || REVVER.widget.videoCollectionDefaults.display.uparrow;
        this.downarrow = this.json.display.downarrow || REVVER.widget.videoCollectionDefaults.display.downarrow;
        this.logo = this.json.display.logo || REVVER.widget.videoCollectionDefaults.display.logo;
        this.logoLink = this.json.display.logoLink || REVVER.widget.videoCollectionDefaults.display.logoLink;
        this.bigLogo = this.json.display.biglogo || REVVER.widget.videoCollectionDefaults.display.biglogo;
        this.rssLogo = this.json.display.rsslogo || REVVER.widget.videoCollectionDefaults.display.rsslogo;
        this.closeButton = this.json.display.closebutton || REVVER.widget.videoCollectionDefaults.display.closebutton;
				
        // set the title of the widget
        this.json.display.title = this.json.display.title || REVVER.widget.videoCollectionDefaults.display.title;
        
        // set the search text of the widget
        this.json.display.searchText = this.json.display.searchText || REVVER.widget.videoCollectionDefaults.display.searchText;
        this.orderBy = this.json.orderBy || [];
        this.options = this.searchParams();
        // set the criteria and collection params
        this.setCriteria(this.json.criteria, false);
        this.setCollection(this.json.collection, false);

        // setup the width of the thumbnails and the arrow controls
        this.thumbWidth = this.json.display.thumbWidth || REVVER.widget.videoCollectionDefaults.display.thumbWidth;
        this.thumbHeight = this.json.display.thumbHeight || REVVER.widget.videoCollectionDefaults.display.thumbHeight;
        this.upDownButtonWidth = this.json.display.upDownButtonWidth || false;
        this.upDownButtonHeight = this.json.display.upDownButtonHeight || false;
        this.lrButtonWidth = this.json.display.lrButtonWidth || false;
        this.lrButtonHeight = this.json.display.lrButtonHeight || false;

        // establish an array for the thumnail objects
        this.thumbs = [];   // Collection of individual thumbnail objects I contain
        
        // we have to make a request right away to fill the element with data
        this.requestData();
        
        return this;
    },
    
    setCriteria:function(criteria) {

       this.json.criteria = criteria;
        if ( criteria ) {
            this.methodName = "open.video.find";
            if (criteria.minAgeRestriction) {
                this.minAgeRestriction = criteria.minAgeRestriction;
            }
            this.json.query = [ criteria, this.verbosity, this.options ];

            // redo the request if we have a second argument and its value is true
            if (arguments[1]) this.requestData2();
        }
    },
    
    setCollection:function(collection) {
        this.json.collection = collection;
        if ( collection ) {
            this.methodName = "open.collection.collect";
            this.json.query = [ this.json.collection, this.verbosity, this.options ];
            this.styleManager.setStyleSelectorValue("customize-link", "display", "none");
            
            try {
                if ( this.isHorizontal() ) {
                    if (!this.json.display.styleRules["rss-image"]) {
                        this.styleManager.setStyleSelectorValue("rss-image", "display", "block");
                        this.styleManager.setStyleSelectorValue("rss-image", "margin-right", "10px");
                        this.styleManager.setStyleSelectorValue("rss-image", "border", "none");
                    }
                } else {
                    if (!this.json.display.styleRules["rss-image"]) {
                        this.styleManager.setStyleSelectorValue("rss-image", "display", "block");
                        this.styleManager.setStyleSelectorValue("rss-image", "margin-right", "5px");
                        this.styleManager.setStyleSelectorValue("rss-image", "border", "none");
                    }
                }
            }
            catch (e) {
            }
        } else {
            this.styleManager.setStyleSelectorValue("rss-image", "display", "none");
            this.json.query = [ this.json.criteria, this.verbosity, this.options ];
        }
        // redo the request if we have a second argument and its value is true
        if (arguments[1]) this.requestData2();
    },
    
    getCollectionRssLink:function() {
        var affiliate = "";
        if (this.json.affiliate) affiliate = "?affiliate=" + this.json.affiliate;
        return "http://api.revver.com/rss/collection/" + this.json.collection + affiliate;
    },
    
    isUsingCollection:function() {
        if ( this.json.collection ) return true;
        return false;
    },
    
    /***** sort a revver video collection *****/
	sortCollection:function(field,dir)
	{
		this.doClickTransition();
		if(this.isUsingCollection){
			this.options.orderBy=[field,!dir];
			this.setCollection(this.json.collection,true);
		}else{
			var e=this.json.criteria;
			e.orderBy=[field,!dir];
			this.setCriteria(e,true);
		}
		return !dir;
	},
	
    searchParams:function(offset){
		var ret={ "offset": offset || 0, "limit": this.limit, "count": this.count, "affiliate": this.json.affiliate};
		if(this.orderBy&&this.orderBy.length)
			ret.orderBy=this.orderBy;
		return ret;
    },
    
    setRows:function(rows) {
        this.rows = rows;
        this.limit = this.rows * this.cols; // number of items to bring back in a gulp
        this.currOffset = 0; // Current offset for prev/next buttons
    },
    
    setCols:function(cols) {
        this.cols = cols;
        this.limit = this.rows * this.cols; // number of items to bring back in a gulp
        this.currOffset = 0; // Current offset for prev/next buttons
    },
    
    isHorizontal:function() {
        if ( this.orientation == "horizontal" ) return true;
        return false;
    },
    
    emptyOuterDiv:function()
    {
        // Clear out any previous contents of main container
        var thisID = "";
        //thisID = "mainTable-" + this.elementId;
		//thisID = "contentsCell";
		//thisID = "thumb-table-" + this.elementId;
		thisID = "thumb-tbody-" + this.elementId;
        var elem = $(thisID);
        if (elem){
			//elem.runtimeStyle.display='none'
			var pNode=elem.parentNode;
			pNode.removeChild(elem);
			this.bottomRow_1.parentNode.removeChild(this.bottomRow_1);
			if (this.orientation == "vertical") {
			    this.bottomRow_2.parentNode.removeChild(this.bottomRow_2);
			}
        }
        this.thumbshowing=false;
    },

    createOuterContainer:function()
    {
        // Create a table to wrap everything in the div.
        this.outerTable = this.createTag(this.mainDiv, "table", "mainTable", null);
        //this.outerTable.setAttribute("border", "1");
        
        this.outerTbody = this.createTag(this.outerTable, "tbody", "mainTbody", null);
        
        // Create a row at the top to display title
        this.headerRow = this.createTag(this.outerTbody, "tr", "titleRow", "video-collection-title");
        this.titleCell = this.createTag(this.headerRow, "td", "titleCell", "video-collection-title");
        
        /*
        var title = document.createTextNode(this.json.display.title);
        this.titleCell.appendChild(title); 
		*/
		
        this.contentsRow = this.createTag(this.outerTbody, "tr", "contentsRow", null);
        this.contentsCell = this.createTag(this.contentsRow, "td", "contentsCell", null); 
        this.contentsCell.setAttribute("align", "center");

        // Make a table to contain all the contents
        this.contentTable = this.createTag(this.contentsCell, "table", "contentTable", null);        
        this.contentTbody = this.createTag(this.contentTable, "tbody", "contentTbody", null);
        
        // Create a new row at bottom to contain the logos etc.
        this.bottomRow = this.createTag(this.outerTbody, "tr", "bottomRow", null);
        this.bottomCell = this.createTag(this.bottomRow, "td", "bottomCell", null);
        // Make a table to contain bottom row information
        this.bottomTable = this.createTag(this.bottomCell, "table", "bottomTable", null);      
        this.bottomTable.setAttribute("width", "100%");
          
        this.bottomTbody = this.createTag(this.bottomTable, "tbody", "bottomTbody", null);
    },
    
    createBottomLine:function()
    {
        // Vertical and horizontal orientation have different bottom layouts
        if (this.orientation == "vertical") {
            // Vertical: 2 rows of 2 columns
            this.bottomRow_1 = this.createTag(this.bottomTbody, "tr", "bottomRow1", null);
            
            this.bottomCellRight1 = this.createTag(this.bottomRow_1, "td", "bottomCellRight1", null);
            this.bottomCellRight1.setAttribute("align", "right");            
            
            this.bottomRow_2 = this.createTag(this.bottomTbody, "tr", "bottomRow2", null);
            this.bottomCellLeft2 = this.createTag(this.bottomRow_2, "td", "bottomCellLeft2", null);
            this.bottomCellLeft2.setAttribute("align", "left");      
            
            var iconCell = this.createTag(this.bottomCellLeft2, "td", "revverLogoTd", null);
        	var logoLink = this.createTag(iconCell, "a", "revverLogoLink", null);
        	logoLink.setAttribute('href',this.logoLink);
        	logoLink.setAttribute('target','_blank');
        	logoLink.setAttribute('title',this.logoLink);
            var logo = this.createTag (logoLink, "img", "revverLogoImg", "logo-image");
            logo.setAttribute("src", this.logo);
            
            var rssCell = this.createTag(this.bottomRow_2, "td", "bottomCellRight2", null);
            rssCell.setAttribute("align", "right");
        	var rssLink = this.createTag(rssCell, "a", "revverRssLink", null);
        	rssLink.setAttribute('href', this.getCollectionRssLink());
        	rssLink.setAttribute('target', '_blank');

            var rss = this.createTag (rssLink, "img", "rssLogo", "rss-image");
            rss.setAttribute("src", this.rssLogo);

        }
        else {
            // Horizontal: One row of 5 cols. The outer 2 cols are spacers for alignment
            this.bottomRow_1 = this.createTag(this.bottomTbody, "tr", "bottomRow1", null);
            
            this.bottomCell2 = this.createTag(this.bottomRow_1, "td", "bottomCell2", null);
            this.bottomCell2.setAttribute("align", "left");
            this.bottomCell2.setAttribute("width", "20%");

        	var logoLink = this.createTag(this.bottomCell2, "a", "logoLink", null);
        	logoLink.setAttribute('href',this.logoLink);
        	logoLink.setAttribute('target','_blank');
        	logoLink.setAttribute('title',this.logoLink);
            var logo = this.createTag (logoLink, "img", "logo", "logo-image");
            logo.setAttribute("src", this.logo);
                  
            this.bottomCell3 = this.createTag(this.bottomRow_1, "td", "bottomCell3", null);
            this.bottomCell3.setAttribute("align", "center");
            var para = this.createTag (this.bottomCell3, "p", "pstuff", "count-text");
            var countText = document.createTextNode(this.makeCountLine());
            para.appendChild(countText); 
            var br1 = this.createTag (para, "br", "br1", null);
            
            var rssCell = this.createTag(this.bottomRow_1, "td", "bottomCell4", null);
            rssCell.setAttribute("width", "20%");
            rssCell.setAttribute("align", "right");
        	var rssLink = this.createTag(rssCell, "a", "revverRssLink", null);
        	rssLink.setAttribute('href', this.getCollectionRssLink());
        	rssLink.setAttribute('target', '_blank');
            var rss = this.createTag (rssLink, "img", "rssLogo", "rss-image");
            rss.setAttribute("src", this.rssLogo);
            
            this.bottomCell5 = this.createTag(this.bottomRow_1, "td", "bottomCell5", null);
            this.bottomCell5.setAttribute("width", this.lrButtonWidth);
            clear = this.createTag (this.bottomCell5, "img", "clear2", null);
            clear.setAttribute("src", REVVER.jsApiURL + "clear.gif");
            clear.setAttribute("width", this.lrButtonWidth);
        }
    },
    
    makeCountLine:function()
    {
        var start = this.currOffset + 1;
        var total = this.resultsCount; //this.vidArray.length + start - 1;
        if(!this.vidArray) return "";
        var end = this.vidArray.length + start - 1;
        if (end > total) end = total;
        var text = start.toString() + '-' + end.toString() + ' of ' + total.toString();
        return text;
    },
    
    /**
     * Uses contentTbody, thumbContainer, ros, cols to se up the outer div.
     * MUST instantiate thumbContainer, so the rest of the obj will work.
     */
    setupOuterDiv:function()
    {
        
        this.createOuterContainer();

        // Vertical orientation: back/forward buttons on top/bottom.
        // Horizontal orientation: back/forward buttons on left/right.
       
        var thisID = "";    // Work area for building ID strings
        
        // set the arrows to display: none if the this.resultsCount is <= this.limit
        if (this.resultsCount <= this.limit) {
            this.styleManager.setStyleSelectorValue("up-arrow-cell", "display", "none");
            this.styleManager.setStyleSelectorValue("down-arrow-cell", "display", "none");
            this.styleManager.setStyleSelectorValue("back-arrow-cell", "display", "none");
            this.styleManager.setStyleSelectorValue("fwd-arrow-cell", "display", "none");
        } else {
            this.styleManager.removeStyleSelectorValue("up-arrow-cell", "display");
            this.styleManager.removeStyleSelectorValue("down-arrow-cell", "display");
            this.styleManager.removeStyleSelectorValue("back-arrow-cell", "display");
            this.styleManager.removeStyleSelectorValue("fwd-arrow-cell", "display");
        }
        
        if (this.orientation == "vertical") {
            // VERTICAL
            // Set the style of the main video collection div
            Element.setStyle(this.elementId, this.styleManager.getStyle("video-collection"));
            
            this.prevArrowRow = this.createTag(this.contentTbody, "tr", "prevArrowRow", null);
            this.prevArrowCell = this.createTag(this.prevArrowRow, "td", "prevArrowDiv", "up-arrow-cell");
            this.prevArrowCell.setAttribute("align", "center");
            this.prevArrowCell.setAttribute("vAlign", "middle");

            this.prevArrowCell.onclick = this.onPrevClick.bindAsEventListener(this);

            if (this.currOffset > 0) {
                // Show prev arrow, only if there are previous contents.
                this.prevArrowCell.setAttribute("title", "Go to previous set");  
                var prevImg = this.createTag (this.prevArrowCell, "img", "up-img", null);
                prevImg.setAttribute("src", this.uparrow);
            }
            else {
                this.prevArrowCell.setAttribute("class", "up-arrow-cell");
                var prevClear = this.createTag (this.prevArrowCell, "img", "pclear-img", null);
                prevClear.setAttribute("src", this.uparrow);
                Element.setStyle(prevClear, this.styleManager.getStyle("nextPrev-disabled"));
                prevClear.style['filter'] = "alpha(opacity=40)"; // because IE blows
                this.upDownButtonHeight = prevClear.height;
                this.upDownButtonWidth = prevClear.width;
            }
            // Create the cell that contains the array of thumbnails
            this.thumbTr = this.createTag(this.contentTbody, "tr", "thumb-container-tr", null);
            this.thumbContainer = this.createTag(this.thumbTr, "td", "thumb-container-td", null);
            
			
            // Create the cell that contains the Next arrow
            this.nextArrowRow = this.createTag(this.contentTbody, "tr", "nextArrowRow", null);
            this.nextArrowCell = this.createTag(this.nextArrowRow, "td", "nextArrowDiv", "down-arrow-cell");
            this.nextArrowCell.setAttribute("align", "center");
            this.nextArrowCell.setAttribute("vAlign", "middle");
            
            if ((this.currOffset + this.limit) < this.resultsCount) {
                this.nextArrowCell.onclick = this.onNextClick.bindAsEventListener(this);
                this.nextArrowCell.setAttribute("title", "Go to next set");  
                var nextImg = this.createTag (this.nextArrowCell, "img", "down-img", null);
                nextImg.setAttribute("src", this.downarrow);
            }
            else {
                this.nextArrowCell.setAttribute("class", "down-arrow-cell");    
                var nextClear = this.createTag (this.nextArrowCell, "img", "nclear-img", null);
                nextClear.setAttribute("src", this.downarrow);
                Element.setStyle(nextClear, this.styleManager.getStyle("nextPrev-disabled"));
                nextClear.style['filter'] = "alpha(opacity=40)"; // because IE blows
                this.upDownButtonHeight = nextClear.height;
                this.upDownButtonWidth = nextClear.width;
            }
        }
        else {
            // HORIZONTAL
            Element.setStyle(this.elementId, this.styleManager.getStyle("video-collection"));
            // All are in one row, so create that row
            this.outerRow = this.createTag(this.contentTbody, "tr", "outerRow", null);

            this.prevArrowCell = this.createTag(this.outerRow, "td", "prevArrowDiv", "back-arrow-cell");
            this.prevArrowCell.setAttribute("align", "center");
            this.prevArrowCell.setAttribute("vAlign", "middle");
            this.prevArrowCell.onclick = this.onPrevClick.bindAsEventListener(this);

			if (this.currOffset > 0) {
                // Show prev arrow, only if there are previous contents.
                this.prevArrowCell.setAttribute("title", "Go to previous set");  
                var prevImg = this.createTag (this.prevArrowCell, "img", "back-img", null);
                prevImg.setAttribute("src", this.backarrow);            
            }
            else {
                this.prevArrowCell.setAttribute("class", "back-arrow-cell");
                var prevClear = this.createTag (this.prevArrowCell, "img", "pclear-img", null);
                prevClear.setAttribute("src", this.backarrow);
                Element.setStyle(prevClear, this.styleManager.getStyle("nextPrev-disabled"));
                prevClear.style['filter'] = "alpha(opacity=40)"; // because IE blows
                this.lrButtonHeight = prevClear.height;
                this.lrButtonWidth = prevClear.width;
            }
            
            // Create the cell that contains the array of thumbnails
            this.thumbContainer = this.createTag(this.outerRow, "td", "thumb-container-td", null);

			//add a div that sits over the top of the 
			//thumbnail strip, to 			
   			this.overlayDiv = this.createTag(this.thumbContainer, "div", "overlay-div", "overlay");

            // Create the cell that contains the Next arrow
            this.nextArrowCell = this.createTag(this.outerRow, "td", "nextArrowDiv", "fwd-arrow-cell");
            this.nextArrowCell.setAttribute("align", "center");
            this.nextArrowCell.setAttribute("vAlign", "middle");
            
            if ((this.currOffset + this.limit) < this.resultsCount) {
                this.nextArrowCell.onclick = this.onNextClick.bindAsEventListener(this);
                this.nextArrowCell.setAttribute("title", "Go to next set");  
                var nextImg = this.createTag (this.nextArrowCell, "img", "fwd-img", null);
                nextImg.setAttribute("src", this.fwdarrow);
            }
            else {
                this.nextArrowCell.setAttribute("class", "fwd-arrow-cell");    
                var nextClear = this.createTag (this.nextArrowCell, "img", "nclear-img", null);
                nextClear.setAttribute("src", this.fwdarrow);
                Element.setStyle(nextClear, this.styleManager.getStyle("nextPrev-disabled"));
                nextClear.style['filter'] = "alpha(opacity=40)"; // because IE blows
                this.lrButtonHeight = nextClear.height;
                this.lrButtonWidth = nextClear.width;
                
            }
        }

        this.createBottomLine();
    },
 
    createTag:function (myParent, tagType, idPrefix, className)
    {
        var tag = document.createElement(tagType);
        var thisID = idPrefix;  // Keep IDs distinct by main elementID
        
		if (this.elementId) {
            thisID += "-" + this.elementId;
        }
		
        tag.setAttribute("id", thisID);
        tag.setAttribute("class", className);
        if (myParent) {
            myParent.appendChild(tag);
        }
        
        if (className != null) {
            var thisStyle = this.styleManager.getStyle(className);
            if (thisStyle) {
                Element.setStyle(thisID, thisStyle);
            }
        }
        
        return tag;
    },
    
	//createTag2 seems to be identical to createTag...x
    createTag2:function (myParent, tagType, idPrefix, className)
    {
        var tag = document.createElement(tagType);
        var thisID = idPrefix;  // Keep IDs distinct by main elementID
        
		
        tag.setAttribute("id", thisID);
        tag.setAttribute("class", className);
        if (myParent) {
            myParent.appendChild(tag);
        }
        if (className != null) {
            var thisStyle = this.styleManager.getStyle(className);
            if (thisStyle) {
                Element.setStyle(tag, thisStyle);
            }
        }
        
        return tag;
    },
        
    createRadioButton:function(myParent, id, thisName, className) {
        
        var rdo = "";
        try {
            // Microsoft version:
            var str = "<input type=\"radio\" name=\"" + thisName + "\" >";
            rdo = document.createElement(str);
            rdo.setAttribute("id", id + '-' + this.elementId);
            if (myParent) {
                myParent.appendChild(rdo);
            }
            if (className != null) {
                rdo.setAttribute("class", className);
                var thisStyle = this.styleManager.getStyle(className);
                if (thisStyle) {
                    Element.setStyle2(rdo, thisStyle);
                }
            }
        }
        catch (e) {
            // Perfectly normal version:
            rdo = this.createTag2(myParent, "input", id, className);
            rdo.setAttribute('type', 'radio');
            rdo.setAttribute('name', thisName);
        }

        return rdo;
    },
    
    /**
     *  This calls the revver webservice api via the REVVER.util.jsonRequest object.
     *  (see connection/jsonRequest.js)
     */
    requestData:function()
    {
		this.createAndSendRequest();
    },

	/**
	 * This version modifies the callback function
	 * to processData2, which doesn't call the createOuterDiv method
	 * so we can swap out just the thumbnail strip and not the whole panel
	 */
   requestData2:function()
    {	
		this.callBack = "REVVER.widget.videoCollections['" + this.elementId + "'].processData2";
		this.createAndSendRequest();
    },
	
	createAndSendRequest:function()
	{
		this.params = "method=" + this.methodName;
        this.params += "&callback=" + escape(this.callBack);
        this.params += "&params=" + escape(this.json.query.toJSONString());

        var jsonRequestObj = new REVVER.util.jsonRequest(this);

        jsonRequestObj.send();
        jsonRequestObj = null;
	},
	
	/**
     *  After the json request occurs it will route data to these methods.
     *  the actual processing of the information and creation of the widget 
     *  items starts here.
     *  Returned struct (array)
     *      Element 0 is the total count of items matching the query
     *      Element 1 is the returned collection
     *          Each thumb is an array element (from 0)
     */
	
	processData:function(json)
    {
		this.reportErrors(json);
        
        this.vidArray = json[1]; // this json data may be needed more than once so i'm setting it into the object
        this.resultsCount = json[0];

        // Clear out any previous contents of main container
        this.emptyOuterDiv();
        // Create the outer container
        this.setupOuterDiv();
		//create thumbs container
		this.thumbTable = this.createTag(this.thumbContainer, "table", "thumb-table", null);
		
        this.createThumbStrip(json);

        // Lightbox is the stuff that comes up when a thumb is selected.
        //initLightbox();
    },
	
	processData2:function(json)
	{
		this.reportErrors(json);
        
        this.vidArray = json[1]; // this json data may be needed more than once so i'm setting it into the object
        this.resultsCount = json[0];

        // Clear out any previous contents of thumbnail div
		//prevent DOM changes from causing elements to flicker by constraining their width
		var thumbStrip = 'thumb-table-' + this.elementId;
		var container = 'thumb-container-td-' + this.elementId;					

		$(thumbStrip).setAttribute("width", $(thumbStrip).offsetWidth)
		$(thumbStrip).setAttribute("height", $(thumbStrip).offsetHeight)
		$(container).setAttribute("width", $(thumbStrip).offsetWidth)
		$(container).setAttribute("height", $(thumbStrip).offsetHeight)
		this.emptyOuterDiv();
		this.createThumbStrip(json);
		this.createBottomLine();
		//get the last id of the last image so it can be used to register a listener
		//for the image onload event. Then can fade in when all images have been loaded
		var lastImageId = "vpic-img-" + this.thumbs[this.thumbs.length - 1].thumbData.id;
		//YAHOO.util.Event.addListener(lastImageId, "load", function(){this.showWidget(this.thumbTable)}, this, true)
		YAHOO.util.Event.addListener(lastImageId, "load", this.processImageLoadComplete, this, true)
		var self=this;
		this.safetyload=window.setTimeout(function(){self.processImageLoadComplete.apply(self);},2000);
	},
	
	processImageLoadComplete:function()
	{
		var overlay = 'overlay-div-' + this.elementId;
		element = $(overlay)
		element.style.display='none';
		if(!this.thumbshowing)
			this.showWidget(this.thumbTable,this.processFadeInComplete,this,true);
	},
	
	processFadeInComplete:function()
	{
		this.thumbshowing=true;
		window.clearTimeout(this.safetyload);
	},

	reportErrors:function(json)
	{
		if ( $("fault-error-" + this.elementId) ) $("fault-error-" + this.elementId).innerHTML = "";
        if (json.faultString) {
            this.mainDiv.innerHTML = "";
            var errMsg = this.createTag (this.mainDiv, "span", "fault-error", "err-msg");
            var text = document.createTextNode("Error returned from server: " + json.faultString);
            REVVER.log(text);
            errMsg.appendChild(text);
            return;
        }

        if ( $("nopics-error-" + this.elementId) ) $("nopics-error-" + this.elementId).innerHTML = "";
        if ((!json) || !(json[0]) || json[0] == 0 || json[1].length == 0) {
            this.mainDiv.innerHTML = "";
            var errMsg = this.createTag (this.mainDiv, "span", "nopics-error", "err-msg");
            var text = document.createTextNode("No videos match your search criteria.");
            REVVER.log(text);
            errMsg.appendChild(text);
            return;
        }
	},

	
	createThumbStrip:function(json)
	{
        this.thumbTbody = this.createTag(this.thumbTable, "tbody", "thumb-tbody", null);
        
        var rowNum = 0;
        var rowMax = this.rows;
        var colNum = 0;
        var colMax = this.cols;
        var i = 0;
        var item = "";
        if(!this.vidArray) return;
        for (rowNum = 0; rowNum < rowMax; rowNum++) {
            var idStr = "thumb-tr-" + rowNum;
            var thumbRow = this.createTag(this.thumbTbody, "tr", idStr, null);
            for (colNum = 0; colNum < colMax; colNum++) {
                if (i >= this.vidArray.length) break;
                var tdId = "thumb-td-" + colNum + "-" + rowNum;
                var thumbCol = this.createTag(thumbRow, "td", tdId, null);
                thumbCol.setAttribute("vAlign", "top");            
                
                this.addThumb(this.vidArray[i], thumbCol);
                i++;
            }
            if (i >= this.vidArray.length) break;
        }
	},
        
    /**
     *  Make a single thumbnail object here that can be inserted 
     *  into a container on the page.
     */
    addThumb:function(thumbData, thumbTd)
    {
        var thisThumb = new REVVER.widget.Thumbnail(thumbData, this, thumbTd);
        this.thumbs.push(thisThumb);
    },
    
    /*
     * Event handler for when the user clicks the "Previous set" button
     */
    onPrevClick:function()
    {
       if (this.currOffset > 0) {
			this.doClickTransition();
			this.currOffset -= this.limit;
			this.json.query[2].offset = this.currOffset;
			this.requestData();
       }
    },
    
    /*
     * Event handler for when the user clicks the "Next set" button
     */
    onNextClick:function()
    {
	    if ((this.currOffset + this.limit) < this.resultsCount) {
			
			this.doClickTransition();
			this.currOffset += this.limit;
            this.json.query[2].offset = this.currOffset;
            this.requestData2();
        }
    },
	
	doClickTransition:function()
	{
			var overlay = 'overlay-div-' + this.elementId;
			var spinner = 'overlay-wait-' + this.elementId;			
			var thumbStrip = 'thumb-table-' + this.elementId;
			var container = 'thumb-container-td-' + this.elementId;		
			
			//prevent DOM changes from causing elements to flicker by constraining their width
			$(thumbStrip).setAttribute("width", $(thumbStrip).offsetWidth)
			$(thumbStrip).setAttribute("height", $(thumbStrip).offsetHeight)
			$(container).setAttribute("width", $(thumbStrip).offsetWidth)
			$(container).setAttribute("height", $(thumbStrip).offsetHeight)
				//var showSpinner = function()	{
				//}
			$(overlay).innerHTML = '<p id="loadingPrompt">Loading...<img src="img/ajax_loader_small.gif" /></p>';
			$(overlay).style.display='block';
			this.fadeWidget(thumbStrip);
	},

	
	/*
	 * Used to fade any element using the YAHOO animation framework
	 */
	fadeWidget:function(widgetName, callback)
	{
		this.prepareAndCommenceFade(widgetName, 0, 0.3, callback);
	},
	
	/*
	 * Used to un-fade an element
	 */	
	showWidget:function(widgetName, callback)
	{
		this.prepareAndCommenceFade(widgetName, 1, 0.3, callback);
	},
	
	prepareAndCommenceFade:function(widgetName, toValue, fadeTime, callback)
	{
		var anim = new YAHOO.util.Anim(widgetName, { opacity: { to: toValue } }, fadeTime, YAHOO.util.Easing.easeOut);
		
		//if there is a callback function provided then register it
		if (typeof(callback) == "function")	{
			anim.onComplete.subscribe(callback);
		}

		anim.animate();
	},

    getAgeRating:function (rating)
    {
        switch (rating) {
            case "1":
                return "All Audiences";
            case "2":
                return "PG";
            case "3":
                return "PG13";
            case "4":
                return "R";
            case "5":
                return "NC17";
            default:
                return "Unknown";
        }
    }
};

/**
 *  This is the thumbnail class.  We'll create a new 
 *  object from the VideoCollection for each thumbnail 
 *  we find.  At this point this will likely have a 
 *  container itself so house the image, title, minutes, etc.
 */
REVVER.widget.Thumbnail = Class.create();
REVVER.widget.Thumbnail.prototype = {

    /*
     * This method is called automatically when you say new Thumbnail(thumbData).
     * thumbData is a branch of the incoming JSON response struct that contains
     * the data associated with one thumbnail.
     * myParent is the VideoCollection object that contains this thumbnail.
     */
    initialize:function(thumbData, myParent, parentTd)
    {
        this.parentContainer = myParent;    // This is a VideoCollection object.
        this.thumbData = thumbData;         // JSON data of one returned thumbnail
        this.styleManager = myParent.styleManager;
        this.orientation = myParent.orientation;
        this.parentTd = parentTd;
        this.parentId = myParent.elementId;
        this.render(thumbData);
    },
    
    getMovieType: function (url)
    {
        var dotPos = url.lastIndexOf('.');
        var ext = 'unk';
        if (dotPos != -1) {
            ext = url.substr(dotPos+1);
        }
        return ext;
    },
    
    onShowMovie: function ()
    {
        this.parentContainer.json.onShowMovie(this.thumbData, this.affiliateId);
        return false;
    },
    
    /**
     * Set up and display one thumbnail container, given the source data in
     * item. Item is a branch of the incoming JSON response struct that contains
     * the data associated with one thumbnail.
     * 
     */    
 

     render:function (item)
     {
        if (!item.id) return;   // No movie, no showee -- now no id no showee
        
        var affiliateId = item.affiliateId || 0;
        if (isNaN(affiliateId)) affiliateId = 0;
        this.affiliateId = affiliateId;

        var thisThumb = document.createElement("div");
        this.parentTd.appendChild(thisThumb);
        // Create the outer div for this thumb
        var thisID = "vthumb-" + item.id;
        // since the same video might came back in a search we 
        // need to ensure each one has a unique Id.
        if ($(thisID)) thisID += (new Date()).getTime() + Math.floor(Math.random()*10000);
        thisThumb.setAttribute("id", thisID);
        thisThumb.setAttribute("class", "thumb-div");
        Element.setStyle(thisID, this.styleManager.getStyle("thumb-div"));

        // Create an A tag to have an href. This A tag will be accessed by the lightbox
        // widget, so we populate it with all the text it needs, by setting custom attributes.
        this.anchor = this.createTag (item, thisThumb, "a", "vpic-a", null);
        this.anchor.setAttribute("href", item.id);

        // LightBox:
        if ( typeof(this.parentContainer.json.onShowMovie) != "function" ) {
            //exorcise lightbox
			this.anchor.setAttribute("rel", "lightbox");
        }
        this.anchor.setAttribute("caption", item.title);

        // Make the image tag and put it inside the A-tag.
        var paImage = this.createTag (item, this.anchor, "img", "vpic-img", "thumb-img");
        if (item.thumbnailUrl) {
			if(this.parentContainer.json.display.thumbsize){
				item.thumbnailUrl=item.thumbnailUrl.replace(/\/\d{1,4}x\d{1,4}\//i,"/"+this.parentContainer.json.display.thumbsize+"/");
			}
            paImage.setAttribute("src", item.thumbnailUrl);
            paImage.setAttribute("title", item.title);
        }
        else {
            paImage.setAttribute("src", REVVER.jsApiURL + "clear.gif");
        }
        
        // if we have a custom function for the showMovie then don't use the lightbox handler
        if ( typeof(this.parentContainer.json.onShowMovie) != "function" ) {
            // Pass some other data items via the a tag
            this.anchor.setAttribute("render", "REVVER.widget.videoCollections['" + this.parentId + "'].renderMovie('" + this.parentId + "','" + this.anchor.id + "'," + item.id + "," + affiliateId + ")");
        } else {
        	this.anchor.onclick = this.onShowMovie.bindAsEventListener(this);
        }

        if (item.owner) this.anchor.setAttribute("owner", item.owner);
        if (item.credits) this.anchor.setAttribute("credits", item.credits);
        if (item.keywords) this.anchor.setAttribute("keywords", item.keywords);
        if (item.description) this.anchor.setAttribute("description", item.description);
        if (item.rating && item.rating.average) this.anchor.setAttribute("rating", item.item.rating.average);
        if (item.views) this.anchor.setAttribute("views", item.views);
        if (this.parentContainer.json.query[0].minAgeRestriction) this.anchor.setAttribute("minAgeRestriction", this.parentContainer.json.query[0].minAgeRestriction);
        var movieWidth = 680;
        var movieHeight = 445;
        if (this.parentContainer.json.display.videoWidth) movieWidth = this.parentContainer.json.display.videoWidth;
        if (this.parentContainer.json.display.videoHeight) movieHeight = this.parentContainer.json.display.videoHeight;
        this.anchor.setAttribute("lightBoxWidth", movieWidth);
        this.anchor.setAttribute("lightBoxHeight", movieHeight);
        paImage.setAttribute("width", this.parentContainer.thumbWidth);
        paImage.setAttribute("height", this.parentContainer.thumbHeight);
        
        // Make a new para, sibling to pimage, to hold author
        if (item.author) {
            this.anchor.setAttribute("author", item.author);
            // Make a new para, sibling to pimage.
            var pAuthor = this.createTag (item, thisThumb, "div", "vpic-pauth", "thumb-text");
            var clipAuthor = this.clipString("by " + item.author);
            var authorText = document.createTextNode(clipAuthor);
            pAuthor.appendChild(authorText);
        }

        // Make a new para, sibling to pimage, to hold publication date/time
        if (item.publicationDate) {
            this.anchor.setAttribute("publicationDate", item.publicationDate);
            var pPDate = this.createTag (item, thisThumb, "div", "vpic-pdate", "thumb-text");
            var clipPdate = this.clipString(item.publicationDate);
            var pdateText = document.createTextNode(clipPdate);
            pPDate.appendChild(pdateText);
        }
        var ratingLine = "";
        if (item.views) {
            this.anchor.setAttribute("views", item.views);
            ratingLine += "Views: " + item.views + " ";
        }

        if (item.views) { //        if (item.views || item.rating.average) {
            var pRLine = this.createTag (item, thisThumb, "p", "vpic-prline", "thumb-text");
            var clipRline = this.clipString(ratingLine);
            var ratingText = document.createTextNode(clipRline);
            pRLine.appendChild(ratingText);
        }
        if (item.duration) {
            this.anchor.setAttribute("duration", item.duration);
            var pDLine = this.createTag (item, thisThumb, "p", "vpic-pdurline", "thumb-text");
            var durLine = this.clipString("Runtime: " + this.makeTimeString(item.duration));
            var durText = document.createTextNode(durLine);
            pDLine.appendChild(durText); 
        }
        // Make span inside the para
        if (item.title) {
            // Make a new para, sibling to pimage.
            var pTitle = this.createTag (item, thisThumb, "div", "vpic-ptitle", "thumb-title");
            var clipTitle = this.clipString(item.title);
            var titleText = document.createTextNode(clipTitle);
            pTitle.appendChild(titleText);
        }

        // Make span inside the para
        if (item.owner) {
			var divOwner = this.createTag (item, thisThumb, "div", "vpic-divowner", "thumb-byowner");
			
            var spanBy = this.createTag (item, divOwner, "span", "vpic-spanby", "thumb-by");
            var byText = document.createTextNode('by');
            spanBy.appendChild(byText);

            var spanOwner = this.createTag (item, divOwner, "span", "vpic-spanowner", "thumb-owner");
            var anchOwner = this.createTag (item, spanOwner, "a", "vpic-anchowner", "thumb-owner-a");
            anchOwner.setAttribute("href","/collection.aspx?srch=author&args="+item.owner);
            var clipOwner = this.clipString(item.owner);
            var ownerText = document.createTextNode(clipOwner);
            anchOwner.appendChild(ownerText);
        }
        
    },
    
    // Assuming tahoma x-small
    clipString: function(str)
    {
		var lenmax=17;
		var lenmin=12;
		var dotonspace=3;
		var outstr="";
		var pad=1;
		if(str.length>lenmax)
		{
			outstr=str.substring(0,lenmax+(1-dotonspace))
			var idx=outstr.lastIndexOf(' ');
			if(idx==-1||idx<lenmin)
			{
				idx=outstr.lastIndexOf('.');
			}
			if(idx==-1||idx<lenmin)
			{
				outstr=outstr.substring(0,lenmax-3)+"...";
			}
			else
			{
				outstr=outstr.substring(0,idx);
				if(dotonspace)
				{
					outstr+='...';
				}
			}		
		}		
		else
		{
			outstr=str;
		}
		return outstr
    },
    
    /*
     * Converts seconds into a string in the form H:MM:SS
     */
    makeTimeString: function(secs)
    {
        var hrs = Math.floor(secs / 3600);
        var mins = Math.floor(secs / 60);
        mins -= (hrs * 60);
        var rem = secs - ((hrs * 3600) + (mins * 60));
        var outStr = "";
        if (hrs > 0) outStr += hrs + ":";
        var minStr = "";
        if (mins < 10) minStr = "0";
        minStr += mins.toString();
        var secStr = "";
        if (rem < 10) secStr = "0";
        secStr += rem.toString();
        outStr += minStr + ":" + secStr;
        return outStr;
    },
    
    createTag:function (item, myParent, tagType, idPrefix, className)
    {
        var tag = document.createElement(tagType);
        var thisID = idPrefix + "-" + item.id;

        // since the same video might came back in a search we 
        // need to ensure each one has a unique Id.
        if ($(thisID)) thisID += (new Date()).getTime() + Math.floor(Math.random()*10000);

        tag.setAttribute("id", thisID);
        tag.setAttribute("class", className);
        if (myParent) {
            myParent.appendChild(tag);
        }
        
        if (className != null) {
            var thisStyle = this.styleManager.getStyle(className);
            if (thisStyle) {
                Element.setStyle(thisID, thisStyle);
            }
        }
        
        return tag;
    },

    
    createTag2:function (item, myParent, tagType, idPrefix, className)
    {
        var tag = document.createElement(tagType);
        var thisID = thisID = idPrefix + "-" + item.id;

        // since the same video might came back in a search we 
        // need to ensure each one has a unique Id.
        if ($(thisID)) thisID += (new Date()).getTime() + Math.floor(Math.random()*10000);

        tag.setAttribute("id", thisID);
        tag.setAttribute("class", className);
        if (myParent) {
            myParent.appendChild(tag);
        }
        
        if (className != null) {
            var thisStyle = this.styleManager.getStyle(className);
            if (thisStyle) {
                Element.setStyle(tag, thisStyle);
            }
        }
        
        return tag;
    }
};