Bug Tracker

Ticket #5510: videofinder.phtml

File videofinder.phtml, 48.4 KB (added by loganlee74, 10 years ago)

A PHP HTML file that serves up a search widget

Line 
1<?php $this->headScript()->captureStart() ?>
2
3<?
4        if ($this->item_id) {
5                $videoURL = $this->videoUrl('play',$this->videoType,$this->item_id,Academy_User::loggedIn(),$this->item_title);
6        } else {
7                $videoURL = $this->joinURL;
8        }
9?>
10
11$(document).ready(function(){
12  $.preloadCssImages();
13});
14
15jQuery.preloadImages = function() {   
16     for(var i = 0; i<arguments.length; i++)   
17    {
18          jQuery("<img>").attr("src", arguments[i]);   
19    }
20};
21
22$.preloadImages(
23"/images/global/widgets/ftpa-video-finder/arrow_block.png",
24"/images/global/widgets/ftpa-video-finder/arrow-blue.png",
25"/images/global/widgets/ftpa-video-finder/arrow-down.png",
26"/images/global/widgets/ftpa-video-finder/arrow-down-hover.png",
27"/images/global/widgets/ftpa-video-finder/arrow-left.png",
28"/images/global/widgets/ftpa-video-finder/arrow-left-hover.png",
29"/images/global/widgets/ftpa-video-finder/arrow-right-hover.png",
30"/images/global/widgets/ftpa-video-finder/arrow-up.png",
31"/images/global/widgets/ftpa-video-finder/arrow-up-hover.png",
32"/images/global/widgets/ftpa-video-finder/arrow-white.png",
33"/images/global/widgets/ftpa-video-finder/bg-dark-bl.png",
34"/images/global/widgets/ftpa-video-finder/bg-dark-br.png",
35"/images/global/widgets/ftpa-video-finder/bg-dark-tl.png",
36"/images/global/widgets/ftpa-video-finder/bg-dark-tr.png",
37"/images/global/widgets/ftpa-video-finder/books-large.png",
38"/images/global/widgets/ftpa-video-finder/books-small.png",
39"/images/global/widgets/ftpa-video-finder/box-head-tall-c.png",
40"/images/global/widgets/ftpa-video-finder/box-head-tall-l.png",
41"/images/global/widgets/ftpa-video-finder/box-head-tall-r.png",
42"/images/global/widgets/ftpa-video-finder/btn-lft.png",
43"/images/global/widgets/ftpa-video-finder/btn-rt.png",
44"/images/global/widgets/ftpa-video-finder/button-active.png",
45"/images/global/widgets/ftpa-video-finder/button-categories.png",
46"/images/global/widgets/ftpa-video-finder/button-hover.png",
47"/images/global/widgets/ftpa-video-finder/button-normal.png",
48"/images/global/widgets/ftpa-video-finder/button-pros.png",
49"/images/global/widgets/ftpa-video-finder/button-topic-hover.png",
50"/images/global/widgets/ftpa-video-finder/button-topic-normal.png",
51"/images/global/widgets/ftpa-video-finder/challenges-small.png",
52"/images/global/widgets/ftpa-video-finder/finder-bg.png",
53"/images/global/widgets/ftpa-video-finder/gradient-btn-cntr-rt.png",
54"/images/global/widgets/ftpa-video-finder/gradient-btn-left.png",
55"/images/global/widgets/ftpa-video-finder/gradient-button-bg.png",
56"/images/global/widgets/ftpa-video-finder/gradient-button-bg-off.png",
57"/images/global/widgets/ftpa-video-finder/gradient-button-bg-on.png",
58"/images/global/widgets/ftpa-video-finder/gradient-button-bg-selected.png",
59"/images/global/widgets/ftpa-video-finder/mag_arrow.png",
60"/images/global/widgets/ftpa-video-finder/mag_glass.png",
61"/images/global/widgets/ftpa-video-finder/mag-arrow.png",
62"/images/global/widgets/ftpa-video-finder/mag-glass.png",
63"/images/global/widgets/ftpa-video-finder/play.png",
64"/images/global/widgets/ftpa-video-finder/play_hover.png",
65"/images/global/widgets/ftpa-video-finder/podcasts-small.png",
66"/images/global/widgets/ftpa-video-finder/pros-small.png",
67"/images/global/widgets/ftpa-video-finder/recommended_box.png",
68"/images/global/widgets/ftpa-video-finder/red-submit-bg.png",
69"/images/global/widgets/ftpa-video-finder/red-submit-bg-active.png",
70"/images/global/widgets/ftpa-video-finder/red-submit-bg-hover.png",
71"/images/global/widgets/ftpa-video-finder/results-bg-color.png",
72"/images/global/widgets/ftpa-video-finder/results-bg-color-hover.png",
73"/images/global/widgets/ftpa-video-finder/right-bg.png",
74"/images/global/widgets/ftpa-video-finder/search-terms-bg.png",
75"/images/global/widgets/ftpa-video-finder/sessions-small.png",
76"/images/global/widgets/ftpa-video-finder/snl-small.png",
77"/images/global/widgets/ftpa-video-finder/sub_divider.gif",
78"/images/global/widgets/ftpa-video-finder/submit-bg.png",
79"/images/global/widgets/ftpa-video-finder/video-arrow.png"
80);
81
82$(document).ready(function(){
83        loadData.init();
84//      loadData.searchResults();
85        $('.util-new-search').removeAttr('href');
86        $('#video-search-ftpa-util span a').removeAttr('href');
87});
88
89var loadData = {
90
91        // maintain an array of selected ids for Pros and Categories
92        prosSelectedArray:false,
93        categorySelectedArray:false,
94       
95        // maintain an associative array of id / value for loaded values
96        prosArray:false,
97        categoryArray:false,
98        searchArray:false,
99       
100        prosAdded:false,
101        categoryAdded:false,
102       
103        prosAlsoMsg: '<?= addslashes($this->pro_also_msg) ?>',
104        categoryAlsoMsg: '<?= addslashes($this->category_also_msg) ?>',
105       
106        init: function() {
107                this.prosArray = new Array();
108                this.categoryArray = new Array();
109               
110                this.proName();
111                this.topics();
112        },
113       
114        searchResults: function() {
115                $('.match-results-text').text("");
116                $('.matched-results-items').css("left","0px");
117                $('.matched-results-items').empty();
118                //find all search terms
119                var params = '?start=1';
120                $('.added-search-terms name').each(
121                        function(i) {
122                                var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
123                                var regexp2 = / \[x\]/gi;
124                                var regexp3 = /,/gi;
125                                var text = $(this).html();
126
127                                text = text.replace(regexp,"");
128                                text = text.replace(regexp2,"");
129                                text = text.replace(regexp3,"");
130
131                                params = params + '&keywords[]=' + escape(text);
132                        }
133                );
134       
135                var url = "searchwidget/search/" + params;
136       
137                $.getJSON(url, function(data) {
138                                                                                                                                                         
139                        /* Parse JSON objects */
140
141                        jJSON["search"] = (function() {
142                                response = {
143                                        values: [],
144                                        count: 0
145                                };
146                                var $resultMatchDiv;
147                                var $formattedDiv;
148                                var proName;
149                                var videoTitle;
150                                var $videoTitleDiv;
151                                var $picDiv;
152                                var proPic;
153                                var bookIcon;
154                                var url;
155                                var sectionTitle;
156                                var bookPic;
157                                var numberMatch;
158                                var videoTypeIcon;
159                                var videoLink;
160                                $.each(data, function(i,item){
161                                        if (item.id != "undefined") {
162                                                response.count++;
163                                                response.values[i] = item.id;
164                                                proName = item.pro_name;
165                                                videoTitle = item.title;
166                                                proPic = item.thumb;
167                                                sectionTitle = item.video_type;
168                                                sectionTitleEn = item.video_type_en;
169                                                videoLink = item.link;
170                                                //alert(sectionTitle);
171                                       
172                                                switch(sectionTitleEn) {
173                                                        case 'pros': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/pros-small.png'); break;
174                                                        case 'lessons': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/books-small.png'); break;
175                                                        case 'sitandlearns': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/snl-small.png'); break;
176                                                        case 'challenges': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/challenges-small.png'); break;
177                                                        case 'sessions': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/sessions-small.png'); break;
178                                                        case 'podcasts': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/podcasts-small.png'); break;
179                                                        case 'deanstour': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/pros-small.png'); break;
180                                                        case 'insights': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/podcasts-small.png'); break;
181                                                        case 'announcements': videoTypeIcon = ('images/global/widgets/ftpa-video-finder/pros-small.png'); break;
182                                                        default: videoTypeIcon = ('images/global/widgets/ftpa-video-finder/pros-small.png'); break;
183                                                };
184                                       
185                                                $resultMatchDiv = $('<div class="match-'+i+'" id="video-matched-results" href="'+videoLink+'"></'+'div>');
186                                                $formattedDiv = $('<div class="formatted-results"><div class="results-inner"><span class="results-name">'+proName+'</'+'span><br/><span class="results-short-blurb">'+videoTitle+'</'+'span></'+'div></'+'div>');
187                                                $picDiv = $('<div class="results-video-link"><img class="results-pic" src="'+proPic+'" alt="Results Pic" /><img class="book" src="'+videoTypeIcon+'" alt="'+sectionTitle+'" /><a href="'+videoLink+'"><span class="circle-arrow" alt="Play" /></'+'a></'+'div>');
188                                                $videoTitleDiv = $('<div class="video-section-title">'+sectionTitle+'</'+'div>');
189                                                $(".matched-results-items").append($resultMatchDiv);
190                                                if (i > 4) {
191                                                        document.getElementById("scrollbar-results").style.display = 'block';
192                                                };
193                                                $resultMatchDiv.append($formattedDiv);
194                                                $resultMatchDiv.append($picDiv);
195                                                $resultMatchDiv.append($videoTitleDiv);
196                                        };
197                                });
198                                $(".match-results-text").append((response.count++) + " videos");
199                                //if (response.count <= 4) {
200                                        //$('#scrollRight-results').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
201                                //} else {
202                                //      $('#scrollRight-results').css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
203                                //}
204                                scrollResults(response.count);
205                                return response;
206                        })();
207                        /* Return a number of values for a given object */
208
209                        //alert( jJSON.getValues("search",null) );
210                });
211        },
212       
213        // Reactivating all the search term links after user clicks new search
214        reactivate_all_links:function(id, display, type) {
215                var proNameLink = '#pro-name-link-'+id;
216                var topicLink = '#topic-results-link-'+id;
217                $('.added-search-terms').empty();
218                $('.pro-name-link').css('color', '#ffffff');
219                switch (type) {
220                        case 'pro':
221                                $(proNameLink).each(function() {
222                                //alert(proNameLink);
223                                loadData.reactivate_link(id, display, 'pro');
224                                });
225                                break;
226                        case 'category':
227                                loadData.reactivate_link(id, display, 'category');
228                                break;
229                }
230        },
231       
232       
233        // Reactivating the search term link after removing from search box
234        reactivate_link:function(id, display, type) {
235                var proNameLink = '#pro-name-link-'+id;
236                var topicLink = '#topic-results-link-'+id;
237                switch (type) {
238                        case 'pro':
239                                $(proNameLink).bind("click", function() {
240                                        activateSearch();
241                                        $(proNameLink).css('color', '#666666');
242                                        loadData.add_display_item(id, display, 'pro');
243                                });
244                                break;
245                        case 'category':
246                                $(topicLink).bind("click", function() {
247                                        activateSearch();
248                                        $(topicLink).css('color', '#666666');
249                                        loadData.add_display_item(id, display, 'category');
250                                });
251                                break;
252                }
253        },
254       
255        remove_item:function(id, display, type) {
256                var proTagID = '#search-box-pro-'+id;
257                var topicTagID = '#search-box-topic-'+id;
258                var proTextID = "." + type + "-" + id;
259                var topicTextID = "." + type + "-" + id;
260                switch (type) {
261                        // Remove search term from search box
262                        case 'pro':
263                                $(document).ready(function() {
264                                        $(proTagID).bind("click", function() {
265                                                $('.pro-'+id).remove();
266                                                if ($('.added-search-terms').children().length == 0) {
267                                                        deactivateSearch();
268                                                }
269                                                $('#pro-name-link-'+id).css('color', '#ffffff');
270                                                loadData.reactivate_link(id, display, type);
271                                        });
272                                });
273                                break;
274                        // Remove search term from search box
275                        case 'category':
276                                $(document).ready(function() {
277                                        $(topicTagID).bind("click", function() {
278                                                $(topicTextID).remove();
279                                                if ($('.added-search-terms').children().length == 0) {
280                                                        deactivateSearch();
281                                                }
282                                                $('#topic-results-link-'+id).css('color', '#ffffff');
283                                                //alert(id);
284                                                loadData.reactivate_link(id, display, type);
285                                        });
286                                });
287                                break;
288                }
289        },
290       
291        add_display_item: function(id, display, type) {
292                var proTagID = 'search-box-pro-'+id;
293                // Add a close button to each search term
294                var removeProText = '<a id="'+proTagID+'" class="remove-search-term">[x]</'+'a>';
295                var displayProText = display + " " + removeProText + ", ";
296                var proTextID = type + "-" + id;
297                var displayProString = '<name class="'+proTextID+'">'+displayProText+'</name>';
298                var topicTagID = 'search-box-topic-'+id;
299                // Add a close button to each search term
300                var removeTopicText = '<a id="'+topicTagID+'" class="remove-search-term">[x]</'+'a>';
301                var displayTopicText = display + " " + removeTopicText + ", ";
302                var topicTextID = type + "-" + id;
303                var displayTopicString = '<name class="'+topicTextID+'">'+displayTopicText+'</name>';
304                switch (type) {
305                        case 'pro':
306                                // Add search term
307                                $('.added-search-terms').append(displayProString);
308                                autoScroll();
309                                loadData.remove_item(id, display, type);
310                                break;
311                        case 'category':
312                                // Add search term
313                                $('.added-search-terms').append(displayTopicString);
314                                loadData.remove_item(id, display, type);
315                                break;
316                }
317        },
318
319        add_item:function(id, display, type) {
320                var found = false;
321                switch (type) {
322
323                        case 'pro':
324                                found = jQuery.inArray(id, this.prosArray);
325                                if(found == -1) {
326                                        // This needs to be added to the array and the visual search box.
327                                        this.prosArray.push(id);
328                                        loadData.add_display_item(id,display,type);
329                                }
330                                break;
331                        case 'category':
332                                found = jQuery.inArray(id, this.categoryArray);
333                                if(found == -1) {
334                                        // This needs to be added to the array and the visual search box.
335                                        this.categoryArray.push(id);
336                                        loadData.add_display_item(id,display,type);
337                                }
338                                break;
339                }               
340        },
341       
342        proName:function(){
343
344                $.getJSON("searchwidget/pros", function(data) {
345
346                        /* Parse JSON objects */
347
348                        jJSON["pro_name"] = (function() {
349                                response = {
350                                        values: [],
351                                        count: 0
352                                };
353                                var $removeText;
354                                var $listReference;
355                                var $listDiv;
356                                var proNameLink;
357                                $.each(data, function(i,item){
358                                        if (item.pro_name != "undefined") {
359                                                if (i > 24) {
360                                                        document.getElementById("scrollbar-pros").style.display = 'block';
361                                                } else {
362                                                        document.getElementById("scrollbar-pros").style.display = 'none';
363                                                };
364                                                if (i % 5 == 0) {
365                                                        //alert(i);
366                                                var proNameId = item.pro_id;
367                                                response.count++;
368                                                response.values[i] = item.pro_name;
369                                                // Create a new list for 6 next items
370                                                $listReference = $('<ul id="pro-name-results-'+proNameId+'" class="pro-names"></'+'ul>');
371                                                // Create a container div for list
372                                                $listDiv = $('<div id="scroll_controls_proname_'+proNameId+'" class="hasContentProname"></'+'div>');
373                                                // append the div and list to the page DOM
374                                                $listDiv.append($listReference);
375                                                $('#ajax-returned-proname-content').append($listDiv);
376                                                };
377                                                var proNameId = item.pro_id;
378                                                var proName = item.pro_name;
379                                                var addProName = proName + ", ";
380                                                proNameLink = $('<li><a id="pro-name-link-'+proNameId+'" class="pro-name-link">'+proName+'</'+'a></'+'li>');
381                                                // Append list item to current list
382                                                /* append li to ul block */
383                                                $listReference.append(proNameLink);
384                                                if (i > 24) {
385                                                        document.getElementById("scrollbar-pros").style.display = 'block';
386                                                } else {
387                                                        document.getElementById("scrollbar-pros").style.display = 'none';
388                                                };
389                                                /* disable link after click */
390                                                proNameLink.bind("click", function() {
391                                                        activateSearch();
392                                                        //alert('here');
393                                                        $(".util-new-search").bind("click", function() {
394                                                        //      loadData.reactivate_all_links(item.pro_id, item.pro_name, 'pro');
395                                                                new_search();
396                                                                $('.pro-name-link').css('color', '#ffffff');
397                                                                $('.util-new-search').unbind('click');
398                                                                $('.video-search span.new-search-text a span').css('color','#666666');
399                                                        });
400                                                        $('.video-search span.new-search-text a span').css('color','#ffffff');
401                                                        $('.video-search span.new-search-text a span').hover(
402                                                                function() {
403                                                                        $(this).css("color", "#999999");
404                                                                },
405                                                                function() {
406                                                                        $(this).css("color", "#ffffff");
407                                                                }
408                                                        );
409                                                        //$('#pro-name-link-'+i).removeAttr('href');
410                                                        $('#pro-name-link-'+proNameId).css('color', '#666666');
411                                                        $('#pro-name-link-'+proNameId).unbind('click');
412                                                        loadData.add_item(item.pro_id, item.pro_name, 'pro');
413                                                });
414                                        };
415                                });
416                                return response;
417                        })();
418
419                        /* Return a number of values for a given object */
420
421                        //alert( jJSON.getValues("pro_name",null) );
422                });
423        },
424
425        videoTypes:function(){
426
427                $.getJSON("searchwidget/videotypes", function(data) {
428
429                        /* Parse JSON objects */
430
431                        jJSON["video_types"] = (function() {
432                                response = {
433                                        values: [],
434                                        count: 0
435                                };
436                                var $listReference;
437                                var $listDiv;
438                                var i;
439                                var videoTypeLink;
440                                $.each(data,function(i,item){
441                                        if (item != "undefined") {
442        //                                      alert(response.count);
443                                                if (response.count % 6 == 0) {
444        //                                              response.count++;
445        //                                              response.values[response.count] = item;
446                                                        i = response.count;
447                                                        // Create a new list for 6 next items
448                                                        $listReference = $('<ul id="video-types-results-'+i+'" class="video-types"></'+'ul>');
449                                                        // Create a container div for list
450                                                        $listDiv = $('<div id="scroll_controls_'+i+'" class="hasImage"></'+'div>');
451                                                        // append the div and list to the page DOM
452                                                        $listDiv.append($listReference);
453                                                        $('#ajax-returned-content').append($listDiv);
454                                                };
455
456                                                response.count++;
457                                                response.values[i] = item;
458                                                var videoTypes = item;
459                                                var addVideoTypes = videoTypes + ", ";
460                                                /* append li to ul block */
461                                                videoTypeLink = $('<li><a class="video-type-link'+i+'" href="#">'+videoTypes+'</'+'a></'+'li>');
462                                                $listReference.append(videoTypeLink);
463                                                /* disable link after click */
464                                                videoTypeLink.bind("click", function() {
465                                                        $('.video-type-link'+i).removeAttr('href');
466                                                        $('.video-type-link'+i).css('color', '#666666');
467                                                        $('.video-type-link'+i).unbind('click');
468                                                        $('.added-search-terms').append(addVideoTypes);
469                                                });
470                                        }
471                                });
472                                return response;
473                        })();
474
475                        /* Return a number of values for a given object */
476
477                        //alert( jJSON.getValues("video_types",null) );
478                });
479        },
480
481        topics:function(){
482
483                $.getJSON("searchwidget/topics", function(data) {
484
485                        /* Parse JSON objects */
486
487                        jJSON["topics"] = (function() {
488                                response = {
489                                        values: [],
490                                        count: 0
491                                };
492                                var $listReferenceTopics;
493                                var $listDivTopics;
494                                var topicResultsLink;
495                               
496                                $.each(data, function(i,item){
497                                        if (item.topic != "undefined") {
498                                        var topicId = item.topic_id;
499                                                if (i > 12) {
500                                                        document.getElementById("scrollbar-topics").style.display = 'block';
501                                                } else {
502                                                        document.getElementById("scrollbar-topics").style.display = 'none';
503                                                };
504                                                if (i % 5 == 0) {
505                                                        //alert(i);
506                                                        response.count++;
507                                                        response.values[i] = item.topic;
508                                                        // Create a new list for 6 next items
509                                                        $listReferenceTopics = $('<ul id="topics-results-'+topicId+'" class="video-topics"></'+'ul>');
510                                                        // Create a container div for list
511                                                        $listDivTopics = $('<div id="scroll_controls_topics_'+topicId+'" class="hasContentTopics"></'+'div>');
512                                                        // append the div and list to the page DOM
513                                                        $listDivTopics.append($listReferenceTopics);
514                                                        $('#ajax-returned-topics-content').append($listDivTopics);
515                                                };
516                                                var topicResults = item.topic;
517                                                var addTopicResults = topicResults + ", ";
518                                                // Append list item to current list
519                                                /* append li to ul block */
520                                                //alert($listReferenceTopics);
521                                        //      alert(topicResults);
522                                                topicResultsLink = $('<li><a id="topic-results-link-'+topicId+'" class="topic-results-link">'+topicResults+'</'+'a></'+'li>');
523                                        //              alert(topicResultsLink);
524                                                $listReferenceTopics.append(topicResultsLink);
525                                                // $('#topics-results-'+i).append(topicResultsLink);
526                                                /* disable link after click */
527                                                topicResultsLink.bind("click", function() {
528                                                        activateSearch();
529                                                        $('#topic-results-link-'+topicId).unbind('click');
530                                                        //$('#topic-results-link-'+i).removeAttr('href');
531                                                        $('#topic-results-link-'+topicId).css('color', '#666666');
532                                                        //$('#added-search-terms').append(addTopicResults);
533                                                        loadData.add_item(item.topic_id, item.topic, 'category');
534                                                });
535                                        };
536                                });
537                                return response;
538                        })();
539
540                        /* Return a number of values for a given object */
541
542                        //alert( jJSON.getValues("topics",null) );
543                });
544        }
545
546}
547
548
549var jJSON = {
550        getValues: function(obj,num) {
551                return jJSON[obj]["values"].slice(0,((num == null) ? jJSON[obj]["values"].length : num));
552        },
553    getCount: function(obj) {
554        return jJSON[obj]["count"];
555        }
556};
557
558$(function(){
559    var position = 0;
560
561    // move object right 600 regardless of current position
562    $('#scrollRight-pros').click(function(){
563        // animate regardless
564        // set right side boundaries
565        if (position != -1200){
566        position -= 600;
567        $('.ajax-pros-search-content').animate({'left': position}, 'slow');
568        }
569    });
570   
571    // enable scroll left if position is greater than 0
572    $('#scrollRight-pros').click(function(){
573        if (position != 0){
574                $('#scrollLeft-pros').css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left.png) left center no-repeat"});
575                        $('#scrollLeft-pros').hover(
576                                function() {
577                                        $(this).css({color:"#999999", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
578                                },
579                                function() {
580                                        $(this).css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left.png) left center no-repeat"});
581                                }
582                        );
583        }
584    });
585   
586    // enable scroll left if position is greater than 0
587    $('#scrollRight-pros').click(function(){
588        if (position == -1200){
589                $('#scrollRight-pros').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
590                        $('#scrollRight-pros').hover(
591                                function() {
592                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
593                                },
594                                function() {
595                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
596                                }
597                        );
598                }
599        });
600
601    // move object left 600px if not already at 0
602    $('#scrollLeft-pros').click(function(){
603        if (position != 0){
604            position += 600;
605            $('.ajax-pros-search-content').animate({'left': position}, 'slow');
606                $('.scroll-arrow-right').css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
607                        $('.scroll-arrow-right').hover(
608                                function() {
609                                        $(this).css({color:"#999999", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
610                                },
611                                function() {
612                                        $(this).css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
613                                }
614                        );
615        }
616    });
617   
618    // disable scroll left if position is at 0
619    $('#scrollLeft-pros').click(function(){
620        if (position == 0){
621                $('#scrollLeft-pros').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
622                        $('#scrollLeft-pros').hover(
623                                function() {
624                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
625                                },
626                                function() {
627                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
628                                }
629                        );
630        }
631    });
632});
633
634function scrollResults(value) {
635    var position = 0;
636        var total = value - 1;
637    var x = 4;
638    var totalResults = total / x;
639    var divLength = totalResults * 548;
640    var roundedNumber = Math.round(totalResults);
641    var scrollLength = roundedNumber * 548;
642    var correctLength = divLength - 548;
643    var totalLength = -correctLength;
644
645    // move object right 548px regardless of current position
646    $('#scrollRight-results').click(function(){
647        // setting right side bounds as well
648        if (position > totalLength){
649                        position -= 548;
650                        $('.matched-results-items').animate({'left': position}, 'slow');
651                        $('#scrollLeft-results').css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left.png) left center no-repeat"});
652                        $('#scrollLeft-results').hover(
653                                function() {
654                                        $(this).css({color:"#999999", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
655                                },
656                                function() {
657                                        $(this).css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left.png) left center no-repeat"});
658                                }
659                        )
660        }
661    });
662   
663    // disable right arrow when reaching end
664        $('#scrollRight-results').click(function(){
665        if (position <= totalLength){
666                        $('#scrollRight-results').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
667                        $('#scrollRight-results').hover(
668                                function() {
669                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
670                                },
671                                function() {
672                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
673                                }
674                        )
675                }
676        });
677
678    // move object left 548px if not already at 0
679    $('#scrollLeft-results').click(function(){
680        if (position != 0){
681            position += 548;
682            $('.matched-results-items').animate({'left': position}, 'slow');
683                        $('#scrollRight-results').css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
684                        $('#scrollRight-results').hover(
685                                function() {
686                                        $(this).css({color:"#999999", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
687                                },
688                                function() {
689                                        $(this).css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
690                                }
691                        )
692        }
693    });
694   
695    // disable right arrow when reaching end
696        $('#scrollLeft-results').click(function(){
697        if (position == 0){
698                        $('#scrollLeft-results').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
699                        $('#scrollLeft-results').hover(
700                                function() {
701                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
702                                },
703                                function() {
704                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
705                                }
706                        )
707                }
708        });
709};
710
711$(function(){
712    var position = 0;
713
714    // move object right 580px regardless of current position
715    $('#scrollRight-topics').click(function(){
716        // setting right side bounds as well
717                if (position != -1160){
718                position -= 580;
719                $('.ajax-topics-search-content').animate({'left': position}, 'slow');
720                }
721    });
722   
723    // enable scroll left if position is greater than 0
724    $('#scrollRight-topics').click(function(){
725        if (position != 0){
726                $('#scrollLeft-topics').css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left.png) left center no-repeat"});
727                        $('#scrollLeft-topics').hover(
728                                function() {
729                                        $(this).css({color:"#999999", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
730                                },
731                                function() {
732                                        $(this).css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left.png) left center no-repeat"});
733                                }
734                        );
735        }
736    });
737   
738    // enable scroll left if position is greater than 0
739    $('#scrollRight-topics').click(function(){
740        if (position == -580){
741                $('#scrollRight-topics').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
742                        $('#scrollRight-topics').hover(
743                                function() {
744                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
745                                },
746                                function() {
747                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
748                                }
749                        );
750                }
751        });
752
753    // move object left 580px if not already at 0
754    $('#scrollLeft-topics').click(function(){
755        if (position != 0){
756            position += 580;
757            $('.ajax-topics-search-content').animate({'left': position}, 'slow');
758                $('.scroll-arrow-right').css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
759                        $('.scroll-arrow-right').hover(
760                                function() {
761                                        $(this).css({color:"#999999", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right-hover.png) right center no-repeat"});
762                                },
763                                function() {
764                                        $(this).css({color:"#ffffff", background:"url(/images/global/widgets/ftpa-video-finder/arrow-right.png) right center no-repeat"});
765                                }
766                        );
767        }
768    });
769   
770    // disable scroll left if position is at 0
771    $('#scrollLeft-topics').click(function(){
772        if (position == 0){
773                $('#scrollLeft-topics').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
774                        $('#scrollLeft-topics').hover(
775                                function() {
776                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
777                                },
778                                function() {
779                                        $(this).css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
780                                }
781                        );
782        }
783    });
784});
785
786//var position = 0;
787function autoScroll(){
788//    var height = $("#wn").height();
789//    if (height > 41) {
790//              position -=17;
791//              $('#wn').animate({'top': position}, 'slow');
792//    }
793};
794
795$(function(){
796    var position = 0;
797       
798        // move object down 16px regardless of current position
799        $('#scrollDown').click(function(){
800        var cLength = $('.added-search-terms').text().length;
801        var height = $("#wn").height();
802        var winPos = position + height;
803                if (winPos > 41) {
804                // unless you're setting bottom bounds as well
805                position -= 17;
806                $('#wn').animate({'top': position}, 'slow');
807                } else {
808                position -= 0;
809                $('#wn').animate({'top': position}, 'slow');
810                }
811        });
812
813        // move object up 16px if not already at 0
814        $('#scrollUp').click(function(){
815                if (position != 0){
816                        position += 17;
817                        $('#wn').animate({'top': position}, 'slow');
818                }
819        });
820});
821
822function disableAnchor(obj,disable) {
823        if (disable) {
824                var href = obj.getAttribute("href");
825                if (href && href != "" && href != null) {
826                        obj.setAttribute('href_bak', href);
827                }
828                obj.removeAttribute('href');
829                obj.removeAttribute('onclick');
830                obj.style.color = "#ffffff";
831        } else {
832                obj.setAttribute('href', obj.attributes['href_bak'].nodeValue);
833                obj.style.color="#666666";
834        }
835}
836
837function new_search() {
838        $("name").remove();
839        $('.match-results-text').text("");
840        $('.matched-results-items').empty();
841        $('ajax-pros-search-content').empty();
842        $('ajax-topics-search-content').empty();
843        document.getElementById('scrollbar-pros').style.display = 'none';
844        document.getElementById('scrollbar-results').style.display = 'none';
845        document.getElementById('scrollbar-topics').style.display = 'none';
846        //loadData.proName();
847        //loadData.topics();
848        location.reload();
849}
850
851function add_width() {
852        var horiz = document.getElementById("ajax-returned-content");
853        var curr_width = parseInt(horiz.style.width); // removes the "px" at the end
854        horiz.style.width = (curr_width + 145) +"px";
855}
856
857function toggle(id) {
858        var widgetRight = "right-content";
859        var proTerms = "wn2";
860        var videoTypes = "wn3";
861        var topicTerms ="wn4";
862        var keywordTextbox = "wn5";
863        var videoResults = "wn6";
864        var prosButton = "gray-pros-button";
865        var videosButton = "";
866        var topicsButton = "";
867        var keywordsButton = "";
868        var scrollPros = "scrollbar-pros";
869        var scrollResults = "scrollbar-results";
870        var scrollTopics = "scrollbar-topics";
871        var findVideoBtn = "video-search-ftpa-util";
872       
873        $('.video-finder-hide').hide();
874        $('.video-search .split-box-left').css('backgroundImage','none');
875        $('.video-search .search-widget').css('backgroundImage','url(/images/global/widgets/ftpa-video-finder/finder-bg.png)');
876        $('.video-search .search-widget').css('height','271px');
877        $('.video-search .search-widget').css('width','892px');
878
879        switch (id) {
880
881        case 'pros':
882                                openFinder();
883                                document.getElementById(proTerms).style.display = 'block';
884                                document.getElementById(scrollPros).style.display = 'block';
885                                document.getElementById(findVideoBtn).style.display = 'block';
886                                $('.video-search span.pros-finder-button a span').css('background','url(/images/global/widgets/ftpa-video-finder/button-active.png)');
887                                $('.video-search span.video-finder-button a span').css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-normal.png)');
888                                $('.video-search span.video-finder-button a span').hover(
889                                        function() {
890                                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-hover.png)');
891                                                //$(this).css('color','#ffffff');
892                                        },
893                                        function() {
894                                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-normal.png)');
895                                                //$(this).css('color','#999999');
896                                        }
897                                );
898                                $('.video-search span.pros-finder-button a span').hover(
899                                        function() {
900                                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-active.png)');
901                                        },
902                                        function() {
903                                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-active.png)');
904                                        }
905                                );
906                        $('#scrollLeft-pros').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
907                                break;
908        case 'video_types':
909                                openFinder();
910                                document.getElementById(videoTypes).style.display = 'block';
911                                break;
912        case 'topics':
913                                openFinder();
914                                document.getElementById(topicTerms).style.display = 'block';
915                                document.getElementById(scrollTopics).style.display = 'block';
916                                document.getElementById(findVideoBtn).style.display = 'block';
917                                $('.video-search span.pros-finder-button a span').css('background','url(/images/global/widgets/ftpa-video-finder/button-normal.png)');
918                                $('.video-search span.video-finder-button a span').css('background','url(/images/global/widgets/ftpa-video-finder/button-active.png)');
919                                $('.video-search span.pros-finder-button a span').hover(
920                                        function() {
921                                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-hover.png)');
922                                                //$(this).css('color','#ffffff');
923                                        },
924                                        function() {
925                                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-normal.png)');
926                                                //$(this).css('color','#999999');
927                                        }
928                                );
929                                $('.video-search span.video-finder-button a span').hover(
930                                        function() {
931                                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-active.png)');
932                                        },
933                                        function() {
934                                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-active.png)');
935                                        }
936                                );
937                        $('#scrollLeft-topics').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
938                                break;
939        case 'key_word':
940                                openFinder();
941                                document.getElementById(widgetRight).style.display = 'block';
942                                document.getElementById(keywordTextbox).style.display = 'block';
943                                break;
944        case 'find_results':
945                                if (searchActivated) {
946                                        openFinder();
947                                        document.getElementById(videoResults).style.display = 'block';
948                                        document.getElementById(scrollResults).style.display = 'block';
949                                        document.getElementById(findVideoBtn).style.display = 'none';
950                                $('#scrollLeft-results').css({color:"#666666", background:"url(/images/global/widgets/ftpa-video-finder/arrow-left-hover.png) left center no-repeat"});
951                                        $('.video-search span.pros-finder-button a span').css('background','url(/images/global/widgets/ftpa-video-finder/button-normal.png)');
952                                        $('.video-search span.video-finder-button a span').css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-normal.png)');
953                                        $('.video-search span.pros-finder-button a span').hover(
954                                                function() {
955                                                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-hover.png)');
956                                                        //$(this).css('color','#ffffff');
957                                                },
958                                                function() {
959                                                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-normal.png)');
960                                                        //$(this).css('color','#999999');
961                                                }
962                                        );
963                                        $('.video-search span.video-finder-button a span').hover(
964                                                function() {
965                                                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-hover.png)');
966                                                },
967                                                function() {
968                                                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-normal.png)');
969                                                }
970                                        );
971                                        loadData.searchResults();
972                                }
973                                break;
974        }
975}
976
977function openFinder() {
978        var widgetRight = "right-content";
979        var proTerms = "wn2";
980        var videoTypes = "wn3";
981        var topicTerms ="wn4";
982        var keywordTextbox = "wn5";
983        var videoResults = "wn6";
984        var prosButton = "gray-pros-button";
985        var videosButton = "";
986        var topicsButton = "";
987        var keywordsButton = "";
988        var scrollPros = "scrollbar-pros";
989        var scrollResults = "scrollbar-results";
990        var scrollTopics = "scrollbar-topics";
991       
992        $('.video-finder-hide').hide();
993        $('.video-search .split-box-left').css('backgroundImage','none');
994        $('.video-search .search-widget').css('backgroundImage','url(/images/global/widgets/ftpa-video-finder/finder-bg.png)');
995        $('.video-search .search-widget').css('height','271px');
996        $('.video-search .search-widget').css('width','892px');
997
998        document.getElementById(widgetRight).style.display = 'block';
999        document.getElementById(proTerms).style.display = 'none';
1000        document.getElementById(videoTypes).style.display = 'none';
1001        document.getElementById(topicTerms).style.display = 'none';
1002        document.getElementById(keywordTextbox).style.display = 'none';
1003        document.getElementById(videoResults).style.display = 'none';
1004        document.getElementById(scrollPros).style.display = 'none';
1005        document.getElementById(scrollResults).style.display = 'none';
1006        document.getElementById(scrollTopics).style.display = 'none';
1007
1008}
1009
1010
1011var searchActivated = false;
1012function activateSearch() {
1013        var searchBtnID = '.submit-button';
1014        $(searchBtnID).bind("click", function() {
1015                //$("#wn6").remove();
1016                //loadData.searchResults();
1017                toggle('find_results');
1018                $(searchBtnID).unbind('click');
1019                $('.video-search span.red-submit a span').css('background','url(/images/global/widgets/ftpa-video-finder/submit-bg.png)');
1020                $('.video-search span.red-submit a span').hover(
1021                        function() {
1022                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/submit-bg.png)');
1023                                $(this).css('color','#999999');
1024                        },
1025                        function() {
1026                                $(this).css('background','url(/images/global/widgets/ftpa-video-finder/submit-bg.png)');
1027                                $(this).css('color','#999999');
1028                        }
1029                );
1030        });
1031        $('.video-search span.red-submit a span').css('background','url(/images/global/widgets/ftpa-video-finder/red-submit-bg-active.png)');
1032        $('.video-search span.red-submit a span').hover(
1033                function() {
1034                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/red-submit-bg-hover.png)');
1035                        $(this).css('color','#ffffff');
1036                },
1037                function() {
1038                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/red-submit-bg-active.png)');
1039                        $(this).css('color','#999999');
1040                }
1041        );
1042        $('#wn4-instructions').html('You can also add Pros to this search.');
1043        $('#wn2-instructions').html('You can also add Topics to this search.');
1044        searchActivated = true;
1045}
1046
1047function deactivateSearch() {
1048        searchActivated = false;
1049        $('.video-search span.red-submit a span').css('background','url(/images/global/widgets/ftpa-video-finder/submit-bg.png)');
1050        $('.video-search span.new-search-text a span').css('color','#666666');
1051        $('.video-search span.red-submit a span').hover(
1052                function() {
1053                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/submit-bg.png)');
1054                        $(this).css('color','#999999');
1055                },
1056                function() {
1057                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/submit-bg.png)');
1058                        $(this).css('color','#999999');
1059                }
1060        );
1061        $('.video-search span.pros-finder-button a span').hover(
1062                function() {
1063                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-hover.png)');
1064                },
1065                function() {
1066                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-normal.png)');
1067                }
1068        );
1069        $('.video-search span.video-finder-button a span').hover(
1070                function() {
1071                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-hover.png)');
1072                },
1073                function() {
1074                        $(this).css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-normal.png)');
1075                }
1076        );
1077}
1078
1079function close_content() {
1080        searchActivated = false;
1081        //var searchBtnID = '.submit-button';
1082        //$(searchBtnID).bind("click", function() {
1083        //      $(searchBtnID).unbind('click');
1084        //});
1085        var rightContent = "right-content";
1086        document.getElementById(rightContent).style.display = 'none';
1087        deactivateSearch();
1088        $('.video-finder-hide').show();
1089        $('.video-search .split-box-left').css('backgroundImage','url(/images/global/widgets/ftpa-video-finder/recommended_box.png)');
1090        $('.video-search span.pros-finder-button a span').css('background','url(/images/global/widgets/ftpa-video-finder/button-normal.png)');
1091        $('.video-search span.video-finder-button a span').css('background','url(/images/global/widgets/ftpa-video-finder/button-topic-normal.png)');
1092        $('.video-search .search-widget').css('backgroundImage','none');
1093        $('.video-search .search-widget').css('height','271px');
1094        $('.video-search .search-widget').css('width','214px');
1095        $('.video-search .search-widget').css('margin-right','16px');
1096       
1097        location.reload();
1098}
1099
1100function getScrollXY() {
1101        var scrOfX = 0, scrOfY = 0;
1102        if( typeof( window.pageYOffset ) == 'number' ) {
1103                scrOfY = window.pageYOffset; scrOfX = window.pageXOffset;
1104        } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
1105                scrOfY = document.body.scrollTop; scrOfX = document.body.scrollLeft;
1106        } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
1107                scrOfY = document.documentElement.scrollTop; scrOfX = document.documentElement.scrollLeft;
1108        }
1109        window.alert( 'Horizontal scrolling = ' + scrOfX + '\nVertical scrolling = ' + scrOfY );
1110}
1111
1112<?php $this->headScript()->captureEnd() ?>
1113
1114<?php
1115        $this->headScript()->appendFile('/js/jquery.scrollTo-min.js');
1116        $this->headScript()->appendFile('/js/preloadCssImages.jQuery_v5.js');
1117?>
1118
1119
1120<?php $this->headStyle()->captureStart() ?>
1121body {
1122    background-color: <?php echo $this->bgColor ?>;
1123}
1124<?php $this->headStyle()->captureEnd() ?>
1125
1126<div class="video-search">
1127        <div class="search-widget">
1128                <div class="split-box-left">
1129            <div class="text">
1130                <div class="top_header">
1131                    <img class="mag-glass" src="images/global/widgets/ftpa-video-finder/mag_arrow.png" alt="Search" />
1132                    <div class="header"><?= $this->video_finder ?></div>
1133                </div>
1134            </div>
1135            <div class="text-blurb"><?= $this->search_by ?></div>
1136            <ul class="search-add-buttons">
1137                <li class="pros-button">
1138                    <span id="gray-pros-button" class="pros-finder-button">
1139                        <a onclick="toggle('pros'); return false" href="#" title="">
1140                            <span class="pros-search-button"><img src="/images/global/widgets/ftpa-video-finder/button-pros.png" alt="Pros" /><?= $this->pros ?></span>
1141                        </a>
1142                    </span>
1143                        </li>
1144                <li id="vid-add" class="vid-button">
1145                    <span class="gray-video-button video-finder-button">
1146                        <a onclick="toggle('topics'); return false" href="#" title="">
1147                            <span class="vid-type-search-button"><img src="/images/global/widgets/ftpa-video-finder/button-categories.png" alt="Categories" /><?= $this->topics ?></span>
1148                        </a>
1149                    </span>
1150                </li>
1151            </ul>
1152            <!--<form id="search-query" action="search.php" method="get">
1153            <div id="video-search-ftpa-util" class="red-submit-btn">
1154                <span class="red-submit">
1155                    <a href="#" title="">
1156                        <span class="submit-button"><?= $this->find_videos ?></span>
1157                    </a>
1158                </span>
1159            </div>
1160            </form>-->
1161            <div id="new-search-clear" class="new-search-link">
1162                <span class="new-search-text">
1163                    <a href="#" class="util-new-search" title="New Search">
1164                        <span class="new-search"><?= $this->clear_search ?></span>
1165                    </a>
1166                </span>
1167            </div>
1168                </div>
1169
1170        <div class="split-box-right" id="right-content">
1171                <div class="added-search-terms-box">
1172                <div class="search-terms">
1173                                        <div class="search-window">
1174                                                <div id="wn">
1175                                                  <div id="lyr" class="content"><span class="search-terms-title"><?= $this->search_terms ?>: <span id="added-search-terms-list" class="added-search-terms">&nbsp;</span></span></div>
1176                                                </div>
1177                                                <div id="scroll_links">
1178                                                        <div id="scrollUp">
1179                                                                <img src="images/global/widgets/ftpa-video-finder/arrow-up.png" height="7" width="8" alt="Arrow Up" class="search-arrow-up"/>
1180                                                        </div>
1181                                                        <div id="scrollDown">
1182                                                                <img src="images/global/widgets/ftpa-video-finder/arrow-down.png" height="7" width="8" alt="Arrow Down" class="search-arrow-down" />
1183                                                        </div>
1184                                                </div>
1185                                        </div>
1186                </div>
1187                <div class="close-widget">
1188                    <a onclick="close_content(); return false">
1189                        <span class="close-right-content">X</span>
1190                    </a>
1191                        </div>
1192                        </div>
1193
1194
1195            <div id="wn2">
1196                <div class="search-instructions-text">
1197                    <h1 id="wn2-instructions" class="search-instructions"><?= $this->select_one ?></h1>
1198                </div>
1199                                <div id="lyr2">
1200                                        <div id="ajax-returned-proname-content" class="ajax-pros-search-content">
1201
1202                                        </div>
1203                                </div>
1204                </div>
1205           
1206            <div id="wn3">
1207                <div class="search-instructions-text">
1208                    <h1 id="wn3-instructions" class="search-instructions"><?= $this->select_one ?></h1>
1209                </div>
1210                                <div id="lyr3">
1211                                        <div id="ajax-returned-content" class="ajax-video-type-search-content">
1212
1213                                        </div>
1214                                </div>
1215                </div>
1216           
1217            <div id="wn4">
1218                <div class="search-instructions-text">
1219                    <h1 id="wn4-instructions" class="search-instructions"><?= $this->select_one ?></h1>
1220                </div>
1221                                <div id="lyr4">
1222                                        <div id="ajax-returned-topics-content" class="ajax-topics-search-content">
1223
1224                                        </div>
1225                                </div>
1226                </div>
1227
1228            <div id="wn6">
1229                <div class="results-search-instructions-text">
1230                    <h1 class="results-search-instructions"><?= $this->number_of_matches ?>: <span class="match-results-text"></span></h1>
1231                </div>
1232                <div id="lyr6" class="ajax-results-content">
1233                    <div id="ajax-matched-results" class="matched-results-items">
1234
1235                    </div>
1236                </div>
1237            </div>
1238           
1239                        <div id="wn5">
1240                                <div class="keyword-search-instructions-text">
1241                                        <h1 class="keyword-search-instructions">Write one or more Keywords in the box below or add more search terms using the buttons on the left.</h1>
1242                                </div>
1243                                <form id="keyword-form" action="">
1244                                        <div class="keyword-search-box">
1245                                                <input id="keyword" class="keyword-text" type="text" value="" maxlength="50" size="30" />
1246                                        </div>
1247                                        <div class="keyword-add-link">
1248                                                <a href="#" onclick="add_keyword(); return false">
1249                                                <span class="keyword-add">Add to the list</span>
1250                                                </a>
1251                                        </div>
1252                                </form>
1253                        </div>
1254                       
1255                        <div id="scrollbar-results">
1256                                <div id="scrollLeft-results" class="scroll-arrow-left"/><span class="scroll-left-text">Previous</span></div>
1257                                <div id="scroll-separator">|</div>
1258                                <div id="scrollRight-results" class="scroll-arrow-right"/><span class="scroll-right-text">More Videos</span></div>
1259                        </div>
1260                       
1261                        <div id="scrollbar-pros">
1262                                <div id="scrollLeft-pros" class="scroll-arrow-left"><span class="scroll-left-text">Previous</span></div>
1263                                <div id="scroll-separator">|</div>
1264                                <div id="scrollRight-pros" class="scroll-arrow-right"/><span class="scroll-right-text">More Pros</span></div>
1265                        </div>
1266                       
1267                        <div id="scrollbar-topics">
1268                                <div id="scrollLeft-topics" class="scroll-arrow-left"><span class="scroll-left-text">Previous</span></div>
1269                                <div id="scroll-separator">|</div>
1270                                <div id="scrollRight-topics" class="scroll-arrow-right"/><span class="scroll-right-text">More Topics</span></div>
1271                        </div>
1272                       
1273            <form id="search-query" action="search.php" method="get">
1274            <div id="video-search-ftpa-util" class="red-submit-btn">
1275                <span class="red-submit">
1276                    <a href="#" title="">
1277                        <span class="submit-button"><?= $this->find_videos ?></span>
1278                    </a>
1279                </span>
1280            </div>
1281            </form>
1282                       
1283                </div>
1284                <div class="both"></div>
1285        </div>
1286</div>