'use strict';
pandora.ui.clipsView = function(videoRatio) {
var $status = $('
')
.css({
width: '100%',
marginTop: '2px',
fontSize: '9px',
textAlign: 'center'
})
.html(Ox._('Loading...')),
that = Ox.SplitPanel({
elements: [
{
element: Ox.Bar({size: 24})
.bindEvent({
doubleclick: function(e) {
if ($(e.target).is('.OxBar')) {
pandora.$ui.clipList.animate({scrollTop: 0}, 250);
}
}
})
.append(
pandora.$ui.sortElement = pandora.ui.sortElement()
)
.append(
Ox.Input({
clear: true,
placeholder: Ox._('Find Clips'),
value: pandora.user.ui.itemFind,
width: 192
})
.css({float: 'right', margin: '4px'})
.bindEvent({
submit: function(data) {
$status.html(Ox._('Loading...'));
pandora.UI.set({itemFind: data.value});
// since this is the only way itemFind can change,
// there's no need for an event handler
that.replaceElement(1,
pandora.$ui.clipList = getClipList()
);
}
})
),
size: 24
},
{
element: pandora.$ui.clipList = getClipList()
},
{
element: Ox.Bar({size: 16}).append($status),
size: 16
}
],
orientation: 'vertical'
});
function getClipList() {
return pandora.ui.clipList(videoRatio)
.bindEvent({
init: function(data) {
var items = data.items;
$status.html(
Ox.toTitleCase(Ox.formatCount(items, 'clip'))
);
}
});
}
return that;
};