Bang Radio<\/span><\/label>\n<\/div>\n <\/div>\n <\/div>\n \n ><\/div>\n <\/div>","type":"dialogue","class":"gallery","js":"\/\/this goes into directory_gallery via a demand dialogue.\n\nvar view_width = 0;\nvar max_width = 0;\nvar ddiv = arguments[0];\n\nvar load_count = 0;\nvar img_count = $(\".gallery-outer\", ddiv).find(\"img\").length;\n\n$(\".gallery-outer\", ddiv).find(\"img\").on(\"load\", function(){\n load_count++;\n if(load_count >= img_count){\n \n \/\/set up the gallery dimensions\n $(\".gallery-slide\", ddiv).each(function(i, e) {\n var slide_width = $(e).outerWidth(true);\n if (slide_width > max_width) {\n max_width = slide_width;\n }\n });\n\n var slide_count = $(\".gallery-slide\", ddiv).length;\n var view_width = slide_count * (max_width);\n $(\".gallery-container\", ddiv).width(max_width);\n $(\".gallery-slides\", ddiv).width(view_width);\n\n\n $(\".gallery-outer\", ddiv).width($(\".gallery-container\").width() + $(\".gallery-arrow-left\").width() + $(\".gallery-arrow-right\").width());\n\n\n \/\/set up the thumbnail dimensions\n\n var container_width = $(\".gallery-outer\").width();\n var max_thumb_width = 0;\n var thumb_width = 0;\n\n $(\".gallery-thumb\", ddiv).each(function(i, e) {\n var thumb_width = $(e).outerWidth(true);\n if (thumb_width > max_thumb_width) {\n max_thumb_width = thumb_width;\n }\n });\n\n\n var thumb_width = slide_count * (max_thumb_width);\n $(\".thumb-container\", ddiv).width(container_width);\n $(\".gallery-thumbs\", ddiv).width(thumb_width);\n\n $(ddiv).dialog(\"option\", \"position\", {\n my: \"center\", \n at: \"center\", \n of: window\n });\n\n \/\/end dimension setup\n\n var drag_drift = 0;\n var start_pos = 0;\n var dx_direction = \"left\";\n var min_left = -(view_width - max_width);\n var frame_width = max_width;\n var min_thumb_left = -(thumb_width - container_width);\n\n \/\/load active slide if any\n\n var change_view = function(index) {\n if(!index){\n index = 0;\n }\n view_index = index;\n var finish = -(index * frame_width);\n \n var slides = $(\".gallery-slide\", ddiv);\n slides.removeClass(\"active\");\n\n $(slides[index]).addClass(\"active\");\n\n var thumbs = $(\".gallery-thumb\", ddiv);\n thumbs.removeClass(\"active\");\n $(thumbs[index]).addClass(\"active\");\n \n $(\".gallery-slides\").stop(true);\n \n $(\".gallery-slides\", ddiv).animate({\n left: finish\n }, 500);\n }\n\n $(\".gallery-arrow-left\").on(\"click\", function(e) {\n e.preventDefault();\n\n dx_direction = \"right\";\n drag_drift = 21;\n var position = parseInt($(\".gallery-slides\", ddiv).css(\"left\"));\n $(\".gallery-slides\", ddiv).css({\n left: (position + 21) + \"px\"\n });\n var ui = {\n position: {\n left: position + 21\n }\n };\n stop(null, ui);\n });\n\n $(\".gallery-arrow-right\").on(\"click\", function(e) {\n e.preventDefault();\n\n dx_direction = \"left\";\n drag_drift = 21;\n var position = parseInt($(\".gallery-slides\", ddiv).css(\"left\"));\n $(\".gallery-slides\", ddiv).css({\n left: (position - 21) + \"px\"\n });\n var ui = {\n position: {\n left: position - 21\n }\n };\n stop(null, ui);\n });\n\n var start = function(e, ui) {\n drag_drift = 0;\n start_pos = ui.position.left;\n }\n\n var drag = function(e, ui) {\n var diff = (ui.position.left - start_pos);\n drag_drift = diff;\n if (drag_drift > 0)\n dx_direction = \"right\";\n else\n dx_direction = \"left\";\n }\n\n var stop = function(e, ui) {\n if (Math.abs(drag_drift) > 20 && ui.position.left < 0 && ui.position.left > min_left) {\n var finish = 0;\n if (dx_direction == \"right\") {\n finish = ui.position.left + ((Math.abs(ui.position.left) % frame_width));\n }\n else {\n finish = ui.position.left - (frame_width - (Math.abs(ui.position.left) % frame_width));\n }\n } else {\n if (ui.position.left <= min_left && dx_direction == \"left\") {\n finish = min_left;\n }\n else if (ui.position.left >= 0 && dx_direction == \"right\") {\n finish = 0;\n }\n else if (dx_direction == \"left\") {\n finish = ui.position.left + ((Math.abs(ui.position.left) % frame_width));\n }\n else {\n finish = ui.position.left - (frame_width - (Math.abs(ui.position.left) % frame_width));\n }\n }\n\n view_index = Math.abs(finish) \/ frame_width;\n if (view_index < 0) {\n view_index = 0;\n }\n\n var slides = $(\".gallery-slide\", ddiv);\n slides.removeClass(\"active\");\n $(slides[view_index]).addClass(\"active\");\n\n center_thumbs();\n\n $(\".gallery-slides\", ddiv).animate({\n left: finish\n }, 500);\n }\n\n $(\".gallery-slides\").draggable({\n axis: 'x',\n start: function(e, ui) {\n start(e, ui);\n },\n drag: function(e, ui) {\n drag(e, ui);\n },\n stop: function(e, ui) {\n stop(e, ui);\n }\n\n });\n\n \/\/gallery thumbs code\n var thumb_drag_drift = 0;\n var thumb_start_pos = 0;\n var thumb_dragged = false;\n var thumb_clicked = false;\n\n $(\".gallery-thumbs\").draggable({\n axis: 'x',\n start: function(e, ui) {\n thumb_start(e, ui);\n },\n drag: function(e, ui) {\n thumb_drag(e, ui);\n },\n stop: function(e, ui) {\n thumb_stop(e, ui);\n }\n\n });\n\n var thumb_start = function(e, ui) {\n thumb_drag_drift = 0;\n thumb_start_pos = ui.position.left;\n thumb_dragged = true;\n }\n\n var thumb_drag = function(e, ui) {\n var diff = (ui.position.left - thumb_start_pos);\n thumb_drag_drift = diff;\n if (thumb_drag_drift > 0) {\n dx_direction = \"right\";\n }\n else {\n dx_direction = \"left\";\n }\n }\n\n var thumb_stop = function(e, ui) {\n var finish = 0;\n if (Math.abs(thumb_drag_drift) > 20 && ui.position.left < 0 && ui.position.left > min_thumb_left) {\n if (dx_direction == \"right\") {\n finish = ui.position.left + ((Math.abs(ui.position.left) % max_thumb_width));\n }\n else {\n finish = ui.position.left - (max_thumb_width - (Math.abs(ui.position.left) % max_thumb_width));\n }\n } else {\n\n if (dx_direction == \"left\" && Math.abs(thumb_drag_drift) > 20) {\n if (ui.position.left <= min_thumb_left) {\n finish = min_thumb_left;\n }\n }\n }\n\n $(\".gallery-thumbs\", ddiv).animate({\n left: finish\n }, 500);\n }\n\n $(\".gallery-thumb\", ddiv).on(\"click\", function(e) {\n if (thumb_dragged && Math.abs(thumb_drag_drift) > 5) {\n thumb_dragged = false;\n e.preventDefault();\n return;\n }\n change_view($(this).index());\n center_thumbs();\n });\n\n var center_thumbs = function() {\n var thumbs = $(\".gallery-thumb\", ddiv);\n thumbs.removeClass(\"active\");\n $(thumbs[view_index]).addClass(\"active\");\n\n \/\/console.log($(thumbs[view_index]).position());\n\n var center = container_width \/ 2;\n var overleft = -(view_index * max_thumb_width - (center - (max_thumb_width \/ 2)));\n\n if (overleft > 0) {\n overleft = 0;\n } else if (overleft < min_thumb_left) {\n overleft = min_thumb_left;\n }\n\n $(\".gallery-thumbs\", ddiv).stop(true);\n\n $(\".gallery-thumbs\", ddiv).animate({\n left: overleft\n }, 500);\n }\n\n var view_index = $(\".gallery-slide.active\", ddiv).index();\n\n if (view_index > 0) {\n change_view(view_index);\n }\n }\n});"}